KNACSS framework v3 CheatSheet

www.knacss.com from Alsacreations

base iefix
.h1-like ...h6-like. styling elements like headings .ie6 IE6 selector
.smaller, .small alternate font styling .ie7 IE7 selector
.big, .bigger, .biggest alternate font styling .ie8 IE8 selector
.visally-hidden hiding content on screen .ie! IE! selector
.ski"-links ski" links styling .ie678 IE6, IE7, IE8 selector
.t#tleft, .t#tright, .t#tcenter content alignment
l.nstyled list-style$ none
basic layout grids (with gutters)
.mod .grid overall container for grid layot
.line container for hori%ontal stacks .grid&, ... .grid1& direct "arent for grid elements
.row container for '(( table layot .grid&-1, .grid1-& ne)al grid *1-&+ for & blocks
.col table-cell element .grid,-1, .grid1-, ne)al grid *1-,+ for & blocks
.inbl inline-block element
.left , .right left or right floating element
autogrids (auto gutters)
.start floating according to reading direction .atogrid&, .atogrid1& "arent for atogrids elements
.end floating according to reading direction
.center block hori%ontal centering
.clearfi# containing floats element
.clear "sh nder floats
spacig helpers
width helpers
.m-reset, .ma- margin$ -
.w1-, ....w1-- width 1-. to 1--. ."-reset, ."a- "adding$ -
.w1--" ... .w11/-" width 1--"# to 11/-"# .ma1, .mas margin$ 0small0
.mw!6-" ma#-width !6-"# .ma&, .mam margin$ 0medim0
.mw11/-" ma#-width 11/-"# .ma,, .mal margin$ 0large0
.wato width$ ato ."a1, ."as "adding$ 0small0
.mt-, .mtn margin-to"$ none
.mt1, .mts margin-to"$ 0small0
tables forms
.table styling like table element .btn "rimary btton element styling
.table-ato table-layot$ ato
.alternate alternate table styling
icos
.alternate-vert alternate vertical table styling .icon "rimary icon element styling
.stri"ed stri"ed rows .icon-rate icon for rating
.stri"ed-vert vertical stri"ed rows .icon-111 &1 nicode icons available
resposive flexbox
.large-111 "refi# for large screens .fle# creating fle# conte#t on "arent
.large-w&2, ... width$ &2. on large screens .fle#-h, .fle#-v hori%ontal or vertical dis"lay
.large-ma- margin$ none on large screens .fle#-flid children which mst be fle#ible
.large-w1--, .large-wato resetting block on large screen .fle#-start, .fle#-end, .fle#-mid ordering childrens
.large-hidden, .large-visible
.large-no-float 0n-float0 element on large screen
!"SS # Sass cofig
.large-inbl, .large-row, .large-col modifying dis"lay on large screens 3basefont body font-si%e in "i#el e)ivalent
.small-111 "refi# small screens 3lh line-height
.tiny-111 "refi# tiny screens 3h1-si%e, ... 3h6-si%e headings font-si%e in "i#el e)ivalent
3basecolor, 3basecolor base font and backgrond color
!"SS # Sass booleas (v3 $ beta)
"rimary links *4 hovered+ color
3s""ort-ie 0tre0 to activate IE65IE75IE8 s""ort vales for margins and "addings
3styling media )eries break"oints
3direction 3gtter
modle element *gains 6lock 7ormatting
'onte#t+
hiding or revealing element on large
screen
3basecolor-link, 3basecolor-
link-hover
3smallvale, 3medimvale,
3largevale
0tre0 to design basic elements like code,
mark or ski"-links
3tinyscreen, 3smallscreen,
3largescreen
reading direction $ 0ltr0 *left to right, or
0rtl0 *right to left+
gtter vale *., "#, em, rem, etc+ for grid
layots
3fontstack1, 3fonstack&,
3fonstack,
"rimary, monos"ace and niversal font
stacks