CSS » Typography

Right after being responsive, typography is the second most important thing in m.css. The m-components.css file styles the most often used HTML elements to make them look great by default.

Paragraphs, quotes and poems

Each <p> element inside <main> has the first line indented, is justified and is separated from the following content by some padding. The <blockquote> elements are indented with a distinctive line on the left. Because the indentation may look distracting for manually wrapped line blocks, assign .m-poem to such paragraph to indent all lines the same way. To remove the indentation and justification altogether, use .m-noindent. Spacing between lines can be extended to 150% using .m-spacing-150.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit
posuere, consectetur magna congue, sagittis est. Pellentesque est neque,
aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus
interdum, ac placerat lacus consequat.</p>

<blockquote><p>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
Proin sagittis nisi leo, ac pellentesque purus bibendum sit
amet.</p></blockquote>

<p class="m-poem m-spacing-150">
Curabitur<br/>
sodales<br/>
arcu<br/>
elit</p>

<p class="m-noindent">Mauris id suscipit mauris, in scelerisque lectus. Aenean
nec nunc eu sem tincidunt imperdiet ut non elit. Integer nisi tellus,
ullamcorper vitae euismod quis, venenatis eu nulla.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat.

Ut dictum enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet.

Curabitur
sodales
arcu
elit

Mauris id suscipit mauris, in scelerisque lectus. Aenean nec nunc eu sem tincidunt imperdiet ut non elit. Integer nisi tellus, ullamcorper vitae euismod quis, venenatis eu nulla.

Lists, diaries

Ordered and unordered lists have padding on bottom only on the first level. Mark the list with .m-unstyled to remove the asterisks/numbers and indentation.

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>An item</li>
      <li>Another item</li>
    </ol>
  </li>
  <li>Item 3</li>
</ul>

<ol class="m-unstyled">
  <li>Item of an unstyled list</li>
  <li>Another item of an unstyled list</li>
</ol>

Item 1
Item 2
1. An item
2. Another item
Item 3

Item of an unstyled list
Another item of an unstyled list

It’s possible to convert a list to a single line with items separated by | or • to save vertical space on mobile devices and responsively change it back on larger screens. Mark such list with .m-block-bar-* or .m-block-dot-*:

<ul class="m-block-bar-m">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="m-block-dot-t">
  <li>Alice</li>
  <li>Bob</li>
  <li>Joe</li>
</ul>

Item 1
Item 2
Item 3

Alice
Bob
Joe

Mark your definition list with .m-diary to put the titles next to definitions.

<dl class="m-diary">
  <dt>07:30:15</dt>
  <dd>Woke up. The hangover is crazy today.</dd>
  <dt>13:47:45</dt>
  <dd>Got up from bed. Trying to find something to eat.</dd>
  <dt>23:34:13</dt>
  <dd>Finally put my pants on. Too late.</dd>
</dl>

07:30:15: Woke up. The hangover is crazy today.
13:47:45: Got up from bed. Trying to find something to eat.
23:34:13: Finally put my pants on. Too late.

The lists are compact by default, wrap item content in <p> to make them inflated. Paragraphs in list items are neither indented nor justified.

<ul>
  <li>
    <p>Item 1, first paragraph.</p>
    <p>Item 1, second paragraph.</p>
  </li>
  <li>
    <p>Item 2</p>
    <ol>
      <li><p>An item</p></li>
      <li><p>Another item</p></li>
    </ol>
  </li>
  <li><p>Item 3</p></li>
</ul>

Item 1, first paragraph.

Item 1, second paragraph.
Item 2
1. An item
2. Another item
Item 3

Headings

The <h1> is meant to be a page heading, thus it is styled a bit differently — it’s bigger and has 1rem padding after. The <h2> to <h6> are smaller and have just 0.5rem padding after, to be closer to the content that follows. Wrapping part of the heading in a .m-thin will make it appear thinner, depending on used CSS theme.

<h1>Heading 1 <span class="m-thin">with subtitle</span></h1>
<h2>Heading 2 <span class="m-thin">with subtitle</span></h2>
<h3>Heading 3 <span class="m-thin">with subtitle</span></h3>
<h4>Heading 4 <span class="m-thin">with subtitle</span></h4>
<h5>Heading 5 <span class="m-thin">with subtitle</span></h5>
<h6>Heading 6 <span class="m-thin">with subtitle</span></h6>

Heading 1 with subtitle

Heading 2 with subtitle

Heading 3 with subtitle

Heading 4 with subtitle

Heading 5 with subtitle

Heading 6 with subtitle

Headings are styled in a slightly different way for page sections and article headers, clicks the links for more information. There is also a possibility to put breadcrumb navigation in the <h1> element.

Transitions

Horizontal line is centered and fills 75% of the parent element. For a more fancy transition, use .m-transition on a paragraph.

...
<hr/>
...
<p class="m-transition">~ ~ ~</p>
...

Vivamus dui quam, volutpat eu lorem sit amet, molestie tristique erat. Vestibulum dapibus est eu risus pellentesque volutpat.

Aenean tellus turpis, suscipit quis iaculis ut, suscipit nec magna. Vestibulum finibus sit amet neque nec volutpat. Suspendisse sit amet nisl in orci posuere mattis.

~ ~ ~

Praesent eu metus sed felis faucibus placerat ut eu quam. Aliquam convallis accumsan ante sit amet iaculis. Phasellus rhoncus hendrerit leo vitae lacinia. Maecenas iaculis dui ex, eu interdum lacus ornare sit amet.

Transitions can be conveniently created with a .. transition:: directive in your reST markup using the Pelican Components plugin.

Preformatted blocks

The <pre> element preserves your whitespace and adds a convenient scrollbar if the content is too wide. If inside an inflatable nested grid, it will have negative margin to make its contents aligned with surrounding text.

<pre>
int main() {
    return 0;
}
</pre>

int main() {
    return 0;
}

Footnotes and footnote references

Applying .m-footnote to a link will turn it into a footnote reference — a superscript, wrapped in brackets. For the actual footnotes use <dl class="m-footnote">; <dt> contains footnote ID and <dd> the footnote text. You can add a <span class="m-footnote"> inside the <dd> to provide styled back-references to the original text.

<p>
  As also noted in the court case of <em>Mondays vs The Working People</em>
  <a href="#ref1" class="m-footnote" id="ref1-backref">1</a>, the transition
  between the weekend and a working day has a similar impact on overall
  happines as a transition between holidays and working days, however not as
  significant <a href="#ref2" class="m-footnote" id="ref2-backref">2</a>.
  This is a common theme of small talk conversations, together with
  weather <a href="#ref1" class="m-footnote" id="ref1-backref2">1</a>
  <a href="#ref3" class="m-footnote" id="ref3-backref">3</a>.
</p>
<dl class="m-footnote">
  <dt id="ref1">1.</dt>
  <dd>
    <span class="m-footnote">^ <a href="#ref1-backref">a</a>
    <a href="#ref1-backref2">b</a></span> Mondays vs The Working People,
    The Arizona Highest Court, 2019
  </dd>
  <dt id="ref2">2.</dt>
  <dd>
    <span class="m-footnote"><a href="#ref2-backref">^</a></span>
    <a href="https://garfield.com/comic/2014/05/26">Garfield; Monday,
    May 26, 2014</a>
  </dd>
  <dt id="ref3">3.</dt>
  <dd>
    <span class="m-footnote"><a href="#ref3-backref">^</a></span> From a
    conversation overheard this very morning.
  </dd>
</dl>

As also noted in the court case of Mondays vs The Working People 1, the transition between the weekend and a working day has a similar impact on overall happines as a transition between holidays and working days, however not as significant 2. This is a common theme of small talk conversations, together with weather 1 3.

1.: ^ a b Mondays vs The Working People, The Arizona Highest Court, 2019
2.: ^ Garfield; Monday, May 26, 2014
3.: ^ From a conversation overheard this very morning.

Text alignment and wrapping

Use .m-text-left, .m-text-right or .m-text-center to align text inside its parent element. Use .m-text-top, .m-text-middle and .m-text-bottom to align text vertically for example in a table cell. See Floating around in the grid system for aligning and floating blocks in a similar way.

By default, all text is wrapped according to default HTML rules. In order to look better on very narrow screens, it’s possible to use  to hyphenate words. The <wbr/> HTML tag does the same without rendering any hyphens, and finally there’s a .m-link-wrap you can apply to links with long URLs to break anywhere. Both hyphenation and link wrapping can be done either manually on a case-by-case basis, or using the m.htmlsanity plugin, which can do both automatically.

in&shy;com&shy;pre&shy;hen&shy;si&shy;bil&shy;i&shy;ties

in<wbr/>com<wbr/>pre<wbr/>hen<wbr/>si<wbr/>bil<wbr/>i<wbr/>ties

<a href="http://…" class="m-link-wrap">
  llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk
</a>

incomprehensibilities

llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk

Inline elements

A <a href="#">link</a>, <em>emphasised text</em>, <strong>strong text</strong>,
<abbr title="abbreviation">abbr</abbr> shown inside a normal text flow to
verify that they don't break text flow. Then there is <small>small text</small>,
<sup>super</sup>, <sub>sub</sub> and <s>that is probably all I can think of
right now</s> oh, there is also <mark>marked text</mark> and
<code>int a = some_code();</code>.

A link, emphasised text, strong text, abbr shown inside a normal text flow to verify that they don't break text flow. Then there is small text, ^super, _sub and ~~that is probably all I can think of right now~~ oh, there is also marked text and int a = some_code();.

Links are underlined by default in all builtin themes. Adding .m-flat to the <a> element will remove the underline, useful where underlines would be too distracting:

<p class="m-text-center m-text m-dim">
  There is a <a href="#" class="m-flat">hidden</a> link.
</p>

There is a hidden link.

For cases where you can’t use the native HTML tags for emphasis, strong text, strikethrough and subscript/superscript, the equivalent is available through .m-em, .m-strong, .m-s, .m-sup and .m-sub CSS classes used together with .m-text.

Padding

Block elements <p>, <ol>, <ul>, <dl>, <blockqote>, <pre> and <hr> by default have 1rem padding on the bottom, except when they are the last child, to avoid excessive spacing. A special case is lists — components directly inside <li> elements have 1rem padding on the bottom, except when the <li> is last, to achieve consistent spacing for inflated lists.

The 1rem padding on the bottom can be disabled with .m-nopadb, similarly as with grid layouts. On the other hand, if you want to preserve it, add an empty <div></div> element after.