Waffle-grid

一个易于使用的 flexbox 栅格布局系统

暂无中文翻译,

Waffle grid

An easy to use flexbox grid system.

GitHub release Github All Releases License David Travis Built with Gulp

Getting Started

To get the waffle grid system in your web page, simply paste this code into the head of your document,

<link rel="stylesheet" href="https://unpkg.com/waffle-grid/dist/waffle-grid.min.css">
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/waffle-grid/dist/waffle-grid.css">

or you can install the waffle grid system using a package manager like npm

$ npm install waffle-grid
# or
$ bower install waffle-grid

If you want you can still download the waffle grid here.

Docs

<div class="grid">
  <div class="row">
    <!-- For column width, use col-n-of-p. By default, p can be 4, 8, or 12 -->
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- The center class centers the column. -->
    <div class="col col-7-of-12 center"></div>
  </div>
  <div class="row">
    <!-- use col-m- and col-s- as well as m-hide, s-hide, m-only and s-only to make your grid responsive -->
    <div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>
    <div class="col col-3-of-8 col-m-2-of-4 col-s-1-of-2"></div>
    <div class="col col-1-of-8 m-hide"></div>
    <div class="col col-2-of-8 col-m-1-of-4 s-hide"></div>
  </div>
  <div class="row">
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-2"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- Pushes and pulls are used in the same way as col-n-of-p. They can also be responsive, like pull-m-1-of-4 -->
    <div class="col col-1-of-8"></div>
    <div class="col col-2-of-8 push-2-of-12"></div>
    <div class="col col-3-of-8 pull-1-of-12"></div>
  </div>
</div>

The full docs can be found here

Built With

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Made a website using the Waffle grid?

Add the built with waffle-grid badge to your README.md

Built with Waffle Grid

Feel free to send me an email at gruwez.lucas@gmail.com, and I might add your site to an examples section I'm currently working on.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details

Copyright © 2017 lucasgruwez All Rights Reserved.

waffle-grid 暂时没有中文说明

我们期待您参与进来翻译和完善

该操作会锁定该库2天以防止其它用户重复翻译,然后会自动释放

讨论区