Use advanced shorthand properties in CSS
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download

README.md

PostCSS Short PostCSS Logo

NPM Version Build Status Windows Build Status Gitter Chat

Postcss Short lets you use advanced shorthand properties in CSS.

Postcss Short has 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

Declare width and height together with size.

/* before */

.icon {
  size: 48px;
}

/* after */

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

Margin and Padding

Avoid clobbering previous margin or padding values with a skip token.

/* before */

.frame {
  margin: * auto;
}

/* after */

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

Position

Declare top, right, bottom, and left values in position. Just like before, omit sides with a skip token.

/* before */

.banner {
  position: fixed 0 0 *;
}

/* after */

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

Color

Declare color and background-color together.

/* before */

.canvas {
  color: #abccfc #212231;
}

/* after */

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

Overflow

Declare individual x and y values in overflow. Omit sides with a skip token.

/* before */

.scrollable {
  overflow: * auto;
}

/* after */

.scrollable {
  overflow-y: auto;
}

Border

Omit sides within border- properties and fully define individual values on the border property.

/* before */

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

.container--variation {
  border-width: * * 3px;
}

/* after */

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

.container--variation {
  border-bottom-width: 3px;
}

Border Radius

Declare border-radius properties using the clockwise syntax.

/* before */

.container {
  border-bottom-radius: 10px;
}

/* after */

.container {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Font Size

Declare font-size and line-height together.

/* before */

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

/* after */

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

Font Weight

Declare font-weight with common names.

/* before */

p {
  font-weight: light;
}

/* after */

p {
  font-weight: 300;
}

Plugins

Postcss Short is powered by the following plugins:

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

Options

Each plugin’s options may be configured by targeting the plugin’s namespace. Any plugin may be disabled using a disable property set as true or by setting the plugin’s options as false.

Example:

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

Usage

Follow these steps to use Postcss Short.

Add Postcss 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 Postcss 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 Postcss 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 Postcss Short within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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