Laurensvanochten.de

Blog | Lightweight Responsive CSS-Grid

Lemonade.im: A Great and Customizable CSS-Grid

Most people that have ever put together a website have worked with a grid. Even the most basic website uses a grid of some sort. However for the more complex situations most people opt for more extensive and encompassing grid frameworks. Lemonade is a light-weight CSS grid that will offer you significant structure for your next project without getting in the way.

The best thing about Lemonade.im is that it is only 873 Bytes. Compared to popular CSS-Grids like Skeleton (11.2 KB), Simple Grid (3.48 KB) and 960.gs (9.75 KB) lemonade is a real light-weight.

However, don't be fooled by its size. Lemonade offers great flexibility and will add exactly the right amount of structure to your project. Of course this still depends on your personal preference as well. There are people that would like their CSS-Grid to take care of everything, and other people that expect their grid to not get in the way and work in the background.

If you are one of the people that want a full fledge grid that has you covered on all aspects I do think you are better off using Bootstrap, or Skeleton. However if you find yourself constantly tweaking and adjusting your grid system, Lemonade might be it for you.

The real beauty of Lemonade is its simplicity. The basic HTML structure for a simple two column layout will look something like the below.

<html>
<body>
    <div class="container frame">
        <div class="bit-2"></div>
        <div class="bit-2"></div>
    </div>
</body>
</html>

Basically you set a container and add a .frame class. Within your container/frame you can you define the 'bits'. In the above example I defined two .bit-2 divs that will take a width of 50%.

To give a bit more insight into what 'widths' are supported out the box, see the list below:

.bit-1  {width: 100%;}
.bit-2  {width: 50%;}
.bit-3  {width: 33.33%;}
.bit-4  {width: 25%;}
.bit-5  {width: 20%;}
.bit-6  {width: 16.6666666667%;}
.bit-7  {width: 14.2857142857%;}
.bit-8  {width: 12.5%;}
.bit-9  {width: 11.1111111111%;}
.bit-10 {width: 10%;}
.bit-11 {width: 9.09090909091%;}
.bit-12 {width: 8.33%;}

The best thing about Lemonade is that literally takes 2 seconds to add new 'widths' to your grid. In my case I like to have the option to use a 60/40 and 75/25 division in my layouts and hence have added the following lines to my version of Lemonade.

.bit-25 {width: 25%;}
.bit-40 {width: 40%;}
.bit-60 {width: 60%;}
.bit-75 {width: 75%;}

Responsive?

Lemonade uses CSS mediaqueries to make the grid responsive. There are 3 different mediaqueries included in Lemonade.

Large (tablet/desktop - 800px to 1100px)

@media (min-width: 50em) and (max-width: 68.75em)

Medium (tablet/mobile - 480px to 800px)

@media (min-width: 30em) and (max-width: 50em)

Small (mobile - smaller than 480px)

@media (max-width: 30em) {

I have found the mediaqueries in Lemonade to work very well for most of the situations. For me this mainly relates to the thought behind the breaking points. Joe Richardson thoughts behind this where "what do you usually see on desktop that changes dramatically on mobile? Mainly inline content that becomes stacked content - so I had to think what is more than likely going to be placed side-by-side and what will be stacked on top of each other"

Where Lemonade breaks the grid makes perfect sense in most of the cases and I have found only a few occasions where I manually had to overrule the breakingpoints.

The future

Will we still be using CSS grids in the near future? Who knows.. With the increasing support for flexbox and the introduction of CSS grid module we might not have any need for grids like Lemonade.im, 960gs, or Skeleton. However for the time being I think people will stick around for a bit. Personally I really like the use of bit-1 and bit-2 in my designs as it provides an easy and instant understanding of the structure. Additionally the provided structure from a grid makes sure that I can start immediately without having to build up a complete framework on beforehand and therefore I don't think people will abandon their grid systems from one day to the other.

In my copy of Lemonade I have added support for flexbox as I really think the possibility of ordering content is such an added value.

The use of flexbox is completely optional, giving me the posibility to leave it out completely if I don't need it. With my small additions to support flexbox a basic html structure would look like below:

<html>
<body>
    <div class="container flexbox">
        <div class="bit-2 flex-2">This div will be ordered 2nd</div>
        <div class="bit-2 flex-1">this div will be ordered 1st</div>
    </div>
</body>
</html>

As you can see, in stead of using .frame to wrap around the .bit- elements I wrapped mine using .flexbox.

For the items within the wrapper I decided to use an additional class .flex-, copying the naming convention as we know it from Lemonade.

The above example will result in 2 divs, both 50% width. However the second div will be shown first, followed by the first div in second position thanks the the capability of 'flex-items' to change order.

In order to provide some more control over the ordering of content I also added the possibilty to change the order depending on the screensize/mediaquery.

The below example starts off exactly as the previous one. Two divs of 50% width, the second div comes first, follwed by the first div in second position. However this time by adding .flex-1-sm and .flex-2-sm the two divs will change order once more when the 'mobile mediaquery' kicks in (smaller than 480px).

<html>
<body>
    <div class="container flexbox">
        <div class="bit-2 flex-2 flex-1-sm">This div will be ordered 2nd</div>
        <div class="bit-2 flex-1 flex-2-sm">this div will be ordered 1st</div>
    </div>
</body>
</html>

In order to provide control over the ordering, depending on the screensize, i've used the following naming conventions:

.flex-(nth)-sm
.flex-(nth)-med
.flex-(nth)-lrg

where (nth) will be replaced by an integer to indicate the order in which they are shown. I've added support for ordering up to 8 elements within each flexbox, in case more elements should be ordered you will need to add support by simply adding the required classes to the CSS file.

The added support for flexbox of course also gives us all the other advantages that flexbox brings to the table. You could use align-self to vertically align your content within the wrapper/container/flexbox by simply adding it to the 'flex-items'.

Example

The below example shows a combination of Lemonade.im with Flexbox support.

Resize the screen to below 480px to see the content ordering change

demo

html

<div class="container flexbox">
     <div class="bit-3 flex-2 flex-1-sm box">box 1</div>
     <div class="bit-3 flex-3 flex-2-sm box">box 2</div>
     <div class="bit-3 flex-1 flex-3-sm box">box 3</div>
</div>

CSS

.box:first-child {
    align-self: flex-start;
}

.box:nth-child(2) {
    align-self: center;
}

.box:last-child {
    align-self: flex-end;
}

Downloads

The original copy of lemonade can be downloaded from here, whereas a more detailed tutorial on Lemonade can be found here

In order to seperate the original Lemonade from my own copy I called my version FlexLimo. In case anyone is interest in a copy of Lemonade with Flexbox support, you can find a copy of the CSS here, Github hereand a little demo here

The product was added to your shoppingcart!