A fully configurable grid system inside a tiny Sass partial.
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
_grid.scss
bower.json

README.md

Condensed Bootstrap Grid

A fully configurable & self contained grid system based on Bootstrap 3.

Setup

Download and place _grid.scss inside of your Sass project & import the grid partial.

@import "grid";

Bower

bower install cbg

Usage

The default classnames generated and markup are identical to Bootstrap 3, however, nearly everything is configurable.

Options

Option Type Default Description
$cbg__total-grid-cols Number 12 Total number of grid columns
$cbg__gutter Length 15px Size of the gutters between columns
$cbg__namespace String none Adds a namespace before classnames
$cbg__name--col String "col" Text generated in classname
$cbg__name--pull String "pull" Text generated in classname
$cbg__name--push String "push" Text generated in classname
$cbg__name--offset String "offset" Text generated in classname
$cbg__name--clearfix String "clearfix" Text generated in classname
$cbg__name--container String "container" Text generated in classname
$cbg__name--container-fluid String "container-fluid" Text generated in classname
$cbg__breakpoints Map Bootstrap 3 defaults See next section

Breakpoints

Breakpoints can be configured in a separate option. The defaults are set to Bootstrap 3 defaults grid dimensions.

Simply override the Sass map cbg__breakpoints.

// Generated string for classname: ($min-screen-width, $container-width)
$cbg__breakpoints: (
	xs: (0px, 100%),
	sm: (768px, 750px),
	md: (992px, 970px),
	lg: (1200px, 1170px)
)

What about the official Bootstrap Sass?

The official Bootstrap Sass works just great but requires a little more setup if you only want the grid. This also requires you to download the entire bootstrap sass directory where as the condensed bootstrap grid is only one small file.

Acknowledgement

Bootstrap