README
Powerful Flexbox based Grid System for modern browsers.
https://tsuyoshiwada.github.io/lime-grid.css/
Table of Contents
Install
To install the stable version.
$ npm install lime-grid.css --save
# or
$ yarn add lime-grid.css
Or download lime-grid.min.css.
Usage
via npm
@import 'lime-grid.css';
via Download file
<link rel="stylesheet" href="/path/to/lime-grid.min.css">
Once you can include the file, let's build the HTML with reference to the document.
<div class="container">
<div class="row row-xs-center">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-4 col-xl-4"></div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-4 col-xl-4"></div>
</div>
</div>
See Documentation.
Customize
You can do custom build using PostCSS.
Setup
Required
The following plugins is necessary for the build.
Optional (recommend)
Although not required, we recommend using the following plugin.
Set your options
- Include CSS Variables and Custom media.
- Override variables.
- Include Grid System.
Example:
@import 'lime-grid.css/src/variables.css';
/* Change options */
:root {
--container-width-xs: auto;
--container-width-sm: 540px;
--container-width-md: 720px;
--container-width-lg: 960px;
--container-width-xl: 1150px;
}
@import 'lime-grid.css/src/grid-system.css';
/* ...Your stylesheet */
For details of CSS variables, see src/variables.css.
Changelog
See CHANGELOG.md
Contribute
- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Run
$ npm test
- Push to the branch: git push origin my-new-feature
- Submit a pull request :D
Bugs, feature requests and comments are more than welcome in the issues.