CSS

The CSS style is the es­sence of m.css. It makes use of HTM­L5 tags as much as pos­sible to avoid re­dund­ant classes. Con­trary to oth­er pop­u­lar frame­works, all cus­tom CSS classes and IDs are pre­fixed with m- to avoid con­flicts with 3rd party styles. All sizes, pad­dings and bor­der widths are spe­cified us­ing rem units, re­l­at­ive to base page font size; box-sizing: border-box is ap­plied to all ele­ments by de­fault.

Quick start

To take full ad­vant­age 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­it­ory:

Scroll be­low for a de­tailed func­tion­al­ity de­scrip­tion of each file. In ad­di­tion to the above, if you want to present high­lighted code snip­pets (or colored ter­min­al out­put) on your web­site, there’s also a built­in style for Pyg­ments, match­ing m.css themes:

Once you have the files, ref­er­ence them from your HTML markup. The top-level 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 uses the Source Sans Pro font for copy and Source Code Pro font for pre-format­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 devices re­cog­nize your web­site prop­erly as re­spons­ive 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 also re­quired.

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

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 provides a 12-column lay­out, in­spired by Boot­strap. It provides a simple, easy-to-use solu­tion for mod­ern re­spons­ive 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­po­graphy »

Sane de­fault style for body text, para­graphs, lists, links, head­ings and oth­er com­mon ty­po­graph­ic­al ele­ments, provided by the m-components.css file.

Com­pon­ents »

The m-components.css file also con­tains styles for visu­al ele­ments that add more struc­ture to your con­tent. From simple notes and top­ic blocks, tables, im­ages or fig­ures to com­plex ele­ments like code snip­pets, math for­mu­las or im­age grid.

Page lay­out »

In m-layout.css there’s a styl­ing for the whole page in­clud­ing nav­ig­a­tion — head­er and foot­er, sec­tion head­ings, art­icle styl­ing with side­bar, tag cloud, act­ive sec­tion high­light­ing and more.

Themes »

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