Waffles : A CSS Grid

Basic Sizing

Below are examples of the most basic way to implement porportion

If you've ever used a grid before, this part will look familiar. Make note most of ths similarities will probably stop here. Simply put, the grid is divisible by 12 equal parts. 12 was chosen because it is divisible by 1,2,3,4,6

This is the best way to achive porportional containers such as say 25% one side, 75% the other. Unlike many fixed grids you migth have used, these are nestable by n levels

If you want a little preview of what is to come, drag the window. Notice the grid doesn't suddently pop to various sizes- its fluid the entire time. This is a core value of waffles: fluid actually means fluid, not 'poppy'.

You can observe the current media query by looking at the resolution in the lower corner. the portions collapse at different rates. This is another core value of waffles. Responsive shouldn't mean "omg look out out! here comes 960px!" and then suddenly every div snaps to 100%.

Responsive should really mean Adaptive and preserve as much sense of porportion as possible.

One more thing: Mouse over the waffle-bricks and see what classes are applied

You will notice 2 classes, w-alpha and w-omega These classes change context depending on the siutation. Right now,w e are wirkign with fluid porportaions, so alpha and omega essentially add ro remove margins from the left and right side respectively, and also 'clear' the div.

12ao
11a
1o
a0 w-alpha
2 w-omega
9 w-alpha
3 w-omega
8 w-alpha
4 w-omega
7 w-alpha
5 w-omega
6 w-alpha
6 w-omega
5 w-alpha
7 w-omega
4 w-alpha
8 w-omega
3 w-alpha
9 w-omega
2 w-alpha
10 w-omega
1 w-alpha
11 w-omega
12 a o