Getting Started

Once you have Lemonade installed you will want to add the lemonade.min.css to your HTML file. To achieve this just simply do this:

<link rel="stylesheet" href="css/lemonade.min.css">

Alternatively you can use the pre-made HTML file which is downloaded in the v2.5.zip folder.

Basic Usage

Lemonade currently has two ways to use it. You can either use the pre-made 12 columns or create your own columns, I'll run you through how to use them both.

As far as grid systems go, Lemonade is pretty simple and to understand it is extremely easy. Lets create a 3 column gallery:

<div class="frame">
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
</div>

Premade Columns

Let me run you through each line of this snippet. You may be aware of what a clearfix is, but for those who don't it is known as CSS hack that clears floated elements and aligns them correctly. Lemonade uses a clearfix which is a class called .frame, to successfully create columns you will always need to have a .frame class wrapped around your grid columns.

Next line is .bit-3 which is a column with a width of 33.33%, which allows you to in-line three columns. Always try to avoid adding class names to grid columns.

Creating Columns

Creating columns is really simple if you have basic knowledge of Sass but if you don't, I guess you've got to learn somewhere.

.bit-75 {
    width: $full - 25%;
}

.bit-25 {
    width: $full - 75%;
}

Let me explain this in a little more detail. $full is basically a Sass variable of 100%, so by creating these custom columns we are basically taking 100% and subtracting a number. Creating the columns are really easy as long as they equal to 100% inline.

---

Articles

Build a Freshly Squeezed Responsive Grid System

---