Skip to content

Instantly share code, notes, and snippets.

@dhg
Created May 6, 2011 19:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save dhg/959632 to your computer and use it in GitHub Desktop.
Save dhg/959632 to your computer and use it in GitHub Desktop.
This is the Skeleton.gs grid example
<!-- 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 -->
@zefer
Copy link

zefer commented Nov 2, 2011

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)?

@andyhullinger
Copy link

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.

@MakelaMika
Copy link

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