-
-
Save dhg/959632 to your computer and use it in GitHub Desktop.
<!-- The container is a centered 960px --> | |
<div class="container"> | |
<!-- Give column value in word form (one, two..., twelve) --> | |
<div class="sixteen columns"> | |
<h1>Full Width Column</h1> | |
</div> | |
<!-- Sweet nested columns cleared with a clearfix class --> | |
<div class="six columns clearfix"> | |
<!-- In nested columns give the first column a class of alpha | |
and the second a class of omega --> | |
<div class="three columns alpha">...</div> | |
<div class="three columns omega">...</div> | |
</div> | |
<!-- Sweet nested columns cleared by wrapping a .row --> | |
<div class="five columns"> | |
<div class="row"> | |
<div class="three columns alpha">...</div> | |
<div class="two columns omega">...</div> | |
</div> | |
</div> | |
<!-- Sweet nested columns cleared by <br class="clear"> --> | |
<div class="five columns"> | |
<div class="three columns alpha">...</div> | |
<div class="two columns omega">...</div> | |
<br class="clear" /> | |
</div> | |
<!-- Can push over by columns --> | |
<div class="five columns offset-by-one"></div> | |
</div> | |
<!-- Note: To clear columns (both nested and just stacked columns right inside the | |
.container, you can give the parent a class of "clearfix," wrap each row of columns in a | |
"<div class='row'>" or follow the last column in a row with a "<br class='clear'>." They | |
all work and it's up to your personal preference. --> | |
<!-- Interested in a 12 column grid? There is an unofficial project on Github here: https://github.com/offshoot/Skeleton --> |
http://codepen.io/andyhullinger/pen/zEvCq
I'm a design professor using Skeleton in an introductory class to introduce RWD. It helped my novice students immensely to understand how the grid was being applied to columns by adding a few "visible grid .pngs" as a custom class "showgrid" that they could turn on and off while designing.
Not sure it's really appropriate to "fork" the project just to add this small "design debugging feature", but if you find it at all useful I'm happy to provide my .pngs (tweaked CSS) and rationale.
Ok, here's my question :-)
I'm working on Skeleton project where i got 8 units of hexagons (w:100 /h:150) using "two columns" class.
How can i code this section for mobile/ tabs that hexagons slide and reorder nicely (keeping their size) when user resize browser?
/ Mika
Unless I've misunderstood, would line 11 be better worded as "In nested columns give the first column a class of alpha and the last a class of omega" (as per my fork)?