source: trip-planner-front/node_modules/postcss-place/README.md@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.7 KB
Line 
1# PostCSS Place Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Place Properties] lets you use `place-*` properties as shorthands for `align-*`
9and `justify-*`, following the [CSS Box Alignment] specification.
10
11```pcss
12.example {
13 place-self: center;
14 place-content: space-between center;
15}
16
17/* becomes */
18
19.example {
20 align-self: center;
21 justify-self: center;
22 place-self: center;
23 align-content: space-between;
24 justify-content: center;
25 place-content: space-between center;
26}
27```
28
29## Usage
30
31Add [PostCSS Place Properties] to your project:
32
33```bash
34npm install postcss-place --save-dev
35```
36
37Use [PostCSS Place Properties] to process your CSS:
38
39```js
40import postcssPlace from 'postcss-place';
41
42postcssPlace.process(YOUR_CSS /*, processOptions, pluginOptions */);
43```
44
45Or use it as a [PostCSS] plugin:
46
47```js
48import postcss from 'postcss';
49import postcssPlace from 'postcss-place';
50
51postcss([
52 postcssPlace(/* pluginOptions */)
53]).process(YOUR_CSS /*, processOptions */);
54```
55
56[PostCSS Place Properties] runs in all Node environments, with special instructions for:
57
58| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
59| --- | --- | --- | --- | --- |
60
61## Options
62
63### preserve
64
65The `preserve` option determines whether the original place declaration is
66preserved. By default, it is preserved.
67
68```js
69postcssPlace({ preserve: false })
70```
71
72```pcss
73.example {
74 place-self: center;
75 place-content: space-between center;
76}
77
78/* becomes */
79
80.example {
81 align-self: center;
82 justify-self: center;
83 align-content: space-between;
84 justify-content: center;
85}
86```
87
88[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-place.svg
89[cli-url]: https://travis-ci.org/jonathantneal/postcss-place
90[css-img]: https://cssdb.org/badge/place-properties.svg
91[css-url]: https://cssdb.org/#place-properties
92[git-img]: https://img.shields.io/badge/support-chat-blue.svg
93[git-url]: https://gitter.im/postcss/postcss
94[npm-img]: https://img.shields.io/npm/v/postcss-place.svg
95[npm-url]: https://www.npmjs.com/package/postcss-place
96
97[CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content
98[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
99[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
100[PostCSS]: https://github.com/postcss/postcss
101[PostCSS Loader]: https://github.com/postcss/postcss-loader
102[PostCSS Place Properties]: https://github.com/jonathantneal/postcss-place
Note: See TracBrowser for help on using the repository browser.