Markup guide

Markup strategy

SFUMATO is primarily a scalable layout framework, but it also provides a browser reset and some base styles and helpers to get you started more quickly.

Although there are no mandates on how you code markup and stylesheets, there are some patterns that are core to SFUMATO, and to which you should adhere.

1. Use rem units any time you style a "size".

Do not use px units. Ever. Well, there are edge cases where pixels are OK. But  generally speaking, don't use them.

To make a site scalable, size measurements need to be based on the viewport width. Likewise, overrides to sizes need to use relative units, like rems or percentages. SFUMATO media query mixins handle much of this for you, and require less code.

It is recommended that you use rem units for everything. That way, scaling and freezing the size at an elastic width is already handled for you because the media breakpoint font sizes are already using vw units and freezing at an elastic breakpoint. By using rem units you adopt that behavior. And in many cases, you won't need to use explicit breakpoint values at all because rem units already change the scale at each breakpoint!

article#newslist {

    @include sf-padding-vertical(1.25rem);
    font-size: 1.1rem;

In the example above, the padding and font size are handled for all breakpoints, since rem units are relative to the base font sizes, which are defined with scalable vw units in the _config.scss file. So yeah, use rem units for everything except grid or table column widths, and other times where % units are preferable.

When to use px units

Edge cases do exist where pixel units are OK. For example, if you have a mobile hamburger menu and the lines for the menu are scalable, it's a good idea to set a minimum thickness for the lines using pixels to ensure it renders consistently since lines can get pretty thin and browsers may render them inconsistently.

2. Limit the use of CSS classes in your HTML markup.

Without class assignments, your markup will largely be contextual; much smaller, and much easier to re-style later. Think reusability. You can target items based on where they are, and what surrounds them. And if you adopt WAI-ARIA roles and other WAI patterns, your website will also be much more accessible to people with disabilities.

This is better...

<article id="newslist">
    <section role="grid">
        <div role="gridcell">

This is worse...

<article id="newslist" class="newspanel cta-feature use-borders">
    <section class="grid-wrapper grid-wrapper--full">
        <div class="grid one-whole lap-one-half desk-one-third wall-one-quarter">