Short

Short lets you write styles more logically by extending shorthand properties in CSS.

Short has now been featured in Smashing Magazine! I hope all of these shorthands are useful and clear to first-time lookers. I hope they improve the readability of your stylesheets and save you development time along the way. Thank you so much for your support.

Features

Size

Write width and height together with the size property.

/* before */

.icon {
    size: 48px;
}

/* after */

.icon {
    width: 48px;
    height: 48px;
}

Margin and Padding

Avoid clobbering previous margin by using an asterisk, which indicates that an edge is skipped.

/* before */

.frame {
    margin: * auto;
}

/* after */

.frame {
    margin-right: auto;
    margin-left: auto;
}

Position

Write top, right, bottom, and left in the position property using the clockwise syntax. Just like before, an asterisk indicates that an edge is skipped.

/* before */

.banner {
    position: fixed 0 0 *;
}

/* after */

.banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

Color

Write color and background-color together.

/* before */

.canvas {
    color: #abccfc #212231;
}

/* after */

.canvas {
    color: #abccfc;
    background-color: #212231;
}

Border

Define multiple edges on border properties using the clockwise syntax.

/* before */

.container {
    border: 1px 2px #343434;
}

/* after */

.container {
    border-width: 1px 2px;
    border-color: #343434;
}

Font-Size

Write font-size and line-height together.

/* before */

.heading {
    font-size: 1.25em 2;
}

/* after */

.heading {
    font-size: 1.25em;
    line-height: 2;
}

Font-Weight

Write font-weight using common names.

/* before */

p {
    font-weight: light;
}

/* after */

p {
    font-weight: 300;
}

Text

Keep all text properties together with the text property.

/* before */

.section {
    text: dimgrey bold center uppercase 1.25em 1.5 .05em;
}

/* after */

.section {
    color: dimgrey;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: .05em;
}

Data Attributes

Set data- attributes with a shorter attribute selector.

/* before */

.menu-item[-active] {
    background: #f3f3f3;
}

/* after */

.menu-item[data-active] {
    background: #f3f3f3;
}

Plugins

Short is powered by the following plugins:

• Shorthand Border
• Shorthand Color
• Shorthand Font-Size
• Shorthand Position
• Shorthand Size
• Shorthand Spacing
• Shorthand Text
• Shorthand Data
• Font Weights

Some of these plugins have more features than are described here.

Usage

Follow these steps to use Short.

Add Short to your build tool:

npm install postcss-short --save-dev

Node

require('postcss-short')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Short as a PostCSS plugin:

postcss([
    require('postcss-short')({ /* options */ })
]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Short within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('postcss-short')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Short within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-short')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

Each plugin’s options may be configured by targeting the plugin’s namespace. Any plugins may be disabled by giving them a disable property.

Example:

require('postcss-short')({
    'font-size': {
        prefix: 'x'
    },
    'position': {
        disable: true
    }
})