lime-grid.css: A CSS repository from wadackel

Powerful Flexbox based Grid System for modern browsers.

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

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.

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.

wadackel/lime-grid.css

Table of Contents