A smart grid framework,
not just for grids

Features

Crow is made standalone which means you can apply to any of your current
markup/web project. Crow essentially stands for column-row.

  • No tables, no absolute positioning, no floats, no clearfix'es

  • Fly functionality automatically sets widths of child elements

  • Works in all modern browsers, smartphones, tablets and IE8+

  • Smart center-center alignment (if desired)

  • Responsive and configurable

  • Endless possibilities – grids, sliders, dot-navigation, side-by-side blocks, center-center'ing

Setup & download

Crow is just a regular .css-file, include in in your <head>-tag and you are ready to go!
Fly functionality is not working properly for IE8 therefore crow-ie.js is required.

Usage

Example 1: basic usage
1
2
3
<div class="crow">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Example 2: basic 12 span-grid
1
2
3
<div class="crow">
  <div class="ws-2">1</div>
  <div class="ws-8">2</div>
  <div class="ws-2">3</div>
</div>
Example 3: % widths
1
2
3
<div class="crow">
  <div class="w-35">1</div>
  <div class="w-50">2</div>
  <div class="w-15">3</div>
</div>
Example 4: autowidths with fly
1
2
3
<div class="crow fly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Example 5: remove padding (gutter)
1
2
3
<div class="crow fly no-gutter">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Example 6: vertical alignment
1
2
3
<div class="crow fly" style="height:150px;">
  <div>1</div>
  <div class="down">2</div>
  <div class="up">3</div>
</div>
Example 7: normal grid behaviour
1
2
3
<div class="crow fly up" style="height:100px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Example 8: center-centering
<div class="crow" style="height:100%;">
  <img src="crow.jpg" alt="" />
</div>

Tips & things to know

  • Wrap blocks of elements by using a div with the class ".nest"
  • Text directly put into a ".crow"-element will dissapear, due to "font-size:0;" rule (this shouldn't be done anyway)
  • Crow bundles both .less and .styl files for pre-processing. Pick your style! To make something act Crow'y simply use the less mixing .crow() or the stylus function crow(). In the same manner you can .uncrow() / uncrow() something.
  • For semantic markup it's recommended to use the .styl file and call stylus "@extend .crow .ws-5" (span 5/12 as an example). Same goes for the .less-counterpart.
  • The classes to keep in mind when working with Crow is (also see Usage): .nest, .crow, .fly, .up, .down, .ws-{1to12}, .w-{1to100} & .no-gutter
Copyright © 2016 Kim Korte
All rights reserved

The developer

I go by the name of Kim Korte. I'm a web developer & code enthusiast living in Sweden.
@kortekim
korte.kim

Other projects