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

.col3

.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

<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%;
  }
}