Layout

Flexible grid

SeMI’s overall grid is a 12-column grid with a nested 12-column subgrid for the main content area. The grid’s gutter is set at 1em.

Content area (container and wrapper)

The content area is defined by a container and a wrapper. A container has two gutters on each side of the section. The center part is the wrapper. This part is centered in the page and has a max width to optimize legibility of the content inside it.

Responsive breakpoints

Five breakpoints are defined for the responsive layout shift. These are not defined towards specific current devices, but rather come in effect when the layout threatens to break for a particular breakpoint.

  1. 34em & below
  2. 42em – 48em
  3. 48em – 56em
  4. 56em – 80em
  5. 80em & above

Negative space

Negative, or white, space is used to provide way-finding throughout the SeMI site and its content.

Modular scaling

Vertical rhythm is established by a modular scale. A modular scale defines meaningful ratios of related proportions between page elements in order to create a unified visual rhythm and consistency. The $scale-base variable is the base scale measurement. The modular scale is derived from the variable $scale-interval. This can provide an infinite number of measurements that adhere to a consistent rhythm. Editing the base variable measurement results in a proportional change throughout all variables.

The modular scale is used for dimensions (margins, padding, width, height, etc.), typographic scale, etc. The same rhythm is also used for animation speed, opacity levels, and such.

Layout single column

This layout column will automatically inherit the width of the inner child.

HTML code snippet

<div class="layout layout--single">
    <div class="layout__column">
        <!-- this part is purely for the example -->
        <div class="style-sm-ui-layout__fill-column">
            <p>This layout column will automatically inherit the width of the inner child.</p>
        </div>
    </div>
</div>

Layout Double column

Column one

This layout column will automatically inherit the width of the inner child.

Column two

This layout column will automatically inherit the width of the inner child.

HTML code snippet

<div class="layout layout--double">
    <div class="layout__column">
        <!-- this part is purely for the example -->
        <div class="style-sm-ui-layout__fill-column">
            <p>Column one</p>
            <p>This layout column will automatically inherit the width of the inner child.</p>
        </div>
    </div>
    <div class="layout__column">
        <!-- this part is purely for the example -->
        <div class="style-sm-ui-layout__fill-column">
            <p>Column two</p>
            <p>This layout column will automatically inherit the width of the inner child.</p>
        </div>
    </div>
</div>

Layout Double column reversed

Column one

This layout column will automatically inherit the width of the inner child.

Column two

This layout column will automatically inherit the width of the inner child.

HTML code snippet

<div class="layout layout--double layout--double-reverse">
    <div class="layout__column">
        <!-- this part is purely for the example -->
        <div class="style-sm-ui-layout__fill-column">
            <p>Column one</p>
            <p>This layout column will automatically inherit the width of the inner child.</p>
        </div>
    </div>
    <div class="layout__column">
        <!-- this part is purely for the example -->
        <div class="style-sm-ui-layout__fill-column">
            <p>Column two</p>
            <p>This layout column will automatically inherit the width of the inner child.</p>
        </div>
    </div>
</div>

Layout examples

The layout can be combined with background patterns in several ways. For these examples the background patterns have been used.

Layout examples with background pattern

A secondary standout section is recognized by the white background and decorative background-image.

Example of secondary standout section with a single column:

Standout section single column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Example of secondary standout section with double columns:

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

alternative text for image

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

alternative text for image

Tertiary standout section

The tertiary standout section uses a dark background with a lighter text on top.

Example of tertiary standout section with a single column:

Standout section single column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Example of tertiary standout section with double columns:

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

alternative text for image

Standout section double column title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien malesuada, laoreet quam ac, aliquam turpis. Nam fermentum lacinia dolor a dictum. Suspendisse vel magna tellus.

alternative text for image