Prune.css does not contain any "components", e.g. button styles etc. It contains a handful of utility classes, 24 column grid, hence leaving all the design effort up to you.
- 24 column grid system
- Handful of utility classes
- Bundled normalize.css (thanks Nicolas Gallagher and contributors)
.container-fluid|container
.row =>
.col[1-24] : base sheet
.col-sm[1-24] : >=320px
.col-md[1-24] : >=768px
.col-lg[1-24] : >=992px
.col-xl[1-24] : >=1200px
Basic rules: content should be placed in one of the two container classes. Columns should be wrapped in .row elements.
Contrary to many other CSS frameworks out there, row and column classes does not have margins or paddings by default. If you want to pad all contents of the column, you can wrap them in something like div.mrg-10.
Sets border radius from 0 to 10
.border-radius-[0-10]
Controls element responsive visibility
.show[xs|sm|md|lg]: display element for given size and larger
.show-only[xs|sm|md:lg]: display element only for given size
.hide[xs|sm|md|lg]: hide element for given size and larger
.hide-only[xs|sm|md:lg]: hide element only for given size
Controls element padding and margin
.pad[0-25]: set element padding on all sides
.mrg[0-25]: set element margin on all sides
.inline: sets element display type inline-block
.block: sets element display type block
.left: float element to left
.right: float element to right
.clearfix: classic clearfix class
.show: same as .block
.hide: set element display type none
.block-center: center element in relation to parent
.block-middle: vertically align element to middle
.text-left | set text alignment
.text-right |
.text-center |
.text-justify |
Some concepts inspired by Pure and Bootstrap.
Licensed under terms and conditions of Apache 2.0 license.