Grid system

Pack name: seed-grid

Grid system pack for Seed

Contents

Install

npm install seed-grid --save

Dependencies


About

Seed’s grid system is a modified abstraction Bootstrap’s (v4) grid.

The grid class names have been modified to match Seed’s CSS naming conventions:

  • .container was renamed to .o-container
  • .row was renamed to .o-row
  • .col was heavily modified.

    Learn more about Bootstraps’ grid system.


Columns

The column implementation of Seed is based on Bootstrap. However, the naming convention was heavily modified.

Sizes

The grid system uses a base of 12 (columns).

Class Width (%)
.o-col-1 8.3333%
.o-col-2 16.6667%
.o-col-3 25.0%
.o-col-4 33.3333%
.o-col-5 41.6667%
.o-col-6 50.0%
.o-col-7 58.3333%
.o-col-8 66.6667%
.o-col-9 75.0%
.o-col-10 83.3333%
.o-col-11 91.6667%
.o-col-12 100.0%

Default classes

Breakpoint Example The column's width will be set…
None .o-col-4 Always.
@sm .o-col-4@sm when the viewport is larger than 544px.
@md .o-col-4@md when the viewport is larger than 768px.
@lg .o-col-4@lg when the viewport is larger than 992px.

Offset classes

Breakpoint Example The column's width will be set…
None .o-col-offset-4 Always.
@sm .o-col-offset-4@sm when the viewport is larger than 544px.
@md .o-col-offset-4@md when the viewport is larger than 768px.
@lg .o-col-offset-4@lg when the viewport is larger than 992px.

Example

.o-col-2@md
.o-col-2@md
.o-col-2@md
.o-col-2@md
.o-col-2@md
.o-col-2@md
.o-col-8@md
.o-col-4@md
.o-col-4@md
.o-col-4@md
.o-col-4@md
.o-col-6@md
.o-col-6@md
<div class="o-container">
  <div class="o-row">
    <div class="o-col-2@md">.o-col-2@md</div>
    <div class="o-col-2@md">.o-col-2@md</div>
    <div class="o-col-2@md">.o-col-2@md</div>
    <div class="o-col-2@md">.o-col-2@md</div>
    <div class="o-col-2@md">.o-col-2@md</div>
    <div class="o-col-2@md">.o-col-2@md</div>
  </div>
  <div class="o-row">
    <div class="o-col-8@md">.o-col-8@md</div>
    <div class="o-col-4@md">.o-col-4@md</div>
  </div>
  <div class="o-row">
    <div class="o-col-4@md">.o-col-4@md</div>
    <div class="o-col-4@md">.o-col-4@md</div>
    <div class="o-col-4@md">.o-col-4@md</div>
  </div>
  <div class="o-row">
    <div class="o-col-6@md">.o-col-6@md</div>
    <div class="o-col-6@md">.o-col-6@md</div>
  </div>
</div>

Offsetting columns

.o-col-4@md
.o-col-4@md .o-col-offset-4@md
.o-col-3@md .o-col-offset-3@md
.o-col-3@md .o-col-offset-3@md
.o-col-6@md .o-col-offset-3@md
<div class="o-row">
  <div class="o-col-4@md">.o-col-4@md</div>
  <div class="o-col-4@md o-col-offset-4@md">.o-col-4@md .o-col-offset-4@md</div>
</div>
<div class="o-row">
  <div class="o-col-3@md o-col-offset-3@md">.o-col-3@md .o-col-offset-3@md</div>
  <div class="o-col-3@md o-col-offset-3@md">.o-col-3@md .o-col-offset-3@md</div>
</div>
<div class="o-row">
  <div class="o-col-6@md o-col-offset-3@md">.o-col-6@md .o-col-offset-3@md</div>
</div>

Nesting Columns

Level 1: .o-col-9@sm
Level 2: .o-col-8 .o-col-6@sm
Level 2: .o-col-4 .o-col-6@sm
<div class="o-row">
  <div class="o-col-9@sm">
    Level 1: .o-col-9@sm
    <div class="o-row">
      <div class="o-col-8 o-col-6@sm">
        Level 2: .o-col-8 .o-col-6@sm
      </div>
      <div class="o-col-4 o-col-6@sm">
        Level 2: .o-col-4 .o-col-6@sm
      </div>
    </div>
  </div>
</div>

Mobile and desktop

.o-col-12 .o-col-8@md
.o-col-6 .o-col-4@md
.o-col-6 .o-col-4@md
.o-col-6 .o-col-4@md
.o-col-6 .o-col-4@md
.o-col-6
.o-col-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="o-row">
  <div class="o-col-12 o-col-8@md">.o-col-12 .o-col-8@md</div>
  <div class="o-col-6 o-col-4@md">.o-col-6 .o-col-4@md</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="o-row">
  <div class="o-col-6 o-col-4@md">.o-col-6 .o-col-4@md</div>
  <div class="o-col-6 o-col-4@md">.o-col-6 .o-col-4@md</div>
  <div class="o-col-6 o-col-4@md">.o-col-6 .o-col-4@md</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="o-row">
  <div class="o-col-6">.o-col-6</div>
  <div class="o-col-6">.o-col-6</div>
</div>