Making the Skeleton Grid System Wider

Question

I'm curious if anyone out there has ever converted the skeleton grid system to have a wider maximum width. 960px is a bit small these days and I'm hoping to get it closer to 1100px.

If anyone has done this before or has any tips for getting started with the change, that would be amazing!

Have you seen this [GetSkeleton1200 Github repo](https://github.com/theresponsiveness/GetSkeleton1200)? It's 1200 pixels wide but you will probably find some information on how they made it. And maybe 1200 pixels is even better for your needs? — Vadiem Janssens, Dec 28 '12 at 13:10

score 4 · Answer 1 · answered Apr 23 '16 at 03:11

4

In the skeleton.css file, under the Grid section change

.container {
    max-width: 960px;
}

to

.container {
    max-width: 1200px;
}

or whatever size you prefer. This is the simplest solution and worked for my situation.

answered Apr 23 '16 at 03:11

Christopher Miles

89
5

If I want the site to span to the full width of the screen always, is it ok to remove the max-width? – user3607282 Aug 11 '17 at 05:41
@user3607282 Yes, max-width sets an upper bound so remove it and the site will get as big as the screen. – Christopher Miles Aug 16 '17 at 20:33
I would only do this as a @media query for screens above 1000px, and not change the source container in the Grid section. – Andy Jun 17 '20 at 06:08

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Two options:

1200px (Nicolas Poliquin, last updated May 2013)
1280px (Ian Yates, June 2012, also includes fluid option with no nesting)

They both simply extend the bog standard 960 grid with another set of CSS for the larger browser size.

Personally I might go with 1200 as it shares the same factors as 960 and satisfies my OCD :)

Here's some food for thought on fluid layouts.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 17 '14 at 14:58

Dunc

18,404
6
86
103

score -1 · Answer 3 · answered Dec 10 '13 at 12:38

-1

There is a sass version that allows you to choose the container width, number of columns, break points and columns margin. https://github.com/lazerwalker/Skeleton-SASS/

answered Dec 10 '13 at 12:38

Lynnais

189
1
3

Making the Skeleton Grid System Wider

3 Answers3