Bear

For Super Simple Responsive Content

What's all this, then?

Bear is a responsive CSS tool (one might call it a grid or framework) for nice, clear presentation of content. No fuss. No frills.

Why use bear?

There are a lot of CSS grids and frameworks available already, and each has its own merits. Bear isn't for folks who need a million columns or layouts; it's about stripping back and prioritising content. One or two columns for desktop and tablet, stacked to one for mobile.

How does it work?

It couldn't be easier. You've got one main column, and inside that you can have two sub-columns with a good, clear gutter. Make the window smaller than 720px wide and it all becomes one column. The markup's a breeze, too:

<div class="mama-bear">
  <div class="baby-bear">
    Mind-blowing content.
  </div>
  <div class="baby-bear">
    Yet more genius.
  </div>
</div>

The layout

This is how Bear is structured. This page is built with it, so if you're on a large screen, resize the browser to see how it works for smaller screens.

mama-bear

baby-bear

baby-bear

Anything else I should know?

Bear makes use of media queries, so it won't fold up into one column on IE8 and below. Images will fill their container nicely, so don't specify any fixed dimensions unless you have to.

One other thing. To keep things simple, Bear uses .baby-bear + .baby-bear to float the second column right. Therefore, things will go awry if you use 3 or more consecutive .baby-bear elements, so keep that in mind!

Image example

Bear!

Download

I'm keen for folks to use this in their own projects, and I welcome suggestions for tweaks and improvements.

Download on Github