Short lets you use advanced shorthand properties in CSS.
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.
Declare width
and height
together with size
.
/* before */
.icon {
size: 48px;
}
/* after */
.icon {
width: 48px;
height: 48px;
}
Avoid clobbering previous margin
or padding
values with a skip token.
/* before */
.frame {
margin: * auto;
}
/* after */
.frame {
margin-right: auto;
margin-left: auto;
}
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;
}
Declare color
and background-color
together.
/* before */
.canvas {
color: #abccfc #212231;
}
/* after */
.canvas {
color: #abccfc;
background-color: #212231;
}
Declare individual x
and y
values in overflow
. Omit sides with a skip
token.
/* before */
.scrollable {
overflow: * auto;
}
/* after */
.scrollable {
overflow-y: auto;
}
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;
}
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;
}
Declare font-size
and line-height
together.
/* before */
.heading {
font-size: 1.25em / 2;
}
/* after */
.heading {
font-size: 1.25em;
line-height: 2;
}
Declare font-weight
with common names.
/* before */
p {
font-weight: light;
}
/* after */
p {
font-weight: 300;
}
Short is powered by the following plugins:
- Shorthand Border
- Shorthand Border Radius
- Shorthand Color
- Shorthand Font-Size
- Shorthand Position
- Shorthand Size
- Shorthand Spacing
- Font Weights
Some of these plugins have more features than are described here.
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
});
Follow these steps to use Short.
Add Short to your build tool:
npm install postcss-short --save-dev
require('postcss-short')({ /* options */ }).process(YOUR_CSS);
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Short as a PostCSS plugin:
postcss([
require('postcss-short')({ /* options */ })
]);
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')
);
});
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'
}
}
});