my-grid-system

My Grid System is a powerful, customisable CSS grid system built using PostCSS.


Keywords
css, postcss, grid
License
MIT
Install
npm install my-grid-system@1.1.0

Documentation

My Grid System

My Grid System is a powerful, customisable CSS grid system built using PostCSS.

  • Seamlessly switch between a float or flexbox layout, without changing any markup!
  • Change the grid width and number of columns easily
  • Add as many media queries/breakpoints as you want, the CSS will be generated for you!

Table of Contents

Setup

  • Include the NPM package in your project

    npm install my-grid-system --save-dev
    
  • Add the following to your stylesheet

    @import "../node_modules/my-grid-system/src/grid";
    
    .container    { @mixin grid-container; }
    .row          { @mixin grid-row; }
    .column       { @mixin grid-column; }
    

    You will probably need to adjust the start of the path, depending on the location of your css file.

  • Start using the grid system!

Using the Grid System

Now that the source files are included the your project, you can begin using the grid system.

By default, we apply the grid css to the .container, .row and .column selectors. The grid system uses the selectors as stubs and creates additional selectors and css rules based off of them. You can change them to anything you like, just remeber make any adjustments when using any sample code.

Write some code

Heres some example code for a simple responsive website layout

<div class="container">
    <div class="row">
      <div class="column-12"> Header </div>
    </div>
    <div class="row">
      <div class="column-12 column-768-9"> Column </div>
      <div class="column-12 column-768-3"> Column </div>
    </div>
    <div class="row">
      <div class="column-12"> Footer </div>
    </div>
</div>

More examples can be found here and here.

Configure the Grid System

My Grid System uses the following settings, all of which can be over-ridden;

$grid-type: (default: flexbox)

Change between a flexbox or float based grid system.

$grid-width: (default: 1080px)

Change the maximum width of the grid container.

$grid-columns: (default: 12)

Change the number of columns within the grid.

$grid-breakpoints: (default: 320, 480, 568, 640, 768, 800, 960, 1024, 1280)

Change the screen-sizes/media-queries/breakpoints that are generated by the grid system.

A typical responsive column class looks like

    .column-768-6

We can over-ride $grid-breakpoints to add support for any number of custom sizes. Let's add a new breakpoint for screens that identify as 1920 pixels wide.

    $grid-breakpoints: (320, 480, 568, 640, 768, 800, 960, 1024, 1280, 1920);

After re-building the source files, you can now start using .column-1920-6 in your markup.

Contributors