Grid

Furatto comes with fully responsive fluid system which scales up to 12 columns. It is generated using predefined classes for more semantic layouts, as well as mixins. Below 767px viewports, the columns become fluid and stack vertically.

A 12 column grid.

The twelve columns are distributed with a equitable width and margin, for example a .col-1 width is close to 8.30%, a .col-2 is close to 16.60% and well you get the idea.This way it is very easy to build, let's say a dashboard or the two column layout you are right now. It is important to put the columns on a row div class element.

        
 <div class="row">
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
   <div class="col-1">col-1</div>
 </div>
 <div class="row">
   <div class="col-2">col-2</div>
   <div class="col-4">col-4</div>
   <div class="col-1">col-1</div>
   <div class="col-3">col-3</div>
   <div class="col-2">col-2</div>
 </div>

        

Building the markup

For a simple three column layout just add the row class name and add the correct number of col-* columns. The col-* class name for the columns comes from the 1 to the 12 as is a 12 column grid. This are te default values, you can customize it to support as many columns as you want, keep reading...

              
 <div class="row">
   <div class="col-4">...</div>
   <div class="col-4">...</div>
   <div class="col-4">...</div>
 </div>
              
  

Nesting columns

When comes to nesting, Furatto helps you add multiple column div elements. You just have to add a row class into an existing col-* column. The nested rows should also match 12 columns, or in case you define more, the nested rows should match that number.

            
  <div class="row">
    <div class="col-9">
      <p>I'm a col-9 class column</p>
      <div class="row">
        <div class="col-6">
          I'm a col-6 column 
        </div>
        <div class="col-6">
          I'm a col-6 column 
        </div>
      </div>
    </div>
    <div class="col-3">
      <p>I'm a col-3 class column</p>
    </div>
  </div>
           
  

Offset on columns

Probably you will want to add some offset the columns of the grid, to put it more to the right, don't worry we have you covered.

Let us explain this thing works. In a case where want blank space between columns, the fair solution was to add some blank columns actually, that is not necessary with the offsets though. Offset will add a margin to the left according to the 12 column grid Furatto offers.

            
<div class="nested-grid-demo text-center">
  <div class="row">
    <div class="col-2 offset-2 primary white">
      I have a two column offset
    </div>
    <div class="col-2 offset-3 primary white">
      I have a three column offset
    </div>
  </div>
</div>
           
  

Customize with Sass

Don't want a 12 column grid?, you can customize the grid behavior fairly easy by modifying a few variables. Furatto will take care of the rest.

  
  //Grid settings
  $number-of-columns: 12 !default;
  $column-separation-factor: 0.1833 !default;

  //Row config
  $row-text-rendering: optimizespeed !default;
  $row-next-to-row-separation: 0.14285714rem !default;

  //Columns settings
  $col-padding: 0.57142857rem !default;
  $stack-column-separation: 2px !default;
    

Column variations

We know you all want to start building dashboard with the grid, that's why we make it even more easy for you. We provide class names to set the background of your row or column elements.

       
  <div class="row primary">
       <h5 class="white">Primary color</h5>
    </div>  
    <div class="row danger">
       <h5 class="white">Danger color</h5>
    </div>  
    <div class="row warning">
       <h5 class="white">Warning color</h5>
    </div>  
    <div class="row success">
       <h5 class="white">Success color</h5>
    </div>  
       
     

How grid is built?

We use the power of Sass to build the grid and let you customize it to meet your needs. Below is the mixin we use to generate the columns:

  
//
//@mixin
//
@mixin grid-columns($columns: $number-of-columns) {
  $column-width: 100 / $columns;

  @for $i from 1 through $columns {
    .col-#{$i} {
      $current-width: ($column-width * $i) - $column-separation-factor;
      width: percentage($current-width / 100);
      margin-left: percentage($column-separation-factor / 100);
    }
  }
}
  

Available sass variables

  
//Grid settings
$number-of-columns: 12 !default;
$column-separation-factor: 0.1833 !default;

//Row config
$row-text-rendering: optimizespeed !default;
$row-next-to-row-separation: 0.14285714rem !default;

//Columns settings
$col-padding: 0.57142857rem !default;
$stack-column-separation: 2px !default;

//Media
$grid-max-width: 54.85714286rem !default;
$grid-max-width-media: "(max-width: #{$grid-max-width})" !default;

//Row variations
$primary-background-color: rgba(52, 152, 219, 0.6) !default;
$danger-background-color: rgba(231, 76, 60, 0.6) !default;
$warning-background-color: rgba(241, 196, 15, 0.6) !default;
$success-background-color: rgba(46, 204, 113, 0.6) !default;

//columns border
$col-border-color: #FFF !default;
$col-border-alpha: 0.5 !default;