The CSS style is the essence of m.css. It makes use of HTML5 tags as much as
possible to avoid redundant classes. Contrary to other popular frameworks, all
custom CSS classes and IDs are prefixed with
m- to avoid conflicts with 3rd
party styles. All sizes, paddings and border widths are specified using
units, relative to base page font size;
box-sizing: border-box is
applied to all elements by default.
To make full advantage of m.css, you need just three files written in plain CSS. Download them below or grab the whole Git repository:
In addition to the above, if you want to present highlighted code snippets (or colored terminal output) on your website, there’s also a builtin style for Pygments, matching m.css themes:
- pygments-dark.css, generated from pygments-dark.py
- pygments-console.css, generated from pygments-dark.py
Once you have the files, include them in your HTML markup. The top-level
m-light.css file includes the other via CSS
statement, so you don’t need to reference these. The dark theme uses the
Source Sans Pro font for
copy and Source Code Pro
font for pre-formatted text and code, which you need to reference as well. See
the Themes page for requirements of other
Besides that, in order to have devices recognize your website properly as
responsive and not zoom it all the way out to an unreadable mess, don’t forget
to include a proper
<meta> tag. The HTML5 DOCTYPE is also required.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="m-dark.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sans+Pro:400,400i,600&subset=latin-ext" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> ... </html>
With this, you can start using the framework right away. Click the headings below to get to know more.
m-grid.css file provides a 12-column layout, inspired by
Bootstrap. It provides a simple, easy-to-use
solution for modern responsive web development. It comes together with
m-debug.css that helps debugging the most common mistakes in grid layouts.
Sane default style for body text, paragraphs, lists, links, headings and other
common typographical elements, provided by the
m-components.css file also contains styles for visual elements that add
more structure to your content. From simple notes and topic blocks, tables,
images or figures to complex elements like code snippets, math formulas or
m-components.css has also full-fledged collection of elements
to form not only the content, but the whole page including navigation —
header and footer, section headings, article styling with sidebar and tag cloud
m-light.css use CSS variables to achieve easy
theming. Two builtin themes, used by the author himself on a bunch of websites
to guarantee that everything fits well together.