Grid System

Build fully responsive, and adaptive grid layouts.

To create a responsive grid system you'll need a .container class and a .row-fluid class.
Here's how you'd set up a grid system with a four column col4 and an eight column col8 layout.

<div class="container">
    <div class="row-fluid">
      <div class="col4">
         ... 
      </div>
      <div class="col8">
         ... 
      </div>
    </div>
</div>

Up To 12 Columns

Schema uses a 12-column grid system. Here's an example of it in action.

.col12
.col1
.col11
.col2
.col10
.col3
.col9
.col4
.col8
.col5
.col7
.col6
.col6
.col3
.col3
.col3
.col3
.col4
.col4
.col4
.col2
.col1
.col9

Offset Grids

You can offset the grids, too.

Offset1
Offset2
Offset3
Offset4
<div class="container">
    <div class="row-fluid">
      <div class="col1 offset1">
         ... 
      <div/>
      <div class="col1 offset2">
         ... 
      </div>
    </div>
</div>

Nesting Grids

Schema uses a 12-column grid system. Here's an example of it in action.

col12

col6
col6
<div class="container">
    <div class="row-fluid">
      <div class="col12">
         <div class="col6"></div>
         <div class="col6"></div>
       </div>
    </div>
</div>

Columns By The Number

All widths are set in REM’s. We use the mixin function .rem(); to pass through the REM, and it spits out a pixel-equivalent fallback.

Column % Width Large Screens Desktop Tablet Mobile
.col12 100% 73.125rem 58.75rem 45.25rem 100%
.col11 91.43% 66.875rem 53.75rem 41.375rem 100%
.col10 82.87% 60.625rem 48.75rem 37.5rem 100%
.col9 74.30% 54.375rem 43.75rem 33.625rem 100%
.col8 65.74% 48.125rem 38.75rem 29.75rem 100%
.col7 57.18% 41.875rem 33.75rem 25.875rem 100%
.col6 48.61% 35.625rem 28.75rem 22.00rem 100%
.col5 40.05% 29.375rem 23.75rem 18.125rem 100%
.col4 31.49% 23.125rem 18.75rem 14.25rem 100%
.col3 22.92% 16.875rem 13.75rem 4.125rem 100%
.col2 14.36% 10.625rem 8.75rem 6.50rem 100%
.col1 5.80% 4.375rem 3.75rem 2.625rem 100%

One Block Of Code

No need to keep track of two separate stylesheets for your responsive grid system. You can edit your css for different breakpoints all in one place.

.rem is a function created to turn pixels into REM's. We explain how to use it in mixins.less.

.col12 {
  /* Laptop Screens */
  .rem(width, 940);
  }
  
  @media @bp-desktop {
    /* Large Desktop screens */ 
    .rem(width, 1170);
  } 
  
  @media @bp-tablet { 
    /* Tablet screens */
    .rem(width, 724);
  }
  
  @media @bp-mobile {
    /* Mobile screens */
    width: 100%;
  }
}