Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeffwcx/layit.css
Simple CSS Layout Framework. Make the use of Flexbox easier.
https://github.com/jeffwcx/layit.css
css framework layout scss
Last synced: about 1 month ago
JSON representation
Simple CSS Layout Framework. Make the use of Flexbox easier.
- Host: GitHub
- URL: https://github.com/jeffwcx/layit.css
- Owner: jeffwcx
- License: mit
- Created: 2018-01-27T15:06:41.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-01T06:26:02.000Z (over 6 years ago)
- Last Synced: 2024-10-12T18:31:51.921Z (about 1 month ago)
- Topics: css, framework, layout, scss
- Language: CSS
- Homepage: https://jeffwcx.github.io/layit.css/
- Size: 70.3 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-EN.md
- License: LICENSE
Awesome Lists containing this project
README
# layit.css
[English](./README-EN.md) | [中文](./README.md)
Simple Layout Framework Based On Flexbox.
## Install
```
npm i -S layit.css
```
### import scss
```scss
@import "~layit.css";
```
> If you use sass, please add [autoprefixer](https://github.com/postcss/autoprefixer) in your build system.
### import css
```scss
@import "~layit.css/lib/layit.css";
```
## Usage
+ [row layout demo](https://jeffwcx.github.io/layit.css/examples/row.html)
+ [grid system demo](https://jeffwcx.github.io/layit.css/examples/grid.html)
+ [col layout demo](https://jeffwcx.github.io/layit.css/examples/col.html)
## Customization
+ change `l-` prefix to `layout-`
```scss
$prefix: "layout-";
@import "../../../src/index";
```
+ grid system
change unit number
```scss
$units: 4;
@import "../../../src/index";
```
change gap
```scss
$level: 2;
$rate: 5px;
@import "../../../src/index";
```
## Copyright
Copyright (c) 2018 Jeff Wang. See [LICENSE](./LICENSE) for details.