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

Like this project?

Please feel free to give the waffle-grid repo a star, and if you want to help support my work, please consider donating.

Built With

• Gulp - Build system
• Sass - Language
• Jekyll - Used for the website

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

Feel free to send me an email at [email protected], 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

• Lucas Gruwez - Initial work - @lucasgruwez
• Jack McNicol - Helped out a lot - @jackmcpickle
• Arthur Guiot - Added js function - @arguiot

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.