source: trip-planner-front/node_modules/postcss-gap-properties/README.md@ 1ad8e64

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

initial commit

  • Property mode set to 100644
File size: 2.5 KB
Line 
1# PostCSS Gap 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 Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap`
9shorthand properties in CSS, following the [CSS Grid Layout] specification.
10
11```pcss
12.standard-grid {
13 gap: 20px;
14}
15
16.spaced-grid {
17 column-gap: 40px;
18 row-gap: 20px;
19}
20
21/* becomes */
22
23.standard-grid {
24 grid-gap: 20px;
25 gap: 20px;
26}
27
28.spaced-grid {
29 grid-column-gap: 40px;
30 column-gap: 40px;
31 grid-row-gap: 20px;
32 row-gap: 20px;
33}
34```
35
36## Usage
37
38Add [PostCSS Gap Properties] to your project:
39
40```bash
41npm install postcss-gap-properties --save-dev
42```
43
44Use [PostCSS Gap Properties] to process your CSS:
45
46```js
47import postcssGapProperties from 'postcss-gap-properties';
48
49postcssGapProperties.process(YOUR_CSS /*, processOptions, pluginOptions */);
50```
51
52Or use it as a [PostCSS] plugin:
53
54```js
55import postcss from 'postcss';
56import postcssGapProperties from 'postcss-gap-properties';
57
58postcss([
59 postcssGapProperties(/* pluginOptions */)
60]).process(YOUR_CSS /*, processOptions */);
61```
62
63[PostCSS Gap Properties] runs in all Node environments, with special instructions for:
64
65| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
66| --- | --- | --- | --- | --- |
67
68## Options
69
70### preserve
71
72The `preserve` option determines whether the original `gap` declaration should
73remain in the CSS. By default, the original declaration is preserved.
74
75[css-img]: https://cssdb.org/badge/gap-properties.svg
76[css-url]: https://cssdb.org/#gap-properties
77[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-gap-properties.svg
78[cli-url]: https://travis-ci.org/jonathantneal/postcss-gap-properties
79[git-img]: https://img.shields.io/badge/support-chat-blue.svg
80[git-url]: https://gitter.im/postcss/postcss
81[npm-img]: https://img.shields.io/npm/v/postcss-gap-properties.svg
82[npm-url]: https://www.npmjs.com/package/postcss-gap-properties
83
84[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters
85[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
86[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
87[PostCSS]: https://github.com/postcss/postcss
88[PostCSS Loader]: https://github.com/postcss/postcss-loader
89[PostCSS Gap Properties]: https://github.com/jonathantneal/postcss-gap-properties
Note: See TracBrowser for help on using the repository browser.