CSS » Components

Col­ors

Sim­il­arly to Boot­strap, m.css has a set of pre­defined col­ors that af­fect how a cer­tain com­pon­ent looks. This works on ma­jor­ity of com­pon­ents shown on this page. The col­ors are:

• .m-default is a de­fault style that doesn’t grab at­ten­tion
• .m-primary is meant to be used to high­light the primary ele­ment on a page
• .m-success is good to high­light happy things
• .m-warning catches at­ten­tion, but doesn’t hurt
• .m-danger brings really bad news
• .m-info is for side notes
• .m-dim is shy and doesn’t want you to be bothered by the in­form­a­tion it brings

Blocks

Blocks, defined by .m-block, wrap the con­tent in a light frame and add a bolder colored bar on the left. Use in com­bin­a­tion with one of the col­or styles above. Block cap­tion should go in­to <h3> (or <h4>, <h5>, <h6>) and is colored in re­spect to the col­or style as well. Text and links in­side the text al­ways have the de­fault col­or, ex­cept for .m-block.m-dim. It’s also pos­sible to have a block without the bor­der, just add .m-flat class to it.

It’s re­com­men­ded to use the <aside> ele­ment to high­light the se­mantics, but the CSS class can be used on any block ele­ment.

<aside class="m-block m-default">
  <h3>Default block</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices
  a erat eu suscipit. <a href="#">Link.</a>
</aside>

Badges

Badges are blocks to­geth­er with an avatar, con­tain­ing for ex­ample info about the au­thor of giv­en art­icle. Simply add .m-badge to your colored block ele­ment and put an <img> ele­ment with the avatar as the first child. Only <h3> is sup­por­ted for a badge. For stan­dalone roun­ded avatars, see Im­ages be­low.

<div class="m-block m-badge m-success">
  <img src="author.jpg" alt="The Author" />
  <h3>About the author</h3>
  <p><a href="#">The Author</a> is ...</p>
</div>

About the author

The Author is not really smiling at you from this avatar. Sorry about that. He knows that and he promises to improve. Stalk him on Twitter if you want to get notified when he gets a better avatar.

Notes, frame

Un­like blocks, notes are meant to wrap smal­ler bits of in­form­a­tion. Use the .m-note CSS class to­geth­er with de­sired col­or class. A note is also slightly roun­ded and has everything colored, the back­ground, the cap­tion, text and also links. The <h3> (<h4>, <h5>, <h6>) cap­tion tag is op­tion­al.

Be­sides notes, there is a frame ele­ment defined by .m-frame, which just wraps your con­tent in a slightly roun­ded bor­der. No col­or classes ap­ply to a frame.

Like with blocks, tt’s re­com­men­ded to use the <aside> ele­ment for se­mant­ic pur­poses, but the CSS classes can be used on any block ele­ment.

<aside class="m-note m-success">
  <h3>Success note</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
</aside>

Text

Use .m-text CSS class to­geth­er with de­sired col­or class to col­or a para­graph or in­line text.

<p class="m-text m-warning">Warning text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam
pharetra imperdiet tortor sed vehicula. <a href="#">Link.</a></p>

Ap­ply .m-tiny, .m-small or .m-big CSS class to­geth­er with .m-text to make the text ap­pear smal­ler or lar­ger.

<p class="m-text m-big">Larger text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>
<p class="m-text m-small">Smaller text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>
<p class="m-text m-tiny">Tiny text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>

But­ton links

To high­light im­port­ant links such as file down­load, you can style them as but­tons. Use .m-button CSS class to­geth­er with de­sired col­or class on an <a> tag. Use .m-flat in­stead of a col­or class to make the but­ton flat. It is then styled sim­il­arly to a link, but with big­ger pad­ding around. The but­ton is by de­fault centered, ap­ply a .m-fullwidth class to it to dis­play it as a full-width block with cen­ter-aligned la­bel.

<div class="m-button m-success m-fullwidth"><a href="#">Success button</a></div>

You can put two <div>s with .m-big and .m-small CSS class in­side the <a> to achieve the fol­low­ing ef­fect:

<div class="m-button m-primary">
  <a href="#">
    <div class="m-big">Download the thing</div>
    <div class="m-small">Any platform, 5 kB.</div>
  </a>
</div>

La­bels

Use .m-label to­geth­er with a col­or class to style a la­bel. Com­bine with .m-flat to cre­ate a less no­tice­able la­bel. The la­bel size ad­apts to size of sur­round­ing text.

<h3>An article <span class="m-label m-success">updated</span></h3>
<p class="m-text m-dim">That's how things are now.
<span class="m-label m-flat m-primary">clarified</span></p>

Tables

Use .m-table to ap­ply styl­ing to a table. The table is centered by de­fault; rows are sep­ar­ated by lines, with <thead> and <tfoot> be­ing sep­ar­ated by a thick­er line. The <th> ele­ment is rendered in bold, all <th> and <td> are aligned to left while table <caption> is centered. Ex­ample table:

<table class="m-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Heading</th>
      <th>Second<br/>heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Second cell</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th scope="row">2</th>
      <td>2nd row cell</td>
      <td>2nd row 2nd cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>&Sigma;</th>
      <td>Footer</td>
      <td>Second<br/>footer</td>
    </tr>
  </tfoot>
</table>

Use the .m-fullwidth CSS class on the <table> ele­ment to make the table span the full width in­stead of be­ing centered. Rows are high­lighted on hov­er, if you want to dis­able that, put .m-flat on the <table> ele­ment. You can also put .m-thin onto <th> ele­ments to re­move the bold styl­ing. Sim­il­arly to oth­er com­pon­ents, you can col­or par­tic­u­lar <tr> or <td> ele­ments us­ing the col­or classes from above:

Mark the table with .m-big to in­flate it with more spa­cing, for ex­ample when design­ing a high-level product cat­egory over­view.

Sim­il­arly to lists, if us­ing <p> ele­ments in­side <td>, they are neither in­den­ted nor jus­ti­fied.

Im­ages

Put­ting .m-image class onto an <img>, <svg> or <video> tag makes the im­age or video centered, slightly roun­ded and sets its max width to 100%. Adding .m-fullwidth on the im­age ele­ment works as ex­pec­ted. For ac­cess­ib­il­ity reas­ons it’s a good prac­tice to in­clude the alt at­trib­ute.

<img src="flowers.jpg" alt="Flowers" class="m-image" />

To make the im­age click­able, wrap the <a> tag in an ad­di­tion­al <div> and put the .m-image class on the <div> ele­ment in­stead of on the im­age. This will en­sure that only the im­age is click­able and not the sur­round­ing area:

<div class="m-image">
  <a href="flowers.jpg"><img src="flowers.jpg" /></a>
</div>

For avatars, sim­il­arly to the Badges above, ap­ply­ing a .m-badge class to­geth­er with .m-image will make the im­age round. Works for both plain <img> and click­able im­ages wrapped in <div class="m-image">. The .m-badge isn’t re­cog­nized for <svg> or <video> how­ever.

<img src="author.jpg" alt="The Author" class="m-image m-badge" />

Fig­ures

Use the HTM­L5 <figure> tag to­geth­er with .m-figure to style it. As with plain im­age, it’s by de­fault centered, slightly roun­ded and has a bor­der around the cap­tion and de­scrip­tion. The cap­tion is ex­pec­ted to be in the <figcaption> ele­ment. In­side it, there can op­tion­ally be a longer de­scrip­tion wrapped in a div.m-figure-description ele­ment. The .m-fullwidth class works here too and you can also wrap the <img> / <svg> / <video> ele­ment in an <a> tag to make it click­able.

Fig­ure al­ways ex­pects at least the cap­tion to be present. If you want just an im­age, use the plain im­age tag. If you have a lot of fig­ures on the page and the bor­der is dis­tract­ing, ap­ply the .m-flat class to hide it. Op­tion­ally you can col­or the fig­ure bor­der and cap­tion (with the de­scrip­tion stay­ing un­af­fected) by adding one of the CSS col­or classes to the <figure> ele­ment.

<figure class="m-figure">
  <img src="ship.jpg" alt="Ship" />
  <figcaption>
    A Ship
    <div class="m-figure-description">
      Photo © <a href="http://blog.mosra.cz/">The Author</a>
    </div>
  </figcaption>
</figure>

Im­age grid

In­spired by im­age grids on Me­di­um, its pur­pose is to present pho­tos in a beau­ti­ful way. Wrap one or more <figure> ele­ments in a <div class="m-imagegrid"> ele­ment and de­lim­it each row with a wrap­per <div>. Each <figure> ele­ment needs to con­tain an <img> and a <figcaption> with im­age cap­tion that ap­pears on hov­er; these two ele­ments can be op­tion­ally wrapped in an <a> to make the im­age click­able. If you don’t want a cap­tion, use an empty <div> in­stead of <figcaption>. If you want the grid to in­flate to full con­tain­er width, add a .m-container-inflate CSS class to it.

Ex­ample us­age (stu­pidly show­ing the two im­ages all over again — sorry):

<div class="m-imagegrid m-container-inflate">
  <div>
    <figure style="width: 69.127%">
      <a href="ship.jpg">
        <img src="ship.jpg" />
        <figcaption>F9.0, 1/250 s, ISO 100</figcaption>
      </a>
    </figure>
    <figure style="width: 30.873%">
      <a href="flowers.jpg">
        <img src="flowers.jpg" />
        <figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
      </a>
    </figure>
  </div>
  <div>
    <figure style="width: 30.873%">
      <a href="flowers.jpg">
        <img src="flowers.jpg" />
        <figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
      </a>
    </figure>
    <figure style="width: 69.127%">
      <a href="ship.jpg">
        <img src="ship.jpg" />
        <figcaption>F9.0, 1/250 s, ISO 100</figcaption>
      </a>
    </figure>
  </div>
</div>

The core idea be­hind the im­age grid is scal­ing par­tic­u­lar im­ages to oc­cupy the same height on giv­en row. First, a sum of im­age as­pect ra­tios is cal­cu­lated for the whole row:

Then, per­cent­age width of each im­age is cal­cu­lated as:

Code

m.css re­cog­nizes code high­light­ing com­pat­ible with Pyg­ments and provides ad­di­tion­al styl­ing for it. There’s a set of built­in pyg­ments-*.css styles that match the m.css themes.

For ex­ample, code high­lighted us­ing:

echo -e "int main() {\n    return 0;\n}" | pygmentize -f html -l c++ -O nowrap

Will spit out a bunch of <span> ele­ments like be­low. To cre­ate a code block, wrap the out­put in <pre class="m-code"> (note that whitespace mat­ters in­side this tag). The block doesn’t wrap lines on nar­row screens to not hurt read­ab­il­ity, a ho­ri­zont­al scroll­bar is shown in­stead if the con­tent is too wide.

<pre class="m-code"><span class="kt">int</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span></pre>

int main() {
    return 0;
}

Pyg­ments al­low to high­light ar­bit­rary lines, which af­fect the ren­der­ing in this way:

int main() {
    std::cout << "Hello world!" << std::endl;
    return 0;
}

Some­times you want to fo­cus on code that has been changed / ad­ded and mute the rest. Add an ad­di­tion­al .m-inverted CSS class to the <pre class="m-code"> to achieve this ef­fect:

#include <iostream>

int main() {
    std::cout << "Hello world!" << std::endl;
    return 0;
}

To have code high­light­ing in­line, wrap the out­put in <code class="m-code"> in­stead of <pre>:

<p>The <code class="m-code"><span class="n">main</span><span class="p">()</span></code>
function doesn't need to have a <code class="m-code"><span class="k">return</span></code>
statement.</p>

<pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
<span class="p">}</span></pre>

.success {
  color: #3bd267;
}

ls -C --color=always | pygmentize -l plugins/ansilexer.py:AnsiLexer -x -f html -O nowrap

<pre class="m-console">CONTRIBUTING.rst  CREDITS.rst  <span class="g g-AnsiBrightBlue">doc</span>            <span class="g g-AnsiBrightBlue">plugins</span>        README.rst
COPYING           <span class="g g-AnsiBrightBlue">css</span>          <span class="g g-AnsiBrightBlue">documentation</span>  <span class="g g-AnsiBrightBlue">pelican-theme</span>  <span class="g g-AnsiBrightBlue">site</span></pre>

CONTRIBUTING.rst  CREDITS.rst  doc            plugins        README.rst
COPYING           css          documentation  pelican-theme  site

<figure class="m-code-figure">
  <pre>Some
    code
snippet</pre>
  And a resulting output.
</figure>

Some
    code
snippet

<figure class="m-code-figure">
    <pre class="m-code">Some
    code
snippet</pre>
    <pre class="m-console m-nopad">And a resulting output.</pre>
</figure>

Some
    code
snippet

And a resulting output.

Math

The latex2svg.py util­ity from tuxu/latex2s­vg can be used to gen­er­ate SVG rep­res­ent­a­tion of your LaTeX math for­mu­las. As­sum­ing you have some LaTeX dis­tri­bu­tion and dvis­vgm in­stalled, the us­age is:

echo "\$\$ a^2 = b^2 + c^2 \$\$" | python plugins/latex2svg.py > formula.svg

The formula.svg file will then con­tain the rendered for­mula, which with some minor patch­ing (re­mov­ing the XML pre­amble etc.) can be pas­ted dir­ectly in­to your HTML code. The <svg> ele­ment con­tain­ing math can be wrapped in <div class="m-math"> to make it centered. Sim­il­arly to code blocks, the math block shows a ho­ri­zont­al scroll­bar if the con­tent is too wide on nar­row screens. CSS col­or classes can be ap­plied to the <div>. It’s a good prac­tice to in­clude the <title> ele­ment for ac­cess­ib­il­ity reas­ons.

<div class="m-math m-success">
  <svg>
    <title>a^2 = b^2 + c^2</title>
    <g>...</g>
  </svg>
</div>

For in­line math, add the .m-math class to the <svg> tag dir­ectly. Note that you’ll prob­ably need to manu­ally spe­cify vertical-align style to make the for­mula align well with sur­round­ing text. You can use CSS col­or classes here as well. When us­ing the latex2svg.py util­ity, wrap the for­mula in $ in­stead of $$ to pro­duce in­line math; the depth value re­turned on stderr can be taken as a base for the vertical-align prop­erty.

<p>There is <a href="https://tauday.com/">a movement</a> for replacing circle
constant <svg class="m-math" style="vertical-align: 0.0pt">...</svg> with the
<svg class="m-math m-warning" style="vertical-align: 0.0pt">...</svg> character.

The CSS col­or classes work also on <g> and <rect> ele­ments in­side <svg> for high­light­ing parts of for­mu­las.

<figure class="m-figure">
  <svg class="m-math">
    <title>a^2 = b^2 + c^2</title>
    <g>...</g>
  </svg>
  <figcaption>
    Theorem
    <div class="m-figure-description">A Pythagorean one.</div>
  </figcaption>
</figure>

Plots

Wrap a <svg> ele­ment in a <div class="m-plot"> to make it centered and oc­cupy­ing full width. Mark plot axes back­ground with .m-background, bars can be styled us­ing .m-bar and a cor­res­pond­ing CSS col­or class. Mark ticks and vari­ous oth­er lines with .m-line, er­ror bars with .m-error. Use <text class="m-label"> for tick and axes la­bels and <text class="m-title"> for graph title.

<div class="m-plot"><svg>
  <path d="M 68.22875 70.705312 ..." class="m-background"/>
  <path d="M 68.22875 29.116811 ..." class="m-bar m-warning"/>
  <path d="M 68.22875 51.121309 ..." class="m-bar m-primary"/>
  ...
  <defs><path d="..." id="mba4ce04b6c" class="m-line"/></defs>
  <use x="68.22875" xlink:href="#mba4ce04b6c" y="37.91861"/>
  <text class="m-label" style="text-anchor:end;" ...>Cheetah</text>
  ...
  <path d="M 428.616723 37.91861 ..." class="m-error"/>
  ...
  <text class="m-title" style="text-anchor:middle;" ...>Fastest animals</text>
</svg></div>

Graphs

Wrap a <svg> ele­ment in a <div class="m-graph"> to make it centered and oc­cupy­ing full width at most. Wrap edge <path>, <polygon> and <text> ele­ments in <g class="m-edge"> to style them as edges, wrap node <polygon>, <ellipse> and <text> ele­ments in <g class="m-node"> to style them as nodes. You can use CSS col­or classes on either the wrap­per <div> or on the <g> to col­or the whole graph or its parts. Use .m-flat on a .m-node to make it just an out­line in­stead of filled.

<div class="m-graph m-info"><svg>
  <g class="m-node">
    <ellipse cx="27.5772" cy="-27.5772" rx="27.6545" ry="27.6545"/>
    <text text-anchor="middle" x="27.5772" y="-23.7772">yes</text>
  </g>
  <g class="m-node m-flat">
    <ellipse cx="134.9031" cy="-27.5772" rx="25" ry="25"/>
    <text text-anchor="middle" x="134.9031" y="-23.7772">no</text>
  </g>
  <g class="m-edge">
    <path d="M55.2163,-27.5772C68.8104,-27.5772 85.3444,-27.5772 99.8205,-27.5772"/>
    <polygon points="99.9261,-31.0773 109.9261,-27.5772 99.9261,-24.0773 99.9261,-31.0773"/>
    <text text-anchor="middle" x="82.6543" y="-32.7772">no</text>
  </g>
  <g class="m-edge m-dim">
    <path d="M125.3459,-50.4471C124.3033,-61.0564 127.489,-70.3259 134.9031,-70.3259 139.7685,-70.3259 142.813,-66.3338 144.0365,-60.5909"/>
    <polygon points="147.5398,-60.5845 144.4603,-50.4471 140.5459,-60.2923 147.5398,-60.5845"/>
    <text text-anchor="middle" x="134.9031" y="-75.5259">no</text>
  </g>
</svg></div>

<figure class="m-figure">
  <svg class="m-graph m-warning">
    ...
  </svg>
  <figcaption>
    Impenetrable logic
    <div class="m-figure-description">No.</div>
  </figcaption>
</figure>

Pad­ding and float­ing

Sim­il­arly to ty­po­graphy ele­ments; blocks, notes, frames, tables, im­ages, fig­ures, im­age grids, code and math blocks and code fig­ures have 1rem pad­ding on the bot­tom, ex­cept when they are the last ele­ment, to avoid ex­cess­ive spa­cing. The list spe­cial cas­ing and abil­ity to dis­able the pad­ding us­ing .m-nopadb ap­plies here as well.

Com­pon­ents that ap­pear dir­ectly in a column that’s m-container-inflatable or dir­ectly in­side any nes­ted <section> are out­den­ted to pre­serve a straight line of text align­ment on the sides. You can spot that on this page — look how notes and fig­ures have their back­ground out­side. This also makes nar­row lay­outs bet­ter read­able, as the com­pon­ent visu­als don’t cut in­to pre­cious screen width.

All com­pon­ents sup­port the float­ing classes from the grid sys­tem, how­ever hav­ing float­ing ele­ments in­side the com­pon­ents is not sup­por­ted. Float­ing ele­ments also pre­serve the in­flat­able be­ha­vi­or de­scribed above.

Re­spons­ive util­it­ies

If you have some ele­ment that will cer­tainly over­flow on smal­ler screen sizes (such as wide table or im­age that can’t be scaled), wrap it in a .m-scroll. This will put a ho­ri­zont­al scroll­bar un­der in case the ele­ment over­flows.

There’s also .m-fullwidth that will make your ele­ment al­ways oc­cupy 100% of the par­ent ele­ment width. Use­ful for tables or im­ages.