Push Grid System The Scss Way
open-source layout generator

Download on GitHub

Optimized for UI development. Based on thoughtbot's neat grid equation.

Version 1.0
MIT license

width: calc(percentage($columns / $grid-columns) - $grid-gutter + ($grid-gutter * percentage($columns / $grid-columns)));


Twelve column

Four column

Three column

Two column

One column

Column collapse : Full width with gutter collapse

One column push

Two column push

Three column push

Four column push

Five column push

Six column push

One column pull

Two column pull

Three column pull

Four column pull

Five column pull

Six column pull

One column shift

Two column shift

Three column shift

Four column shift

Five column shift

Six column shift

Seven column shift

Eight column shift

Nine column shift

Ten column shift

Eleven column shift

Nested

What can you use this for?

Class based SCSS grid generator for digital builds capable of adaptive layouts.

Files included

  • - You can view the Index file for examples of the grid layout.

  • - A reset file for css componets has been included

  • - SCSS folder with _grid.scss file for fine tuning. This does require you to compile the main.scss file if you wish to make changes.

  • - CSS folder with grid compiled using a default of 12 columns for large displays and 8 columns for small.

Dependencies

If you do intend to fine tune the grid you can alter columns, gutter space etc, please make sure you have an understanding of preprocesses.

Variables example

To make the grid your own the _grid.scss file within the SCSS folder makes use of a few variables that allow you to change the output.


            //Main Grid Variables : Feel free to change these to suit
            $grid-columns: 12; //Desktop columns
            $grid-columns-breakpoint: 8; //Responsive columns
            $grid-max-width: 1280px; //Site max width
            $gutter: 20px; // Gutter widths
            $breakpoint: 768px; // Responsive breakpoint
          

SCSS grid class constructor example

A quick look at how the class contructor works


            @for $i from 1 through $grid-columns - 1 {
                $col: $columns * $i;
                $z: ($gutter * ($i / $grid-columns)) + $gutter; // Push-left grid : Equation

                .pf-col-#{$i} {
                    width: calc(#{$col} - #{$z});
                    float: left;
                    margin-left: $gutter;
                }
            }
          

How to use it

Within your HTML markup you can just use your grid classes as shown below. Define the class for large and small sizes for an adaptive layout.


            <div class="pf-grid-wrapper">
              <div class="pf-grid-row">
                <div class="pf-col-4 pf-col-8-breakpoint"></div>
                <div class="pf-col-8 pf-col-8-breakpoint">
                    <div class="pf-col-collapse">
                        <div class="pf-col-3 pf-col-4-breakpoint"></div>
                        <div class="pf-col-3 pf-col-4-breakpoint"></div>
                        <div class="pf-col-3 pf-col-4-breakpoint"></div>
                        <div class="pf-col-3 pf-col-4-breakpoint"></div>
                    </div>
                </div>
              </div>
            </div>
          

What it outputs

Within the output css file.


            .pf-col-8 {
              width: calc(66.6666666667% - 33.3333333333px);
              float: left;
              margin-left: 20px;
            }

            @media (max-width: 768px) {
              .pf-col-8-breakpoint {
                width: calc(100% - 40px);
                float: left;
                margin-left: 20px;
              }
            }