CSS » Components

m.css pro­vides a set of ba­sic com­po­nents for fur­ther im­prov­ing the lay­out and dis­play of au­thored con­tent.

Col­ors

Sim­i­lar­ly to Boot­strap, m.css has a set of pre­de­fined col­ors that af­fect how a cer­tain com­po­nent looks. This works on ma­jor­i­ty of com­po­nents 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 pri­ma­ry el­e­ment on a page
  • .m-success is good to high­light hap­py things
  • .m-warning catch­es at­ten­tion, but doesn’t hurt
  • .m-danger brings re­al­ly bad news
  • .m-info is for side notes
  • .m-dim is shy and doesn’t want you to be both­ered by the in­for­ma­tion it brings

Blocks

Blocks, de­fined by .m-block, wrap the con­tent in a light frame and add a bold­er col­ored bar on the left. Use in com­bi­na­tion with one of the col­or styles above. Block cap­tion should go in­to <h3> (or <h4>, <h5>, <h6>) and is col­ored in re­spect to the col­or style as well. Text and links al­ways have the de­fault col­or, ex­cept for .m-block.m-dim. It’s al­so pos­si­ble to have a block with­out the bor­der, just add .m-flat class to it.

It’s rec­om­mend­ed to use the <aside> el­e­ment to high­light the se­man­tics, but the CSS class can be used on any block el­e­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­am­ple in­fo about the au­thor of giv­en ar­ti­cle. Sim­ply add .m-badge to your col­ored block el­e­ment and put an <img> el­e­ment with the avatar as the first child. On­ly <h3> is sup­port­ed for a badge.

<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>
The Author

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 small­er bits of in­for­ma­tion. Use the .m-note CSS class to­geth­er with de­sired col­or class. A note is al­so slight­ly round­ed and has ev­ery­thing col­ored, the back­ground, the cap­tion, text and al­so links. The <h3> (<h4>, <h5>, <h6>) cap­tion tag is op­tion­al.

Be­sides notes, there is a frame el­e­ment de­fined by .m-frame, which just wraps your con­tent in a slight­ly round­ed bor­der. No col­or class­es ap­ply to a frame.

Like with blocks, tt’s rec­om­mend­ed to use the <aside> el­e­ment for se­man­tic pur­pos­es, but the CSS class­es can be used on any block el­e­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>

Default text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Primary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Success text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Warning text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Danger text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Info text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Dim text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Ap­ply .m-small or .m-big CSS class to­geth­er with .m-text to make the text ap­pear small­er or larg­er.

<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>

Larger text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Smaller text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Be­sides <strong> and <em> you can use .m-strong or .m-em CSS class to­geth­er with .m-text to achieve the same ef­fect with­out us­ing those par­tic­u­lar tags.

<p>Lorem ipsum dolor sit amet; <span class="m-text m-strong">strong text</span>;
consectetur adipiscing elit. <span class="m-text m-em">Emphasised.</span></p>

Lorem ipsum dolor sit amet; strong text; consectetur adipiscing elit. Emphasised.

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 adapts 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>

An article updated

That's how things are now. clarified

Ta­bles

Use .m-table to ap­ply styling to a ta­ble. The ta­ble is cen­tered by de­fault; rows are sep­a­rat­ed by lines, with <thead> and <tfoot> be­ing sep­a­rat­ed by a thick­er line. The <th> el­e­ment is ren­dered in bold, all <th> and <td> are aligned to left while ta­ble <caption> is cen­tered. Ex­am­ple ta­ble:

<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>
Table caption
# Heading Second
heading
1 Cell Second cell
2 2nd row cell 2nd row 2nd cell
Σ Footer Second
footer

Rows are high­light­ed on hov­er, if you want to dis­able that, put .m-flat CSS class on the <table> el­e­ment. Sim­i­lar­ly to oth­er com­po­nents, you can col­or par­tic­u­lar <tr> or <td> el­e­ments us­ing the col­or class­es from above:

Default row Lorem ipsum dolor sit amet Link
Primary row Lorem ipsum dolor sit amet Link
Success row Lorem ipsum dolor sit amet Link
Warning row Lorem ipsum dolor sit amet Link
Danger row Lorem ipsum dolor sit amet Link
Info row Lorem ipsum dolor sit amet Link
Dim row Lorem ipsum dolor sit amet Link

Sim­i­lar­ly to lists, if us­ing <p> el­e­ments in­side <td>, they are nei­ther in­dent­ed nor jus­ti­fied.

Im­ages

Putting .m-image class on­to an <img> / <svg> tag makes the im­age cen­tered, slight­ly round­ed and sets its max width to 100%. Adding .m-fullwidth on the im­age el­e­ment works as ex­pect­ed. For ac­ces­si­bil­i­ty rea­sons it’s a good prac­tice to in­clude the alt at­tribute.

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

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> el­e­ment in­stead of on the im­age. This will en­sure that on­ly 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>

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 cen­tered, slight­ly round­ed and has a bor­der around the cap­tion and de­scrip­tion. The cap­tion is ex­pect­ed to be in the <figcaption> el­e­ment. The de­scrip­tion is op­tion­al, but should be wrapped in some tag as well (for ex­am­ple a <span>). The .m-fullwidth class works here too and you can al­so wrap the <img> el­e­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­al­ly you can col­or the fig­ure bor­der and cap­tion by adding one of the CSS col­or class­es to the <figure> el­e­ment.

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

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> el­e­ments in a <div class="m-imagegrid"> el­e­ment and de­lim­it each row with a wrap­per <div>. Each <figure> el­e­ment needs to con­tain an <img> and a <figcaption> with im­age cap­tion that ap­pears on hov­er; these two el­e­ments can be op­tion­al­ly wrapped in an <a> to make the im­age click­able. If you don’t want a cap­tion, use an emp­ty <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­am­ple us­age (stupid­ly show­ing the two im­ages all over again — sor­ry):

<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­cu­py the same height on giv­en row. First, a sum LaTeX Math W of im­age as­pect ra­tios is cal­cu­lat­ed for the whole row:

LaTeX Math W = \sum_{i=0}^{n-1} \cfrac{w_i}{h_i}

Then, per­cent­age width LaTeX Math p_i of each im­age is cal­cu­lat­ed as:

LaTeX Math p_i = W \cfrac{w_i}{h_i} \cdot 100 \%

Code

m.css rec­og­nizes code high­light­ing com­pat­i­ble with Pyg­ments and pro­vides ad­di­tion­al styling for it. There’s a set of builtin pyg­ments-*.css styles that match the m.css themes.

For ex­am­ple, code high­light­ed us­ing:

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

Will spit out a bunch of <span> el­e­ments like be­low. To cre­ate a code block, wrap the out­put in <pre class="m-code"> (note that white­space mat­ters in­side this tag). The block doesn’t wrap lines on nar­row screens to not hurt read­abil­i­ty, a hor­i­zon­tal 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­bi­trary 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 / added 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>

The main() function doesn't need to have a return statement.

Col­ored ter­mi­nal out­put

Be­sides code, it’s al­so pos­si­ble to “high­light” AN­SI-col­ored ter­mi­nal out­put. For that, m.css pro­vides a cus­tom Pyg­ments lex­er that’s to­geth­er with pyg­ments-con­sole.css able to de­tect and high­light the ba­sic 4-bit col­or codes (8 fore­ground col­ors in ei­ther nor­mal or bright ver­sion). Down­load the an­silex­er.py file or use it di­rect­ly from your Git clone of m.css. Ex­am­ple us­age:

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

Wrap the HTML out­put in ei­ther <pre class="m-console"> for a block list­ing or <code class="m-console"> for in­line list­ing. The out­put might then look sim­i­lar­ly to this:

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

Code fig­ure

It of­ten hap­pens that you want to present code with cor­re­spond­ing re­sult to­geth­er. The code fig­ure looks sim­i­lar to im­age fig­ures and con­sists of a <figure class="m-code-figure"> el­e­ment con­tain­ing a <pre> block and what­ev­er else you want to put in as the re­sult. The <pre> el­e­ment has to be the very first child of the <figure> for the markup to work cor­rect­ly. Sim­i­lar to im­age fig­ure, you can ap­ply the .m-flat CSS class to re­move the bor­der.

Ex­am­ple (note that this page us­es code fig­ure for all code ex­am­ples, so it’s a bit of a fig­ure in­cep­tion shown here):

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

It’s al­so pos­si­ble to have match­ing bor­der for a con­sole out­put. Just use .m-console-figure in­stead of .m-code-figure on the <figure> el­e­ment.

Math

The latex2svg.py util­i­ty from tuxu/la­tex2svg can be used to gen­er­ate SVG rep­re­sen­ta­tion of your La­TeX math for­mu­las. As­sum­ing you have some La­TeX dis­tri­bu­tion and dvisvgm in­stalled, the us­age is sim­ple:

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

The formula.svg file will then con­tain the ren­dered for­mu­la, which with some mi­nor patch­ing (re­mov­ing the XML pre­am­ble etc.) can be past­ed di­rect­ly in­to your HTML code. The <svg> el­e­ment con­tain­ing math can be wrapped in <div class="m-math"> to make it cen­tered. Sim­i­lar­ly to code blocks, the math block shows a hor­i­zon­tal scroll­bar if the con­tent is too wide on nar­row screens. CSS col­or class­es can be ap­plied to the <div>. It’s a good prac­tice to in­clude <title> and <desc> el­e­ments for ac­ces­si­bil­i­ty rea­sons.

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

For in­line math, add the .m-math class to the <svg> tag di­rect­ly. Note that you’ll prob­a­bly need to man­u­al­ly spec­i­fy vertical-align style to make the for­mu­la align well with sur­round­ing text. You can use CSS col­or class­es here as well. When us­ing the latex2svg.py util­i­ty, wrap the for­mu­la in $ in­stead of $$ to pro­duce in­line math; the depth val­ue re­turned on stderr can be tak­en as a base for the vertical-align prop­er­ty.

<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.

There is a movement for replacing circle constant LaTeX Math 2 \pi with the LaTeX Math \tau character.

Pad­ding

Sim­i­lar­ly to ty­pog­ra­phy el­e­ments; blocks, notes, frames, ta­bles, im­ages, fig­ures, im­age grids, code and math blocks and code fig­ures have 1rem pad­ding af­ter, ex­cept when they are the last el­e­ment, to avoid ex­ces­sive spac­ing. The list spe­cial cas­ing ap­plies here as well.

Re­spon­sive util­i­ties

If you have some el­e­ment that will cer­tain­ly over­flow on small­er screen sizes (such as wide ta­ble or im­age that can’t be scaled), wrap it in a .m-scroll. This will put a hor­i­zon­tal scroll­bar un­der in case the el­e­ment over­flows.

There’s al­so .m-fullwidth that will make your el­e­ment al­ways oc­cu­py 100% of the par­ent el­e­ment width. Use­ful for ta­bles or im­ages.