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
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;
}
}
Example 1: basic usage
<div class="crow">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Example 2: basic 12 span-grid
<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
<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
<div class="crow fly">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Example 5: add padding (gutter)
<div class="crow fly gutter">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Example 6: vertical alignment
<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
<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>