Hive Scss Responsive Grid Layout

What the hive is this?!

We are in the "responsive" Era! So many devices that we cannot design for specific sizes or smartphone/tablets models. Bees are able to build a hive as a pattern based on their number and on the stage they are going to do it. A grid layout should be almost the same. So I wrote some media queries to broke the layout on four different sizes: smartphone portrait, landscape, tablets portrait, desktop and cinema display.

You can also clone the project with Git by running:

$ git clone git://github.com/spleenteo/hive

Have a look to the nested cells demo

Features

  • Fluid and fixed layout (desktop size)!
  • Can change the % of the grid on scss
  • Nested cell ready without alpha/omega
  • pre and post spaces

Link

12 columns grid

cell 12

a cell 12 with children

cell 4
cell 4
cell 4
cell 11
cell 1
cell 10
cell 2
cell 10 with pre 2
cell 10 with post 2
cell 9
cell 3
cell 8
cell 4
This is a "triptyc" section to have three columns with cell_4 from landscape smartphones to biiger
1/3 cell_4
1/3 cell_4
1/3 cell_4
cell 7
cell 5
cell 6
cell 6
cell 3
cell 6
cell DX 3
cell 6
cell 3
cell 3
cell 4
cell 4
cell 4
cell 3
cell 3
cell 3
cell 3
cell 2
cell 2
cell 2
cell 2
cell 2
cell 2
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1

16 columns grid

cell 16
cell 15
cell 1
cell 14
cell 2
cell 13
cell 3
cell 12
cell 4
cell 11
cell 5
cell 10
cell 6
cell 9
cell 7
cell 8
cell 8
cell 4
cell 4
cell 4
cell 4
cell 2
cell 2
cell 2
cell 2
cell 2
cell 2
cell 2
cell 2
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
cell 1
Have a look to the nested cells demo
Fork me on GitHub