lime-grid.css

Powerful Flexbox based Grid System for modern browsers.

Usage no npm install needed!

<script type="module">
  import limeGridCss from 'https://cdn.skypack.dev/lime-grid.css';
</script>

README

LIME GRID

Build Status npm version

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

  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