First and foremost, the Lovely CSS Framework is not an out-of-box solution. It has been developed to help myself get my work done faster. So don't expect a step by step guide. I guess I'm writing this because I'm afraid that one day I won't remember how I did it...

1. Unzip and copy all the files to a location where you will develop the initial html site.

2. Open the example.html You can see the grid setup in action here.

3. File structure The folder structure has been kept as tidy as possible.

assets This is used to store any content related file or images. Mostly used when the site goes live.

images In this folder you can store all the images used by the site's layout. Anything which is need in the design.

dev-assets Contains all the necessary psd & pdf templates

lovely-css The complete framework is located in this folder. So basically that's all you need to run a site...

4. Setting up the grid Just add a class of "gridContainer-number of columns" to a div. Available column setups are: 2,3,4,5,6,8,10,12,16

```

```

5. Setting the gutters By default the Lovely CSS framework does not have gutters on the columns. But this is easily changed just by adding an additional "pad-gutter width" class to the div. Available gutter widths are: 5,10

```

```

6. Adding grid columns You can add as many columns as you like, so long as they all add up to the total amount of columns you have selected in the "gridContainer" class.

```

```

You can also use numbers to set the grid classes, like so

```

```

7. Nested girds We now support nested grids, which work just like normal grids, only that you have to add a specific class to the first and last column...

```

```

8. Multiple grids The Lovely CSS Framework also support multiple grids, which means you can have more than one grid layout on a single page.

```

```

Basically, that is the grid setup. Understanding how the grid functions is basic knowledge. Get grip of the grid, and Bob's your Uncle...