Place
Place lets you use place-*
properties as shorthands for align-*
and justify-*
per the CSS Box Alignment Module Level 3.
.example {
place-self: center;
place-content: space-between center;
}
.example {
align-self: center;
justify-self: center;
align-content: space-between;
justify-content: center;
}
Usage
Add Place to your build tool:
npm install jonathantneal/postcss-place --save-dev
Node
require('postcss-place').process(YOUR_CSS, { });
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Place as a PostCSS plugin:
postcss([
require('postcss-place')({ })
]).process(YOUR_CSS, );
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Place within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-place')({ })
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Place within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-place')({ })
]
},
dist: {
src: '*.css'
}
}
});
Options
prefix
Type: String
Default: null
Specifies a prefix to be surrounded by dashes before the declaration (e.g. prefix: 'x'
changes the detected property to -x-place-content
).