Skeleton framework 12 or 16 columns ?

[pwired]

Hi,

I am setting up a blog with Ryan's blog profile and am digging the skeleton framework.

Some confusion here. On the skeleton grid example it shows 12 columns,

http://www.getskeleton.com/#grid

but if you click underneath on the code example link it shows 16 columns

<!-- Give column value in word form (one, two..., twelve) -->

<div class="sixteen columns">

<h1>Full Width Column</h1>

</div>

 

Looks like skeleton is a 16 columns grid and not 12 as shown in the example.

 

Also can someone tell me in easy words what they mean with

alpha and omega in skeleton ?

[Raymond Geerts]

I dont know skeleton, but taking a quick glimpse at the HTML of the site it looks like its a 16 column grid.

But instead of using percentual measurements for the grid width it uses a fixed pixel width. The media queries set a different width for the grid elements (one, two, etc.)

So since, on a wide screen looking at the site its a left sidebar of 3 columns width and a content part of 12 columns with an offset of 1 column makes it a total of 16. Thats why the example in the content column has a width of 12 columns.

| 3 columns | 1 column offset | -------- 12 columns -------- |

[pwired]

Hi Raymond, what you write makes a lot of sense, thanks.

I have to play around more with skeleton to work it out.

[NooseLadder]

I use skeleton all the time. The std package is definitely 16 cols. I think Ryan added extra @media screen for a minimum width of 1200px for larger screens to the files supplied with the blog profile?

Once you get the hang of columns, offsets, one-third columns etc, it's a breeze.

[kongondo]

Or you can just use PocketGrid CSS (grid system only) and have any number of columns you want...   

[pwired]

Does anyone know why the skeleton grid was chosen for the processwire blog profile ?

[kongondo]

Does anyone know why the skeleton grid was chosen for the processwire blog profile ?

Yes...read Ryan's reasons from here downwards...especially post #27

Edited August 7, 2014 by kongondo

[pwired]

I've also added a 1200px view (something that Skeleton doesn't come with) so that this profile has a nice "wide" view, in addition to a normal desktop, tablet and mobile view.

Thanks kongondo.

I guess this also answers my question about "alpha" and "omega" in skeleton.