postcss-utilities

PostCSS Utility Library

postcss-utilities is a PostCSS plugin that have the most used mixins, shortcuts and helpers to use as @util rules in yours stylesheets.

See Documentation

List of Utilities

• aspect-ratio
• center
• center-block
• circle
• clearfix
• hd breakpoint
• hide-visually
• hr
• no-hover
• no-js
• reset-list
• text-hide
• triangle
• truncate

What is the difference with preprocessor’s mixins libraries?

• You don’t need extra files for mixins.
• You don’t need mixins for vendor prefixes (use autoprefixer plugin for that)
• You can use with LESS, SASS, pure CSS or whatever you want.

Examples

Input

.truncate {
    @util truncate;
    width: 500px;
}

.cfx {
    @util clearfix;
}

.box-16-9 {
    background-color: #ccc;
    margin-bottom: 20px;
    @util aspect-ratio(16:9);
}

.circle {
    @util circle(200px, red);
}

Output

.truncate {
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfx:after {
    content: '';
    display: block;
    clear: both;
}

.box-16-9 {
    background-color: #ccc;
    margin-bottom: 20px;
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-color: red;
}

Usage

postcss([ require('postcss-utilities') ])

See PostCSS docs for examples for your environment.

Contributing

The list of utilities is open to new mixins, shortcuts and helpers.

• Do you think that we should include one? Create an issue with you proposal.
• Do you have a problem? Write an issue.
• Do you want to contribute with code? Send a pull request
• Do you find an error in the documentation? Fix it in gh-pages branch and send a pull request

Changelog

v0.2.0

• Public release