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.
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.
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 .m-block-bar-*:
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.
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.
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.
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.
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.