A smart grid framework,
not just for grids

Features

Crow essentially stands for column-row.
It's mainly a smart grid framework, but I'd like you to think of it as a smart layout tool.

  • No tables, no absolute positioning, no floats and no clearfix'es.
    No flexbox (unless wanted)

  • Adding class ".fly" automatically sets the width of child elements.

  • Works in all modern browsers, smartphones, tablets and IE8+.
    IE11+ if flexcrow is used.

  • Smart center-center alignment (if desired)

  • Responsive and configurable

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

Use with flexbox

I think we all love flexbox when it comes to layouts. I know I do. However back in 2013 (when the first version of crow was made) flexbox wasn't really a thing. Flexbox is not 100% ready for the world yet, unless you build websites/webapps only targeting the newest version of things. According to caniuse.com flexbox is only supported in IE11+.

When I created crow I did so to tackle a whole bunch of problems that comes with a traditional grid framework. Today crow runs on production environments on over 20 websites with great success.

I'm happy to announce Flexcrow
Oh jeez.. Another hacky-tacky thing?
No! Flexcrow is just crow, built with flexbox. Simple as that.

Why not use barebone flexbox without crow?
Well you can do that, but when you detect that the website you are building are supposed to work in IE9 or Android Browser 4.2 you will be in big trouble. Using flexcrow you can revert back to the old way crow does things in less than 1 second.

Ok. But how do I use it?
Easy. Crow comes as either Less, Sass or Stylus. In the crow/.less/.scss/.styl file you will find a row where it says "crowify()". Change that to "flex-crowify()" and you are done.

Nice! It works like a charm, but am I locked down to crow's way of doing things now?
Of course not. There's no rocket sience here, just regular flexbox declarations with some preset values. Change anything you like. What's even cooler is that flexcrow allows you to do things regular crow wouldn't, like: .crow { > div:nth-child(2) { order: 3; } > div:nth-child(4) { align-self: stretch; } }

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: add padding (gutter)

1
2
3
<div class="crow fly 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

  • If you are creating grids and/or layouts make sure to wrap blocks of elements by using a div with the class ".nest".
  • Text directly put into a ".crow"-element will disapear, due to "font-size:0;" rule (this does not apply to flexcrow implementations).
  • Crow bundles .less, .scss and .styl files for pre-processing. Pick your style! To make something act Crow'y simply use the less mixing .crowify(), sass mixin crowify() or the stylus function crowify(). In the same manner you can .uncrowify() / uncrowify() 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/sass-counterparts.
  • The classes to keep in mind when working with Crow is (also see Usage): .nest, .crow, .fly, .up, .down, .ws-{1to12}, .w-{1to100} & .gutter
Copyright © 2022 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