Gridly-适用现代浏览器的轻量级网格系统

gridly

Gridly-适用现代浏览器的轻量级网格系统

You don't need monolithic CSS frameworks for simple grid systems. ~100 bytes of CSS can save your life.

Usage

In the dist directory there are three minified files:

• gridly-core.min.css(105 B): just the Gridly core including same-width column support and mobile responsive support.
• gridly-col-widths.min.css(115 B): the custom width columns
• gridly.min.css(165 B): the previous two files' content put together

If you need to support more browsers, you can use the prefixed versions. They're located in dist/prefixed . They're ~1.8× the size of their counterparts.

Browser Support

Gridly supports browsers that implement the Flexible Box Layout Module.

As of December 2015, browser support for flexbox is 81.27% for unprefixed, and 95.44% for prefixed.

Available on CDN!

Gridly is available on cdnjs.com. Check it out .

If you do not need custom width columns, you will probably want to use onlygridly-core.min.cssin your page. If you do need the custom width columns, you have to includegridly.min.cssinstead.

Example

Include the CSS file in your page:

<link rel="stylesheet" href="gridly.min.css" type="text/css" charset="utf-8">

Then you can use the.rowand.colclasses:

</div>

<div class="row">      <div class="col">Two</div>      <div class="col">Column</div>  </div>

This will create two columns having equal widths.

Installation

Check out the dist directory to download the needed files and include them on your page.

Documentation

Thegridly-core.min.cssfile handles two classes:

• row: the row containing columns
• col: the column to put in the row

Because of the flexbox amazing power, the columns will have the same width (as many columns you want / row).

To extend this basic functionality, there is another file:gridly-col-widths.min.css. This adds the following classes:

• col-tenthhas10%width
• col-fifthhas20%width
• col-quarterhas25%width
• col-thirdhas33.3333334%width
• col-halfhas50%width

Like specified above, thegridly.min.csscontains both: the core and the custom widths.

How to contribute

Have an idea? Found a bug? Seehow to contribute.

Runnpm ito install the dependencies. Then, you can run the npm scripts usingnpm run <script-name>.

Runnpm run releaseto recreate all thedistfiles.

Where is this library used?

If you are using this library in one of your projects, add it in this list.

• showalicense.com –A site to provide an easy way to show licenses and their human-readable explanations. (source)

项目主页：http://www.open-open.com/lib/view/home/1450790400401