DS in CSS
Layouts
There are several convenience classes provided in this CSS library for creating layouts.
Flex classes
Several classes are provided to apply flex styles.
| Class name | Effect |
|---|---|
.cb-flex
|
Adds display: flex;
|
.cb-flex-grow
|
Adds flex-grow: 1;
|
.cb-flex-shrink
|
Adds flex-shrink: 1;
|
.cb-flex-direction-row
|
Adds flex-direction: row;
|
.cb-flex-direction-column
|
Adds flex-direction: column;
|
.cb-flex-direction-row-reverse
|
Adds flex-direction: row-reverse;
|
.cb-flex-direction-column-reverse
|
Adds flex-direction: column-reverse;
|
.cb-flex-wrap-wrap
|
Adds flex-wrap: wrap;
|
.cb-flex-wrap-nowrap
|
Adds flex-wrap: nowrap;
|
.cb-flex-wrap-wrap-reverse
|
Adds flex-wrap: wrap-reverse;
|
Columns
This library uses a basic 12-column layout.
You can use classes like .cb-column-{number} (where number is an integer in the
range 1..12) to specify a number of columns an element should occupy.
Responsive columns
Fixed columns are useful, but limited; for instance, resize your browser and look at the example above. those 1, 2, and 3 column boxes are pretty cramped in a narrow viewport.
You can use classes like .cb-column-{number}-{breakpoint} to specify a number of
columns for a specific breakpoint size range.
| Breakpoint | Viewport width (w) |
|---|---|
xs
|
w ≤ 600px |
sm
|
w ≤ 960px |
md
|
w ≤ 1280px |
lg
|
w ≤ 1600px |
xl
|
w ≥ 1601px |
Note that xl is the only breakpoint above that specifies viewports
wider than a given pixel value; otherwise, all of the normal .cb-column-{number}-{breakpoint} classes specify column values for viewports
narrower than a specific value.
To target viewport widths wider than a specific breakpoint, you can use a class like .cb-column-{number}-{breakpoint}-up to specify a
number of columns.
| Breakpoint | Viewport width (w) |
|---|---|
xs-up
|
w ≥ 0px |
sm-up
|
w ≥ 600px |
md-up
|
w ≥ 960px |
lg-up
|
w ≥ 1280px |
In the example below, each tile will take up 12 columns in the xs breakpoint, 6 columns in the sm breakpoint, 4 columns in the md breakpoint, 3 columns in the lg breakpoint, and 2 columns in the xl breakpoint.