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.