The CSS style is the essence of m.css. It makes use of HTM­L5 tags as much as pos­si­ble to avoid re­dun­dant class­es. Con­trary to oth­er pop­u­lar frame­works, all cus­tom CSS class­es and IDs are pre­fixed with m- to avoid con­flicts with 3rd par­ty styles. All sizes, paddings and bor­der widths are spec­i­fied us­ing rem units, rel­a­tive to base page font size; box-sizing: border-box is ap­plied to all el­e­ments by de­fault.

Quick start

To make full ad­van­tage of m.css, you need the fol­low­ing files writ­ten in plain CSS. Down­load them be­low or grab the whole Git re­pos­i­to­ry:

Scroll be­low for a de­tailed func­tion­al­i­ty de­scrip­tion of each file. In ad­di­tion to the above, if you want to present high­light­ed code snip­pets (or col­ored ter­mi­nal out­put) on your web­site, there’s al­so a builtin style for Pyg­ments, match­ing m.css themes:

Once you have the files, ref­er­ence them from your HTML markup. The top-lev­el m-dark.css / m-light.css file in­cludes the oth­ers via a CSS @import state­ment, so you don’t need to link all of them. The dark theme us­es the Source Sans Pro font for copy and Source Code Pro font for pre-for­mat­ted text and code, which you need to ref­er­ence as well. See the Themes page for re­quire­ments of oth­er themes.

Be­sides that, in or­der to have de­vices rec­og­nize your web­site prop­er­ly as re­spon­sive and not zoom it all the way out to an un­read­able mess, don’t for­get to in­clude a prop­er <meta> tag. The HTM­L5 DOC­TYPE is al­so re­quired.

<!DOCTYPE html>
    <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&amp;subset=latin-ext" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

With this, you can start us­ing the frame­work right away. Click the head­ings be­low to get to know more.

Grid sys­tem »

The m-grid.css file pro­vides a 12-col­umn lay­out, in­spired by Boot­strap. It pro­vides a sim­ple, easy-to-use so­lu­tion for mod­ern re­spon­sive web de­vel­op­ment. It comes to­geth­er with m-debug.css that helps de­bug­ging the most com­mon mis­takes in grid lay­outs.

Ty­pog­ra­phy »

Sane de­fault style for body text, para­graphs, lists, links, head­ings and oth­er com­mon ty­po­graph­i­cal el­e­ments, pro­vid­ed by the m-components.css file.

Com­po­nents »

The m-components.css file al­so con­tains styles for vis­ual el­e­ments that add more struc­ture to your con­tent. From sim­ple notes and top­ic blocks, ta­bles, im­ages or fig­ures to com­plex el­e­ments like code snip­pets, math for­mu­las or im­age grid.

Page lay­out »

In m-layout.css there’s a styling for the whole page in­clud­ing nav­i­ga­tion — head­er and foot­er, sec­tion head­ings, ar­ti­cle styling with side­bar, tag cloud, ac­tive sec­tion high­light­ing and more.

Themes »

Fi­nal­ly, m-theme-dark.css and m-theme-light.css use CSS vari­ables to achieve easy them­ing. Two builtin themes, used by the au­thor him­self on a bunch of web­sites to guar­an­tee that ev­ery­thing fits well to­geth­er.