https://github.com/dimchtz/postcss-flexup
PostCSS plugin to make flex cooler.
https://github.com/dimchtz/postcss-flexup
Last synced: about 2 months ago
JSON representation
PostCSS plugin to make flex cooler.
- Host: GitHub
- URL: https://github.com/dimchtz/postcss-flexup
- Owner: DimChtz
- License: mit
- Created: 2024-03-13T08:36:26.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-16T23:34:33.000Z (about 2 years ago)
- Last Synced: 2024-10-30T07:52:12.488Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 202 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Flexup [
](https://github.com/postcss/postcss)
   
[PostCSS](https://github.com/postcss/postcss) plugin to make flex cooler.
## Installation
```console
npm install postcss-flexup
```
## Usage
Basic example with `gulp`
`gulpfile.js`
```js
gulp.task('buildcss', function () {
return gulp
.src('./src/main.css')
.pipe(
postcss([
require('postcss-flexup')
// ... other postcss plugins
])
)
.pipe(gulp.dest('./dist'));
});
```
`src/main.css`
```css
.parent-1 {
flexup: _;
}
.parent-2 {
flexup: center 12px;
}
.parent-3 {
flexup: center/_ wrap 12px;
}
.parent-4 {
flexup: center/_ 12px/16px;
}
.parent-5 {
flexup: center/_ _/16px -col;
}
.parent-6 {
flexup: !center/_ wrap 12px;
}
.parent-7 {
flexup: !between/!center wrap !12px;
}
.parent-8 {
flexup: center/_ !-col;
}
```
will give:
```css
.parent-1 {
display: flex;
}
.parent-2 {
display: flex;
justify-content: center;
align-items: center;
column-gap: 12px;
row-gap: 12px;
}
.parent-3 {
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 12px;
}
.parent-4 {
display: flex;
justify-content: center;
column-gap: 12px;
row-gap: 16px;
}
.parent-5 {
display: flex;
justify-content: center;
row-gap: 16px;
flex-direction: column-reverse;
}
.parent-6 {
display: flex;
justify-content: center !important;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 12px;
}
.parent-7 {
display: flex;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap;
column-gap: 12px !important;
row-gap: 12px !important;
}
.parent-8 {
display: flex;
justify-content: center;
flex-direction: column-reverse !important;
}
```
## Documentation
Syntax:
```css
flexup: / / ;
```
Available values
- <justify-content>: `center` | `start` | `end` | `between` | `around`
- <align-items>: `center` | `start` | `end` | `between` | `around`
- <column-gap>: any value (e.g. `12px`)
- <row-gap>: any value (e.g. `12px`)
- <flex-direction>: `row` | `-row` | `col` | `-col` ("-" before row/col means reverse)
- <flex-wrap>: wrap | nowrap
You can omit any value with `_` (e.g. `_/center`, `12px/_`)
You can write `center` instead of `center/center` when the value is the same
You can add `!important` with `!` in from of any value
- `flexup: !center;`
- `flexup: around/!center !wrap;`
- `flexup: !around/_ wrap 16px !row;`
- `flexup: !around/_ wrap 12px/_ !-col;`
If you only need `display: flex;` you can write: `flexup: _;`
## CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
## [Changelog](CHANGELOG.md)
## [License](LICENSE)