Created
May 6, 2011 19:40
-
-
Save dhg/959632 to your computer and use it in GitHub Desktop.
This is the Skeleton.gs grid example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 --> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.