Page layout
With m-layout.css, m.css provides a full-fledged whole page layout, including top navigation bar, footer navigation, article styling, active section highlighting and more.
Basic markup structure
A barebones HTML markup structure using m.css looks like below. There is the
usual preamble, with <html lang="en"> and a <meta> tag
specifying the file encoding, which should be the first thing in <head>.
Some browsers assume UTF-8 by default (as per the
HTML5 standard), but some
not, so it’s better to always include it. In the <head>
element it’s important to also specify that the site is responsive via the
<meta name="viewport"> tag.
The <body> element is divided into three parts — top navigation bar,
main page content and the footer navigation, explained below. Their meaning is
implicit, so it’s not needed to put any CSS classes on these elements, but you
have to stick to the shown structure.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Page title</title> <link rel="stylesheet" href="m-dark.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <header><nav> <!-- here comes the top navbar --> </nav></header> <main> <!-- here comes the main page content --> </main> <footer><nav> <!-- here comes the footer navigation --> </nav></footer> </body> </html>
Theme color
Some browsers (such as Vivaldi or Chrome on Android) are able to color the
tab based on page theme color. This can be specified using the following
<meta> tag. The color shown matches the default (dark) style, see the
CSS themes page for colors matching other
themes.
<meta name="theme-color" content="#22272e" />
Main content
The <main> content is separated from the header and footer by
1rem padding, besides that there is no additional implicit styling. It’s
recommended to make use of m.css grid features for
content layout — in particular, the <main> element by itself doesn’t
even put any width restriction on the content.
To follow HTML5 semantic features, m.css expects you to put your main page
content into an <article> element, be it an article or not. Heading is
always in an <h1> inside the article element, sub-sections are wrapped
in nested <section> elements with <h2> and further. Example
markup together with 10-column grid setup around the main content:
<main><div class="m-container"> <div class="m-row"> <article class="m-col-m-10 m-push-m-1"> <h1>A page</h1> <p>Some introductory paragraph.</p> <section> <h2>Features</h2> <p>Section providing feature overview.</p> </section> <section> <h2>Pricing</h2> <p>Information about product pricing.</p> </section> </article> </div> </div></main>
Landing pages
Besides usual pages, which have the <article> element filled with
<h1> followed by a wall of content, m.css has first-class support for
landing pages. The major component of a landing page is a cover image in the
background, spanning the whole page width in a #m-landing-image element.
The image is covered by #m-landing-cover element that blends the image
into the background on the bottom. On top of it you have full freedom to put
any layout you need, for example a logo, a short introductory paragraph and
a download button. Note that the grid setup has to only wrap the content “below
the fold”, not the cover image.
<main><article> <div id="m-landing-image" style="background-image: url('landing.jpg');"> <div id="m-landing-cover"> <div class="m-container"> <!-- content displayed over the cover image --> </div> </div> </div> <div class="m-container"> <!-- content "below the fold" follows --> </div> </article></main>
The cover image always spans the whole screen width and goes also under the top
navbar. In order to make the navbar aware of the image, put a .m-navbar-landing
CSS class on the <nav> element — this makes navbar dimmer with
transparent background. Usually the brand link on the left is superfluous as
the landing page repeats it in a more prominent place, to hide it put a
.m-navbar-brand-hidden on the #m-navbar-brand element. While the
landing page is designed to catch attention of new users, it shouldn’t prevent
regular visitors from navigating the website — because of that the top navbar
is not hidden completely and hovering it will make it more visible. This works
similarly with the hamburger menu on small screen sizes.
Pages with cover image
If you just want slide a cover image under content of your page and don’t need
to have control over what content is over the image and what under, simply put
the following markup in front of your page content — an outer
#m-cover-image element with background image and an inner empty
<div> that takes care of the fade out gradient over it.
<main> <div id="m-cover-image" style="background-image: url('cover.jpg');"> <div></div> </div> <article> <div class="m-container"> <!-- the whole content of your page goes here --> </div> </article> </main>
Clickable sections
Using the <section> elements gives you one advantage — it gives you
the foundation that makes linking to particular article sections possible.
Consider the following code snippet:
<article> <h1>A page</h1> <p>Some introductory paragraph.</p> <section id="features"> <h2><a href="#features">Features</a></h2> <p>Section providing feature overview.</p> </section> <section id="pricing"> <h2><a href="#pricing">Pricing</a></h2> <p>Information about product pricing.</p> </section> </article>
Clicking on either the “Features” or “Pricing” heading will give the user a direct link to given section and the section will be highlighted accordingly. This works for nested sections as well.
Articles
For blog-like articles, m.css provides styling for article header, summary and
footer — just put <header> and <footer> elements directly
into the surrounding <article> tag. Article header is rendered in a
bigger and brighter font, while footer is rendered in a smaller and dimmer
font. Example markup and corresponding rendering:
<article> <header> <h1><a href="#" rel="bookmark" title="Permalink to An article"> <time class="m-date" datetime="2017-09-08T00:00:00+02:00"> Sep <span class="m-date-day">8</span> 2017 </time> An article </a></h1> <p>Article summary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est.</p> </header> <p>Article contents. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. 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> <footer> <p>Posted by <a href="#">The Author</a> on <time datetime="2017-09-08T00:00:00+02:00">Sep 8 2017</time>.</p> </footer> </article>
An article
Article summary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est.
Article contents. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. 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.
There’s a dedicated styling for article date in the time.m-date element
to go into <h1> of article <header>. For semantic purposes and
SEO it’s good to include the date/time in a machine-readable format as well.
You can get this formatting via date -Iseconds Unix command. The same is
then repeated in article <footer>.
It’s good to include the <a rel="bookmark"> attribute in the permalink
to hint search engines about purpose of the link and then give the same via the
title attribute.
Jumbo articles
For “jumbo” articles with a big cover image, a different layout is available.
Example markup, corresponding in content to the above article, but with a cover
image in background, is shown below. The markup is meant to be straight in
<main> as it arranges the content by itself in the center 10 columns.
Date and author name is rendered on top left and right in front of the cover
image, the heading (and optional subheading) as well. By default, the text on
top of the cover image is rendered white, add an additional .m-inverted
CSS class to have it black. The article contents are marked with
.m-container-inflatable to make
inflated nested layouts
such as image grid possible.
<article id="m-jumbo"> <header> <div id="m-jumbo-image" style="background-image: url('ship.jpg');"> <div id="m-jumbo-cover"> <div class="m-container"> <div class="m-row"> <div class="m-col-t-6 m-col-s-5 m-push-s-1 m-text-left">Sep 8 2017</div> <div class="m-col-t-6 m-col-s-5 m-push-s-1 m-text-right"><a href="#">An Author</a></div> </div> <div class="m-row"> <div class="m-col-t-12 m-col-s-10 m-push-s-1 m-col-m-8 m-push-m-2"> <h1><a href="#" rel="bookmark" title="Permalink to An Article — a jumbo one"> An article </a></h1> <h2>a jumbo one</h2> </div> </div> </div> </div> </div> <div class="m-container"> <div class="m-row"> <div class="m-col-m-10 m-push-m-1 m-nopady"> <p>Article summary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est.</p> </div> </div> </div> </header> <div class="m-container m-container-inflatable"> <div class="m-row"> <div class="m-col-m-10 m-push-m-1 m-nopady"> Article contents. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. 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. </div> </div> </div> <footer class="m-container"> <div class="m-row"> <div class="m-col-m-10 m-push-m-1 m-nopadb"> <p>Posted by <a href="#">An Author</a> on <time datetime="2017-09-08T00:00:00+02:00">Sep 8 2017</time>.</p> </div> </div> </footer> </article>
Similarly to landing pages, the cover image of the jumbo
article always spans the whole screen width and goes below the top navbar. If
you want the navbar to be semi-transparent, put .m-navbar-cover on the
<nav> element. Compared to landing pages the navbar
retains semi-transparent background at all times.
News list on index page
Sometimes you may want just a small list of news items tucked to the bottom of
an index page that’s otherwise full of other content. Mark a block with
.m-landing-news and put a list of articles in it. The <h3> can
be used to link to the blog front page; if you use the <time> tag for
specifying article dates, it will be aligned to the right. Example:
<div class="m-row"> <div class="m-col-m-8 m-push-m-2"> <div class="m-landing-news m-note m-default"> <h3><a href="#">Latest news on our blog »</a></h3> <ul class="m-unstyled"> <li><time class="m-text m-dim" datetime="2018-01-16T00:00:00+00:00">Jan 16, 2018</time><a href="article2.html">The latest article</a></li> <li><time class="m-text m-dim" datetime="2017-12-09T00:00:00+00:00">Dec 09, 2017</time><a href="article.html">A slightly older article</a></li> </ul> </div> </div> </div> </div>