Hive Scss Responsive Grid Layout

Cells and nested cells experiment

Just some test to understand how hive respond to nested cells. What's happen when children are displayed on mobiles or in a media query break up?

Back to the main demo page

Download

12 columns grid with children

This is some content in the main hive, no cells declared. This has 10px padding

Scenario 1: An header with menu

This is content of the 12 columns cell with 10px padding. I want now to put 4 cells (4 x cell_3 as we are in a 12 columns hive). The blue UL and olive LI have 3px padding

  • a cell_3 item
  • a cell_3 item
  • a cell_3 item
  • a cell_3 item

Scenario 2: a 2 columns layout with 2 columns in the first one on the left side

I'm giving 10px padding to all elements just to show'em better and to see how padding doesn't matter with columns' width

The column on the left with 2 columns inside 50% width (cell_6)
This is the first subcolumn
This is the second subcolumn
The column on the right

Scenario 3: a three column layout with header with menu, aside with menu and footer

I'm giving 10px padding to all elements justo to show'em better and to see how padding doesn't matter with column width

cell_12 header
cell_6 article
cell_3 column
cell_3
Fork me on GitHub