How do I divide the Skeleton CSS boilerplate into 5 columns?

Question

I would like to start with the Skeleton CSS boilerplate from http://getskeleton.com/ It's the first time I have designed and scripted with a 960gs template, and I totally don't get it.

According to a few tutorials, I understand that width of the page consists of 16 column units. For example, you can divide your page into ten-unit column and a six-unit column:

I took the following code straight away from the skeleton layout.css:

 /* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }

The problem is that I would like to divide my page into 5 parts (with margin, of course)... But how? I could use three columns 5 times, but that would count up to a total of 15 columns. Is there any way to do this?

There is a similar question about Bootstrap: http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap/12335051 — Pavlo, Sep 10 '12 at 12:32

score 0 · Answer 1 · answered Mar 26 '14 at 14:49

These are the best tutorial series for Skeleton I have found. They really helped me: https://www.youtube.com/watch?v=QFYkSqBvCAs

However, if you go to the Skeleton homepage there is a grid system demo on there. Just inspect the source, which gives you:

<div class="five columns alpha">Five</div>

Hope this helps :)

score 0 · Answer 2 · answered Apr 25 '14 at 12:45

You won't be able to get five columns from the standard skeleton version 1.2. BUT you could add some lines to skeleton.css:

/* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }
.container .one-fifth.column                { width: 176px; }    /* <--- Right here */

Skip down to here:

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                                  { width: 768px; }
    .container .column,
    .container .columns                         { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }

    .container .one.column,
    .container .one.columns                     { width: 28px; }
    .container .two.columns                     { width: 76px; }
    .container .three.columns                   { width: 124px; }
    .container .four.columns                    { width: 172px; }
    .container .five.columns                    { width: 220px; }
    .container .six.columns                     { width: 268px; }
    .container .seven.columns                   { width: 316px; }
    .container .eight.columns                   { width: 364px; }
    .container .nine.columns                    { width: 412px; }
    .container .ten.columns                     { width: 460px; }
    .container .eleven.columns                  { width: 508px; }
    .container .twelve.columns                  { width: 556px; }
    .container .thirteen.columns                { width: 604px; }
    .container .fourteen.columns                { width: 652px; }
    .container .fifteen.columns                 { width: 700px; }
    .container .sixteen.columns                 { width: 748px; }

    .container .one-third.column                { width: 236px; }
    .container .two-thirds.column               { width: 492px; }
    .container .one-fifth.column                { width: 137.6px; }    /*  <--- And Right der */
}

I omitted some lines btw. Then just throw in one of these:

<div class="column one-fifth alpha">1</div>
<div class="column one-fifth">2</div>
<div class="column one-fifth">3</div>
<div class="column one-fifth">4</div>
<div class="column one-fifth omega">5</div>

And done, will add example in the near future. Personally I think 5 column grids are just too narrow and stay away from anything above 4 column when possible.

score 0 · Answer 3 · answered Jul 19 '15 at 12:35

Thought I'd update this with my solution.

For the new Skeleton framework (currently V2.0.4) with percentage based widths, I was experimenting and found adding this worked for me.

.col-5.columns { 
    width: 16.3333333333%;
    padding-right: 10px;
}

Just add this in place of the normal column classes e.g.,

<div class="col-5 columns">

The padding is just a preference for my particular case.

Haven't found any problems with it yet though.

How do I divide the Skeleton CSS boilerplate into 5 columns?

3 Answers3

Linked