Right after being responsive, typography is the second most important thing in m.css and so the most often used HTML elements are styled to make them look great by default.
<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,
.m-poem to such paragraph to indent all lines the same way. To
remove the indentation and justification altogether, use
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
It’s possible to convert a list to a single line with items separated by
to save vertical space on mobile devices and responsively change it back on
larger screens. Mark such list with
Mark your definition list with
.m-diary to put the titles next to
The lists are compact by default, wrap item content in
<p> to make them
inflated. Paragraphs in list items are neither indented nor justified.
<h1> is meant to be a page heading, thus it is styled a bit
differently — it’s bigger and has
1rem padding after. The
<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.
Horizontal line is centered and fills 75% of the parent element. For a more
fancy transition, use
.m-transition on a paragraph.
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.
align text inside its parent element. See
Floating around in the grid system
for aligning and floating blocks in a similar way.
<hr> by default have
padding after, except when they are the last child, to avoid excessive spacing.
A special case is lists — components directly inside
1rem padding after, except when the
<li> is last, to
achieve consistent spacing for inflated lists.