Overview

stylific is very flexbox-centric. It uses flexbox for built-in components and provides a bunch of classes that serve as shortcuts to useful combinations of flex properties.

In case you're unfamiliar with flexbox, read this wonderful introduction on CSS Tricks. In short, a flex container is similar to a block, but has extremely rich control over its inner layout. A flex item, or flex child (its immediate descendant) has rich control over its dimensions inside the flex parent.

stylific has three groups of layout classes: for containers, children, and grids. They're defined in layout.scss.

Container

Container classes define flex container properties. Here's an example:

<div class="row-between-center" style="height: 8em">
  <div>I'm centered on the left!</div>
  <div>I'm centered on the right!</div>
</div>

There are 40 container classes:

They're formed from combinations of three properties:

<direction>-<main>-<cross>

• direction — direction of flex container (row or column)
• main — child alignment on main axis (⇄ in a row container, ⇅ in a column container)
• cross — child alignment on cross axis (⇅ in a row container, ⇄ in a column container)

Rundown of the corresponding flex rules:

// Direction
.row-*-*     {display: flex; flex-direction: row;}
.col-*-*     {display: flex; flex-direction: column;}

// Child alignment on main axis
.*-start-*   {justify-content: flex-start;}
.*-center-*  {justify-content: center;}
.*-end-*     {justify-content: flex-end;}
.*-between-* {justify-content: space-between;}
.*-around-*  {justify-content: space-around;}

// Child alignment on cross axis
.*-*-start   {align-items: flex-start;}
.*-*-center  {align-items: center;}
.*-*-end     {align-items: flex-end;}
.*-*-stretch {align-items: stretch;}

Examples

To control flow direction, use the <direction>-*-* property. It can be row or column:

<div class="row-between-start">
  <div>first in row</div>
  <div>second in row</div>
  <div>third in row</div>
</div>

<div class="col-start-start">
  <div>first in col</div>
  <div>second in col</div>
  <div>third in col</div>
</div>

To control child alignment on the main axis, use the *-<main>-* property. Here it's between, which causes the children to be spaced out:

<div class="row-between-center">
  <div>left</div>
  <div>center</div>
  <div>right</div>
</div>

To control child alignment on the cross axis, use the *-*-<cross> property. Here it's set to different values on different containers:

<div class="row-center-start" style="min-height: 6em">
  <div>top</div>
</div>
<div class="row-center-center" style="min-height: 6em">
  <div>center</div>
</div>
<div class="row-center-end" style="min-height: 6em">
  <div>bottom</div>
</div>

Media-aware containers

Each class has several media-aware versions:

.*-*-*     // all displays (no @media)
.sm-*-*-*  // small displays only
.md-*-*-*  // medium displays and up
.lg-*-*-*  // large displays and up

Example:

<div class="col-center-stretch md-row-center-stretch lg-row-between-stretch">
  <div>first</div>
  <div>second</div>
  <div>third</div>
</div>

Resize the screen to see the children rearranged.

Child

Child properties are defined with the .flex-*, .self-* and .order-* classes.

To control child stretchiness across the main axis, use .flex-N, where N ranges from 1 to 12. In flexbox terms, this corresponds to {flex: N}. You can also use flex-none to make the element rigid.

<div class="row-between-center space-out-h">
   <div class="flex-1">small</div>
   <div class="flex-6">huge</div>
   <div class="flex-1">small</div>
</div>

To control child order, use .order-N, where N ranges from -1 to 12. In flexbox terms, this corresponds to {order: N}.

<div class="row-around-center">
  <div class="order-2">third (order: 2)</div>
  <div class="order-1">second (order: 1)</div>
  <div class="order--1">first (order: -1)</div>
</div>

To control child self-alignment, use one of the .self-* flags. In flexbox terms, this corresponds to {align-self: <align>}.

<div class="row-between-center" style="min-height: 6em">
  <div class="self-stretch">stretch</div>
  <div class="self-start">top</div>
  <div class="self-center">center</div>
  <div class="self-end">bottom</div>
</div>

Media-aware children

Each class has several media-aware versions:

.flex-*   // all displays (no @media)
.self-*   // all displays (no @media)
.order-N  // all displays (no @media)

.sm-*-*   // small displays only
.md-*-*   // medium displays and up
.lg-*-*   // large displays and up

Grid

It's convenient to have a shortcut to a media-responsive flex container that wraps its items on different breakpoints. .grid-* is a primitive version of that. Open this on a separate page to resize the page more easily.

<div class="grid-2 md-grid-4 lg-grid-6">
  <div>One</div>
  <div>...</div>
  <div>Twenty</div>
</div>

Each version of the class takes a numeric option N which specifies the number of children per line:

.grid-1
.grid-2
.grid-3
.grid-4
.grid-5
.grid-6

Use these classes together with media prefixes (see below) to tune the breakpoints for your specific needs:

<div class="grid-1 md-grid-2 lg-grid-3">
  <div>One</div>
  <div>...</div>
  <div>Twenty</div>
</div>

Media-aware grids

Each class has several media-aware versions:

.grid-N     // all displays (no @media)
.sm-grid-N  // small displays only
.md-grid-N  // medium displays and up
.lg-grid-N  // large displays and up

Whitespace

stylific defines sensible whitespace defaults and a few helper classes. Together, they should save you from writing case-by-case whitespace rules most of the time.

Defaults

First of all, stylific resets all margins and padding to 0 for all elements. Whitespace is added back in a selective fashion, using:

1. Container padding.
2. Margins between container's children.

Typographically meaningful content like headers and paragraphs needs whitespace all around it. It's achieved by combining container padding with margins between children. By default, this styling is applied to sf-article and some other stylific components. This combination of properties is also available as the .container class (see below).

Classes

These global helper classes are useful for manual whitespace adjustment.

.pad          // default padding ($sf-space == 1rem)
.nopad        // no padding
.space-out    // vertical interval between children
.space-out-h  // horizontal interval between children
.container    // combination of .pad and .space-out

Also see the whitespace-related variables and mixins.