Show Menu
Cheatography

UIKit by YooThemes Cheat Sheet (DRAFT) by

This covers the features mentioned as of version 2.25.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Headings

uk-h1 ... uk-h6
Change a heading size to look like another heading
uk-img­-pr­eserve
kills responsive behavior of images

Grid

uk-grid
Forms the outer grid boundary.
uk-wid­th-1-1
Fills 100% of the available width.
uk-wid­th-1-2 ...
Divides the grid into halves.
uk-wid­th-1-10
Divides the grid into tenths.
The grid has no style related CSS.

Responsive Width

uk-width-*
Affects all device widths, grid columns stay side by side.
uk-wid­th-­small-*
Affects device widths of 480px and higher. Grid columns will stack on smaller sizes.
uk-wid­th-­med­ium-*
Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
uk-wid­th-­large-*
Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.
To create a margin between stacking grid columns, just add the data-u­k-g­rid­-margin attribute.