Powerful Flexbox based Grid System for modern browsers.

https://tsuyoshiwada.github.io/lime-grid.css/

Table of Contents

• Install
• Usage
• Customize
• Changelog
• Contribute
• License

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

<linkrel="stylesheet" href="/path/to/lime-grid.min.css">

Once you can include the file, let's build the HTML with reference to the document.

<divclass="container"><divclass="row row-xs-center"><divclass="col-xs-12 col-sm-12 col-md-8 col-lg-4 col-xl-4"></div><divclass="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.

• postcss-import
• postcss-custom-properties
• postcss-calc
• postcss-custom-media

Optional (recommend)

Although not required, we recommend using the following plugin.

• postcss-flexbugs-fixes
• autoprefixer

Set your options

1. Include CSS Variables and Custom media.
2. Override variables.
3. 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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Run $ npm test
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :D

Bugs, feature requests and comments are more than welcome in the issues.

License

MIT © tsuyoshiwada