ashtonthomas / pcss

a low-level css toolkit

🐧 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}-${value}

ex:

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

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