Minimal Responsive Grid Layout System with Pure CSS – Lemonade.css

Preview:

Description:

Lemonade.css is a super tiny CSS/LESS/SCSS library that helps you create a fully responsive & flexible grid layout with ease.

How to use it:

Include the required lemonada.css in the head section of your web page.

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

Create a multi-column grid layout following the Html structure like this:

<div class="frame">
  <div class="bit-1">
    <div class="box">1</div>
  </div>
</div>

<div class="frame">
  <div class="bit-2">
    <div class="box">1/2</div>
  </div>
  <div class="bit-2">
    <div class="box">1/2</div>
  </div>
</div>

<div class="frame">
  <div class="bit-3">
    <div class="box">1/3</div>
  </div>
  <div class="bit-3">
    <div class="box">1/3</div>
  </div>
  <div class="bit-3">
    <div class="box">1/3</div>
  </div>
</div>

...

The sample CSS to style the grid boxes.

.box {
  text-align: center;
  background: #27ae60;
  color: #fff;
  padding: 15px 0 15px 0
}

Changelog:

02/07/2016

• Cleanup