Get started

Presentation

CSS117 is a very smart and flexible grid based on the CSS Grid Layout Module.

No need to wrap individual rows
No need to tag last columns with classes
Highly customizable through variables

<div class="cols">
<div class="col col--up-3 col--1000-6">...</div>
<div class="col col--up-3 col--1000-6">...</div>
<div class="col col--up-6 col--1000-hidden col--500-visible">...</div>
<div class="col col--up-12 col--1000-4">...</div>
<div class="col col--up-6 col--1000-8">...</div>
<div class="col col--up-6 col--1000-12">...</div>
</div>
</div>

1
col--up-3 col--1000-6 col--500-12

2
col--up-3 col--1000-6 col--500-12

3
col--up-6
col--1000-hidden
col--500-visible
col--500-12

4
col--up-12 col--1000-4 col--500-12

5
col--up-6 col--1000-8 col--500-12

6
col--up-6 col--1000-12 col--500-12

Flexbox and float fallbacks

Because Internet Explorer from 10 to 15 uses the old specification of the module (2011), CSS117 Grid Layout doesn’t use the -ms- prefix, particulary since auto-placement is not possible (-ms-grid-column: auto;doesn’t work).

There’s a flexbox fallback for Internet Explorer from 11 to 15 and a float: left one for earlier version (IE10-) (which works like a charm). Check the fallback variables for more details.

Installation

01. 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';

Manually

Download from the Github repo (master.zip) and import css117 scss in your main SASS file.

02. Copy and paste variables

Copy and paste variables from css117.scss to your variables file.
Remove the !default flags at $css117-breakpoints, $css117-space& $css117-variables

03. Set up your html

Set up your html as followed :

<div class="cols">
  <div class="col col--up-4 col--1000-6 col--500-12"> ... </div>
  <div class="col col--up-4 col--1000-6"> ... </div>
  <div class="col col--up-4 col--1000-12"> ... </div>
  <div class="col col--up-6 col--500-6"> ... </div>
  <div class="col col--up-3 col--500-6"> ... </div>
  <div class="col col--up-2 col--1000-4"> ... </div>
  <div class="col col--up-2 col--1000-4"> ... </div>
  <div class="col col--up-2 col--1000-4"> ... </div>
  ...
</div>

Customize variables

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

DRY variables	Default	Type	Description
`$css117-space`	`30px`	pixels	Helper to define consistent spacing (gutters…)
`$css117-col`	`col`	string	Define the class name of the grid items
`$css117-medias`	`img,...`	list	A list for Responsive media HTML tag

Breakpoints value	Default	Type	Description
`$css117-bkpts`	`800, 500`	list	Define the different breakpoints of the grid more

Classes name	Default	Type	Description
`grid-class-name`	`cols`	string	Define the grid class name
`col-class-name`	`$css117-col`	string	Define columns class name

Breakpoints	Default	Type	Description
`largest-breakpoint`	`col--up`	string	Define the largest column class name
`full-width-on-small`	`false`	boolean	Choose `true` to have a unique fullwidth on the `small` breakpoint

Grid max-width	Default	Type	Description
`max-width`	`1200px`	px or %	Define the max-width of the grid

Columns settings	Default	Type	Description
`nb-of-columns`	`12`	integer	Define the number of columns
`columns-start-from`	`1`	integer	Because we usually don’t have a `col--up-1` column, 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

Spacing	Default	Type	Description
`grid-margin-top`	`0`	pixels	Define the margin top of the grid
`grid-margin-bottom`	`0`	pixels	Define the margin bottom of the grid
`grid-margin-left`	`30px`	pixels	Define the margin left of the grid
`grid-margin-right`	`30px`	pixels	Define the margin right of the grid
`grid-padding-top`	`30px`	pixels	Define the padding top of the grid
`grid-padding-bottom`	`30px`	pixels	Define the padding bottom of the grid
`grid-padding-left`	`30px`	pixels	Define the padding left of the grid
`grid-padding-right`	`30px`	pixels	Define the padding right of the grid
`col-margin-top`	`30px`	pixels	Define the margin top of columns
`col-margin-bottom`	`30px`	pixels	Define the margin bottom of columns
`gutter-width`	`30px`	pixels	Define the width of gutters
`gutter-height`	`30px`	pixels	Define the height of gutters
`col-padding-top`	`30px`	pixels	Define the padding top of the col
`col-padding-bottom`	`30px`	pixels	Define the padding bottom of the col
`col-padding-left`	`30px`	pixels	Define the padding left of the col
`col-padding-right`	`30px`	pixels	Define the padding right of the col

Add a wrapper ?	Default	Type	Description
`wrapper`	`true`	boolean	Add a full width wrapp around some rows. Check the demo
`wrapper-class-name`	`30px`	pixels	Define the class name of the wrapper
`wrapper-margin-top`	`30px`	pixels	Define the margin top of the wrapper
`wrapper-margin-bottom`	`30px`	pixels	Define the margin bottom of the wrapper
`wrapper-padding-top`	`60px`	pixels	Define the padding top of the wrapper
`wrapper-padding-bottom`	`60px`	pixels	Define the padding bottom of the wrapper

Browser Support	Default	Type	Description
`grid-feature`	`true`	boolean	Use the grid module layout
`flexbox-fallback`	`true`	boolean	Add a flexbox for browser that don’t support Grid
`float-fallback`	`true`	boolean	Add a float:left for browser that don’t support Grid or flex

Alignement of the grid	Default	Type	Description
`centered`	`false`	boolean	Choose `true` to center the grid on the page

Visibility Classes	Default	Type	Description
`visibility-class`	`true`	boolean	Choose `true` if you need visibility classes

Production mode	Default	Type	Description
`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’

Fullwidth on small breakpoints

To set a unique fullwidth on the smallest breakpoint.
Therefore you don’t need the smallest breakpoint class on your markup :

<div class="cols">
  <div class="col col--up-4 col--1000-6">...</div>
  <div class="col col--up-4 col--1000-6">...</div>
  <div class="col col--up-4 col--1000-12">...</div>
  ...
</div>

1
col--up-4
col--1000-6

2
col--up-4
col--1000-6

3
col--up-4
col--1000-12

Visibility classes

Creates a -hidden and -visible classes :

col--up-hidden
col--1000-visible
…

<div class="cols">
  <div class="col col--up-12 col--1000-hidden"> ... </div>
  <div class="col col--up-hidden col--1000-visible col--1000-6">...</div>
  <div class="col col--up-12 col--1000-6">...</div>
  ...
</div>

1
col--up-12
col--1000-hidden

2
col--up-hidden
col--1000-visible
col--1000-6

3
col--up-12
col--1000-6

Previous versions

v1.3	Flexbox Version	September 2017
v1.2	Older version (inline-block, IE8-)	June 2017

Check the logs : https://github.com/aastudio/css117/blob/master/CHANGELOG.md