Posted in CSS Free Resources

Waffle Grid Is Easy to Use and Lightweight Grid System

Waffle Grid Is Easy to Use and Lightweight Grid System Posted on March 13, 2017Leave a comment

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

Waffle Grid Is Easy to Use and Lightweight Grid System
Best WordPress Hosting

Are you looking for an easy to use, responsive and lightweight grid system to design your next project? You can try Waffle. There could be various reasons why should you try a new lightweight CSS grid system in place of your existing heavy CSS framework.

The Waffle Grid system is a lightweight CSS grid system that comes in the only 7kb minified CSS file. The grid system offers responsive and easy to customize grid to suit your needs.

Waffle Grid

Advertisement

By default, it has two breakpoints at 840px for medium devices and 480px for small devices. If you need more, you can add more. The waffle grid system was written in sass.

How to Use Waffle Grid System

Download the CSS file and include in the web page where you want to use it. Now remember these points.

  • use the .grid class for defining the grid
  • use the .row class for defining a row
  • use the .col class for defining a column
  • use a .col-n-of-p class to define the width, where n-of-p defines how wide the column should be

Example

Read More

advertisement

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!