Stylus CSS Grid System

What is it

This is modular grid system based on CSS Grid Layout, Stylus, Bootstrap`s classes, a 12 columns and media queries. It’s built with CSS Grid and is fully responsive.

How it works

This is a simple scheme of grid layout:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8"></div>
    </div>
</div>

1. Use .container for a responsive pixel width or .container-fluid for width 100% across all viewport and device sizes.
   
If you need an edge-to-edge design you should drop the parent .container or .container-fluid
2. The .row class is using to create a one row of columns.
3. Columns are centered in the page with the parent .container. Column`s classes includes .col-{breakpoint-name}-{number} and .col-{number}.
   
There are a few breakpoint`s names: extra small (xs), small (sm), medium (md), large (lg), extra large (xl).
The number means the width of column and you should use up to 12 for each row. So, if you want three equal-width columns, you can use .col-sm-4.
4. Columns have column gap to create the gutters between individual columns, you can customize this property further.

Responsive classes

The grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

You can use .col-{number} when you need a particularly sized column.

<div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
</div>

Mix and match

You can combine different types of columns.

<div class="row">
    <div class="col-lg-6">.col-lg-6</div>
    <div class="col-lg-2">.col-lg-2</div>
    <div class="col-4">.col-4</div>
</div>

No Gutters

The gutters between columns in this layout can be removed with .no-gutters.

<div class="row no-gutters">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-10">.col-md-10</div>
</div>

Column wrapping

If you use more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Column breaks

Use .w-100 if you want to wrap your columns to a new line.

<div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Nesting

Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="row">
    <div class="col-12">Level 1
        <div class="row">
            <div class="col-2">Level 2</div>
            <div class="col-3">Level 2</div>
        </div>
    </div>
</div>

Display property

Change the value of the display property with responsive display utility classes. Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them.

The classes are named using the format:

• .d-{value} for xs;
• .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where display is one of:

• none;
• inline;
• inline-block;
• block;
• table;
• table-cell;
• table-row;
• flex;
• inline-flex.

<div class="d-inline-block">Block 1</div>
<div class="d-inline-block">Block 2</div>

Classes can be combined for various effects as you need:

<div class="d-lg-none">Hide on screens wider than lg</div>
<div class="d-none d-lg-block">Hide on screens smaller than lg</div>

Customizing the grid

You can change the grid variables such as column`s number, gaps, container widths and breakpoints. Also you can add extra breakpoint and appropriate container width such as "xxxl".

"_variables.styl" file:

$columns = 12
$grid-gap = 30px
$breakpoints-and-widths = {
	'xs': {
		"breakpoint": "0",
		"container-width": "0"
	},
	'sm': {
		"breakpoint": "576px",
		"container-width": "540px"
	},
	'md': {
		"breakpoint": "768px",
		"container-width": "720px"
	},
	'lg': {
		"breakpoint": "992px",
		"container-width": "960px"
	},
	'xl': {
		"breakpoint": "1200px",
		"container-width": "1140px"
	}
}

Browser support

Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, Internet Explorer isn`t supported, Safari and Chrome for iOS 10.3.

The browser support can be extended with polyfills, for example with css-grid-polyfill.