A fully configurable & self contained grid system based on Bootstrap 3.
Download and place _grid.scss inside of your Sass project & import the grid partial.
@import "grid";bower install cbgThe default classnames generated and markup are identical to Bootstrap 3, however, nearly everything is configurable.
| 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 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)
)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.