🐧 pcss

a low-level css toolkit

pcss is a set of immutable styles and utilities, written in Sass, for building sites with a minimal amount of css.

inspired by

• basscss by Brent Jackson
• tachyons by Adam Morse

if you want to learn more about functional css, I recommend reading CSS and Scalability by Adam

installation

bower install --save pcss

include it into your sass project:

@import "bower_components/pcss/src/pcss"

or add the compiled versions from the /dist folder to your app

naming convention

pcss follows this naming convention:

.${shorthand property}-${shorthand value}

ex:

.va-m     // vertical-align: middle
.f-l      // float: left
.o-h      // overflow: hidden
.d-b      // display: block
.ta-l     // text-align: left
.fw-500   // font-weight: 500

note there are a few exceptions, like some utility classes (hide, nowrap, truncate). to read more about the naming convention and see a list of classes, read the docs