Ingrid – A Fluid CSS layout System

Ingrid is a fluid, lightweight and extendable css layout system. Ingrid‘s main focus is on prototyping and wire-framing page layouts. It is created by Robert Piirainen.

Features

  • Responsive
  • Lightweight
  • SASS version included

Usage

Here is an example for making a four column grid.

<div class="ingrid in-fourths">
      <div class="unit">
        <div class="box">
          <h2>unit</h2>
          <p></p>
        </div>
      </div>
      <div class="unit">
        <div class="box">
          <h2>unit</h2>
          <p>Some text</p>
        </div>
      </div>
      <div class="unit">
        <div class="box">
          <h2>unit</h2>
          <p>Some text</p>
        </div>
      </div>
      <div class="unit">
        <div class="box">
          <h2>unit</h2>
          <p>Some text</p>
        </div>
      </div>
    </div>

Browser support

  • IE8 +
  • All modern browsers (yay)
  • IE6-7 are not supported

Ingrid Demo

Notice: You can edit the pen above to get an understanding on how it works.