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

<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.

• 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