malarkey/320andup

Specifying Column Widths in CSS

Closed this issue · 0 comments

I may be missing it, but I don't see the standard column widths specified in the CSS file like they are in the Less framework. I think it'd be handy. I've added them to my own stylesheets for the sizes I'll be using. It may be helpful to add them to the standard core.

Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.

cols 1 2 3
px 68 160 252
% 26.98 63.49 100

Wide Mobile Layout: 480px.
Gutters: 24px.
Outer margins: 22px.

cols 1 2 3 4 5
px 68 160 252 344 436
% 15.6 36.7 57.8 78.9 100

Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.

cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712
% 9.55 22.47 35.39 48.31 61.23 74.16 87.08 100

Desktop Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024PX: 32px.

cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896
% 7.59 17.86 28.13 38.39 48.66 58.93 69.2 79.46 89.73 100