KNACSS v7 cheatsheet knacss.

com by @alsacreations
Breakpoints

$tiny (480px) $small (576px) $medium (768px) $large (992px) $extra-large (1200px)

respond-to("small") respond-to("small-up") tiny | small | medium | large | extra-large | tiny-up | small-up |

(max-width: 575px) (min-width: 576px) medium-up | large-up | extra-large-up | retina

.checkbox .radio .switch .mts

Utility classes
Components

<select> .icon-arrow-- .nav-button

.pll .prm

alert default button default tag default

}
badge
.alert .btn .tag .badge t n
margin | padding
.alert--primary .btn--primary .tag--primary .badge--primary .mr s
top | right | bottom | left
.alert--success .btn--success .tag--success .badge--success p b m none | small | medium | large
.alert--warning .btn--warning .tag--warning .badge--warning l l ex. .mtl margin-top large
.alert--danger .btn--danger .tag--danger .badge--danger

}
.alert--info .btn--info .tag--info .badge--info
width + value (+ pixel)
.alert--inverse .btn--inverse .tag--inverse .badge--inverse .w* ex. .w30 width: 30%;
.alert--ghost .btn--ghost .tag--ghost .badge--ghost * p ex. .w100p width: 100px;

.grid .col-number
Grillade container

Grillade children

one line grid (equal width children) number of column spanning (1 to 12)

.grid-number ex. .col-2 items is 2 columns width

multi-column grid (1 to 12) .row-number

ex. .grid-6 6 columns grid number of rows spanning (1 to 12)
.grid-number-small-number2 ex. .row-3 items is 3 rows height

multi-column grid with intermediate breakpoint .col-all | .row-all

ex. .grid-4-small-2 2 columns (< medium) then 4 columns
all columns or rows spanning
.has-gutter-value ex. .col-all items spans all columns

optional for gutters (.has-gutter | .has-gutter-l | .has-gutter-xl) .col-number-small-number2

ex. .grid-8 .has-gutter 8 columns grid with small gutter
spanning with intermediate breakpoint
ex. .col-4-small-2 2 columns (< medium) then 4 columns
ex. .col-2-small-all all columns (< medium) then 2 columns

.item-first | .item-last
item will appear first or last in grid

.grid-offset
item leaves empty space in grid

$spacer-tiny : .5rem .left : block to left .fl : float left .flex-container

Spacers

Alignements

$spacer-small : 1rem .right : block to right .fr : float right .flex-container--column

$spacer-medium : 2rem .center : centered block .clear : clear both .item-fluid
$spacer-large : 4rem .txtleft : inline to left .clearfix : float container .item-center
$spacer-extra-large : 8rem .txtright : inline to right .bfc : block formatting context .item-first | .item-medium |
.item-last
$spacer-ultra-large : 16rem .txtcenter : inline to center .inbl : inline-block