SFUMATO SCSS

Flexbox grid

A better grid

The SFUMATO flexbox grid provides the most commonly used features from standard responsive grid systems, without floats and with the benefits of the flexbox model, like equal height columns. Until CSS4 grid features are widely supported, flexbox is the next best option.


Usage

It is recommended that developers adopt WAI-ARIA roles to denote grid and grid cells, as below:

<section role="grid">
    <div role="gridcell">
    </div>
    <div role="gridcell">
        ...

Defining the grid styles is done very much like standard responsive grid systems, but using simple, single mixins, as below:

// Grid container
[role="grid"] {

// Mobile is already full-width so no breakpoint
// Tablet portrait breakpoint grid @include sf-flexbox-grid( $from: tablet-portrait, $use-gutter: true, $gutter-width: 4rem ); // Elastic breakpoint not needed if using rem units; // Calculated from your _config.scss settings > [role="gridcell"] { // Tablet and up column width // (mobile defaults to 100% if not specified) @include sf-set-width( $from: tablet-portrait, $percentage: 50 ); ...

The grid container mixin accepts the following parameters:

@mixin sf-flexbox-grid(

    // breakpoint starting dimension
    // (e.g. tablet-portrait)
    $from,

    // breakpoint when this grid style ends
    // (e.g. tablet-portrait)
    $upto,

    // column or (default) row
    $grid-direction,

    // should cells wrap to a new row (default: true)
    $use-wrap,

    // reverse the appearance of cells (default: false)
    $use-reverse,

    // cells in a row are equal heights
    // based on tallest cell (default: false)
    $use-equal-heights,

    // use a gutter (default: false)
    $use-gutter,

    // gutter size in vw units (default: 2);
    // will override $gutter-width.
    $gutter-width-vw,

    // gutter size in vw or rem units (default: 0rem);
    // $gutter-width-vw overrides this value.
    $gutter-width,

    // no gutter on the left and right (default: false)
    $no-side-gutter,

    // no gutter on the bottom of cells (default: false)
    $no-bottom-gutter,

    // flexbox justify-content override value; e.g. center
    $justify-content:false,

    // flexbox align-items override value; e.g. center
    $align-items:false,

    // shortcut for a grid with equal heights and vertically centered content
    $centered-grid:false,

    // last child no gutter for single columns (default: false)
    $last-child-no-bottom-gutter,
);

Grid container cells can be sized with the following mixin:

@mixin sf-set-width(

    // breakpoint starting dimension
    // (e.g. tablet-portrait)
    $from,

    // breakpoint when this grid style ends
    // (e.g. tablet-portrait)
    $upto,

    // percentage width; do not use with $fraction
    // (e.g. 35)
    $percentage,

    // fraction based on a 12 point grid; do not use with $percentage
    // (e.g. one-half, three-quarters)
    $fraction
);

Example: Vertically Centered Grid

To create a simple grid with a row of items with vertically centered content, start with markup like this:

<div role="grid">
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/one.jpg" /></a>
        </section>
    </div>
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/two.jpg" /></a>
        </section>
    </div>
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/three.jpg" /></a>
        </section>
    </div>
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/four.jpg" /></a>
        </section>
    </div>
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/five.jpg" /></a>
        </section>
    </div>
    <div role="gridcell">
        <section>
            <a href="#"><img src="/images/six.jpg" /></a>
        </section>
    </div>
</div>

Then use SCSS like this for a mobile view of 2 columns with 3 logos each, or for a tablet or larger view with 1 row of 6 logos. In both cases the logo cells will be of equal heights (matching the largest one) and will be vertically centered:

div[role="grid"] {

    @include sf-flexbox-grid (
        $use-equal-heights: true,
        $use-gutter: true,
        $gutter-width: 1rem
    );

    & > div[role="gridcell"] {

        @include sf-set-width (
            $fraction: one-fifth
        );

        @include sf-padding-horizontal(0.5rem);
        @include sf-padding-vertical(0.5rem);

        & > section {

            display: flex;
            align-items: center;
            @include sf-padding-vertical(1.5rem);
            @include sf-padding-horizontal(1.5rem);

            overflow: hidden;
            background-color: white;
            border-radius: 0.5rem;

            a {
                display: block;
                width: 100%;
                text-align: center;
            }
        }
    }
}

This can yield a result like you see below, where images of varying heights are vertically centered: