Presentation

CSS117 is a very smart and flexible grid.

  • No need to wrap individual rows
  • No need to tag last columns with classes
  • Highly customizable through variables
  • Grid can be nested
<div class="grid">
    <div class="cols">
        <div class="col large-3 medium-6">...</div>
        <div class="col large-3 medium-6">...</div>
        <div class="col large-6 medium-hidden small-visible">...</div>
        <div class="col large-12 medium-4">...</div>
        <div class="col large-6 medium-8">...</div>
        <div class="col large-6 medium-12">...</div>
    </div>
</div>
1
large-3
medium-6
2
large-3
medium-6
3
large-6
medium-hidden small-visible
4
large-12
medium-4
5
large-6
medium-8
6
large-6
medium-12

Installation

First step : Download the package

  • Webpack
npm i css117 --save-dev
// And in your main SASS file
@import '~css117';
  • NPM
npm i css117 --save-dev
// And in your main SASS file
@import '/node_modules/css117/css117.scss';
  • Bower
bower i css117
// And in your main SASS file
@import '/bower_components/css117/css117.scss';
  • Install manually

Download from the Github repo (master.zip)

// And import css117.scss in your main SASS file

Second step : Copy and paste variables

  1. Copy and paste variables from css117.scss to your variables file.
  2. Remove the !default flag
// Variables
$css117-settings: (
    grid-class-name:        'grid',
    cols-class-name:        'cols',
    col-class-name:         'col',

    largest-breakpoint:     'large',
    full-width-on-smallest: true,

    max-width:              1000px,
    gutter-width:           20px,

    nb-of-columns:          12,
    columns-start-from:     1,
    choose-columns:         false,
    which-columns:          (4,6,8,12),

    nested:                 false,
    nested-start-from:      2,
    choose-nested-columns:  false,
    which-nested-columns:   (4,6,8,12),

    grid-margin-top:        0,
    grid-margin-bottom:     30px,
    grid-padding:           0,

    col-margin-top:         0,
    col-margin-bottom:      30px,
    col-padding:            20px,
    col-font-size:          1rem,

    centered:               true,

    offset-class:           false,
    offset-class-name:      'offset',

    visibility-class:       false,

    dev:                    false,
    debug:                  false
);

$css117-breakpoints: (
    medium:     800px,
    small:      500px
);

Third step : Set up your html

Set up your html as followed :

<div class="grid">
    <div class="cols">
        <div class="col large-4 medium-6 small-12"> ... </div>
        <div class="col large-4 medium-6"> ... </div>
        <div class="col large-4 medium-12"> ... </div>
        <div class="col large-6 small-6"> ... </div>
        <div class="col large-3 small-6"> ... </div>
        <div class="col large-2 medium-4"> ... </div>
        <div class="col large-2 medium-4"> ... </div>
        <div class="col large-2 medium-4"> ... </div>
        ...
    </div>
</div>

NOTE :

  • The two wrappers, .grid and .cols, are mandatory (the secret sauce of the grid)
  • The classes medium- and small- are created automatically from the map $css117-grid-breakpoints
  • The narrowest breakpoint must be called small
  • You can add any other breakpoint between, directly in the map $css117-grid-breakpoints

Customize variables

Below are the variables from the $css117-grid-settings SASS map :

SASS variables Default Type Description
grid-class-name grid string Customize the first wrapper class name
cols-class-name cols string Customize the second wrapper class name
col-class-name col string Customize columns class name
largest-breakpoint large string Customize largest column class name
full-width-on-small false boolean Choose true to have a unique fullwidth on the small breakpoint
max-width 960px pixels Define the max-width of the grid
gutter-width 30px pixels Define the width of gutters
nb-of-columns 12 integer Define the number of columns
columns-start-from 1 integer Because we usually don’t use class like large-1, you can set from which column number to start.
It’s a good way to reduce file size.
choose-columns false boolean Choose only the column number you need. Good for production (reduce size)
which-columns (4,6,8,12) list List the number you need when choose-columns is true
nested false boolean Choose true to nest grids
nested-start-from 2 integer Same as columns-start-from but for nested grids
choose-nested-columns false boolean Same as choose-columns but for nested grids
which-nested-columns (4,6,8,12) list Same as which-columns but for nested grids
grid-margin-top 0 pixels Define the margin top of the grid
grid-margin-bottom 30px pixels Define the margin bottom of the grid
grid-padding 0 pixels Define the padding of the grid (can be : 30px 10px 0 5px)
col-margin-top 0 pixels Define the margin top of columns
col-margin-bottom 30px pixels Define the margin bottom of columns
col-padding 20px pixels Define the padding of columns
col-font-size 1rem rem Define the base font-size inside columns
centered false boolean Choose true to center the grid on the page
offset-class false boolean Choose true if you need offset classes
offset-class-name offset string Customize name of offset classes. Works if offset-class is set to true
visibility-class false boolean Choose true if you need visibility classes
dev false boolean If set to true, it adds a pink background and blue sides borders to each columns. Useful when developing
debug false boolean If set to true, it send debugging informations to the ‘Terminal’

Nested grid

To nest grids, insert a .cols inside a root column (no need for .grid class anymore) :

<div class="doc">
    <div class="grid">
        <div class="cols">
            <div class="col large-6 medium-6">

                <!-- nested grid -->
                <div class="cols">
                    <div class="col large-6 medium-8">...</div>
                    <div class="col large-6 medium-4">...</div>
                </div>
                <!-- /end -->

            </div>
            <div class="col large-6 medium-6">
                ...
            </div>
        </div>
    </div>
</div>
1.1
large-6
medium-8
1.2
large-6
medium-4
2.1
large-4
medium-12
2.2
large-8
medium-12
3.1
large-8
medium-6
3.2
large-4
medium-6

Fullwidth on small breakpoints

By default, each column, on the small breakpoint, of has different size, but in actual use, you probably want to set a unique fullwidth.

If set to true, you don’t need the small class on your markup :

<div class="grid">
    <div class="cols">
        <div class="col large-4 medium-6">...</div>
        <div class="col large-4 medium-6">...</div>
        <div class="col large-4 medium-12">...</div>
        ...
    </div>
</div>
1
large-4
medium-6
2
large-4
medium-6
3
large-4
medium-12

Offset classes

Offset classes let you indent some columns.

<div class="grid">
    <div class="cols">
        <div class="col large-12"> ... </div>
        <div class="col large-5 large-offset-2 medium-no-offset medium-12">...</div>
        <div class="col large-5 medium-offset-5 medium-7 small-no-offset">...</div>
        <div class="col large-12"> ... </div>
        ...
    </div>
</div>
1
large-12
2
large-5 large-offset-2
medium-no-offset
medium-12
3
large-5
medium-offset-5 medium-7
small-no-offset
4
large-12
...
  • It is written BREAKPOINT-offset-NUMBER. Example : large-offset-2, medium-offset-7, etc.
  • It comes also some no-offset classes : medium-no-offset, small-no-offset, etc.

Visibility classes

Visibility classes let you show or hide columns based on screen size. It creates a -hidden and -visible classes : large-hidden, medium-visible, etc.

<div class="grid">
    <div class="cols">
        <div class="col large-12 medium-hidden"> ... </div>
        <div class="col large-hidden medium-visible medium-6">...</div>
        <div class="col large-12 medium-6">...</div>
        ...
    </div>
</div>
1
large-12
medium-hidden
2
large-hidden
medium-visible
medium-6
3
large-12
medium-6
...