Lightgrid

A grid framework for the bold. Built on top of normalize.css, less and gulp. Borrowing the best from bootstrap grids, Andy taylor's 1140px grid system and modular scale typography, lightgrid has got the working of a major framework but with none of the fat.

Download

Download the latest version from github or fork the repo. Note that this version(3.x.x) contains breaking changes.

Download latest Fork the repo

You can also pull the repo from bower:

bower install lightgridcss -S

Documentation

Philosophy

Lightgrid is designed to be lightweight and extendable. Clocking in at 6kbs minified, lightgrid is pretty small. However the main power of lightgrid lies in extending it.

The best way of using lightgrid is to integrate the less files in your build system. Say you want the default grid along with a grid which collapses at 480px instead of the usual 768px. In this scenario, you would create a new class, say .col-md- and call the .grid(), .offset and .break(480px) mixins inside it.

Compatibility

Lightgrid is compatible in all evergreen browsers and until ie9.

Directory structure

The core of lightgrid is divided into 10 .less files. Additionally, you'll also have a gulpfile to automate less compilation.

First, download lightgrid. Next, run npm install inside the directory(Install nodejs if you haven't before this). Now run gulp and start adding your own code in the less files.

This is the contents of the less folder:

Grid

Lightgrid now comes with a redesigned grid. From now on, it has a defined gutter of 10px instead of the default 2% gutter. Due to this, we recommend placing your elements inside the .col-{size} element.

The redesigned grid also comes with two utility classes for the grid system. Adding .reverse to .row will reverse the layout of all the columns inside that row.
Adding .no-gutter to .row will remove the gutter from the row and the columns inside it entirely. This is useful for designing edge-to-edge layouts and form fields.

.col-4
.col-4
.col-4
.col-8
.col-4
.col-4.offset-4
.col-4
Using .row.no-gutter
.col-8
.col-2
.col-2
Using .row.reverse
.col-8
.col-2
.col-2

Typography

Typography is heavily revamped and now can be controlled via the @ratio variable to generate font sizes in proper ratios. Take a look at http://www.lauradhamilton.com/the-golden-ratio-and-typography for more information about using ratios in typography.

Also, the body and header font weights and styles are very specific and can be controlled from config.less
Other minor typographic changes involve using ems wherever possible and controlling the body line height via another less variable.

The default font size is 16, the default line height is 1.375 and the default ratio is 1.3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Bold Small Italic

Paragraph Lorem ipsum ...

hr

Media queries

Lightgrid now contains five media queries defiened as variables inside config.less

These queries are referenced inside media-queries.less where you can use them. The default breakpoint for flattening the grid is at 768px(@screen-md)

Forms

Unlike the previous version, form styling has been completely removed and only a couple of styles are present to align the inputs and buttons.

Credits

Lightgrid was originally inspired by Andy Taylor's 1140px grid system. Since then, the web design world has come a long way and traditional grid systems have evolved as well as the frameworks powering them.
This project was made possible by less, gulpjs, npm and bower.