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 the following files written in plain CSS. Download them below or grab the whole Git repository:
- m-grid.css with optional m-debug.css for responsiveness
- m-components.css for typography and basic components
- m-layout.css for overall page and article layout
- m-theme-dark.css or m-theme-light.css for theme setup
- m-dark.css or
@importthe above files for a convenient single-line referencing
Scroll below for a detailed functionality description of each file. 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, reference them from your HTML markup. The top-level
m-light.css file includes the others via a CSS
@import statement, so you don’t need to link all of them. 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-layout.css there’s a styling for the whole page including navigation
— header and footer, section headings, article styling with sidebar, tag
cloud, active section highlighting and more.
m-theme-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.