What can you use this for?

Class based SCSS grid generator for digital builds capable of standard, centered, push, pull, and responsive column 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;
              }
            }