Can anyone reccomend a good tutorial showing how to use http://goldengridsystem.com/
Or any tips and tricks…
Thanks!
Hi, Welcome to Sitepoint 
Unfortunately I think you’d be better off looking at the owners site or the official documentation as I doubt many (anyone) here as used it.
Grids seemed to be used by those who can’t really work out how to do it themselves because in all reality CSS is its own framework and from experience on the forums grids seem to hinder rather than help most users. Grids obviously have some good points as the authors put a lot of effort into them but to use them efficiently you have to be good at using CSS and most grid users are not experienced enough and end up using masses of code for little effect.
Of course my views may be biased because I only see the broken ones in the forums and there may well be satisfied customers around.
Don’t confuse GGS with “The Golden Grid”.
The Golden Grid, made by @vladocar, is also a grid system. It has nothing to do with GGS. Accidental naming conflict. My fault.
Say’s so in the GGS footer.
Which is Paul being polite about it… to be frank it’s just another CSS framework that ties you into using presentational class names – at which point you may as well go back to using HTML 3.2 without CSS for all the good it does your code.
27k of javascript, 6k of CSS with HTML 5 bloat on top? Do yourself a favor and forget you even heard of that broken half-assed nonsense that basically defeats the entire point of using CSS in the first place.
You know, I’m no expert, and among you I have no clout, but let me be honest about your comments for a moment. I am one of those who need the extra help when it comes to layout and structure… but this GGS, which I have only recently started playing with, isn’t bloat by any means. Actually, the stylesheet is quite stripped down, and the only extent of a predefined grid system is comments which tell people like me (you know, those who still need the extra help), what width the column would be at which media query resolution. I also haven’t had much experience with other grid systems, and have really only built a site or two using the 1140 css grid system, but since I started using a grid it hs greatly improved my efficiency.
From my perspective, the GGS doesn’t constrict me to a specific class names, and really only has by default two class names related to the grid anyhow, nor is it weighed down with a complete threecol or grid_xx preset which I am forced to follow. OF course what do I know!
The one thing I do have about the GGS at this point in time with my experimenting with it is things like this:
margin: 0.9230769230769231em 0 1.3846153846153846em;
I’d rack my head against a wall if I even tried to understand it.
I think you just proved our point
Just learn the right way to do things first using CSS. It takes time and you will make mistakes but you won’t end up needing a crutch to walk with as you will eventually be able to walk unaided.
If you learn a grid system then you you’ve doubled your work to start with as you have not only to learn CSS but also learn someone else’s approach also. Develop your own approach and build your own repertoire of code and snippets that you can re-use knowing how to adjust them and how to make them work.
Just because we don’t use grids doesn’t mean we start from scratch all the time. Most coders have their own “basic structures” to work from and get something up and running very quickly.
I’ve been trying to get my head wrapped around GGS because it seems like it would help with responsive design (layouts with media queries and fluid grids). Responsive design requires some forethought so that you can wrap content in a consistent way. I’m also starting a new site and would love a way to standardize column width, gutter/padding, etc. It can be hard to manage that on large sites with numerous developers!
I might be reading into it too much, but I’ve found GGS to be more than a bit confusing. First off, it’s really more of a recommendation than a grid system. He gives you some sample CSS and some percentages to use for columns, but that’s about it. (Maybe that’s a good thing?)
Here’s a summary of issues I’ve noticed:
[INDENT]“The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.”
In their recommendation for widths, the outer “columns” are 5.55555% and all others are 12.5%. …not sure why and can it really still be considered a column in the grid?
Also, does the concept of folding really make sense? It’s common for elements to span columns, so what’s the different between having 4,8 or 16? Isn’t an element that lives in one column in a 4-column grid the same as an element that spans 4 columns in a 16-column grid? I’ve been told that it lends to wrapping the content at in a consistent way, but I haven’t seen good examples of that. In his examples, he just wraps one column under another, which brings me to another gripe:
Can you use this for the most common web layout: main content column with right rail? Looks like it’s only makes sense with symmetrical cols.
Also, their code, which you don’t have to use, relies on box-sizing which isn’t supported by old IE. So, right off the bat if you want you’re pages to work in IE 7 and 8, you have to find a new way to lay things out. His recommendation is to only use box sizing in media queries so that old IE won’t see them anyway, but then you have to find a solution for your small screens (no queries) that doesn’t use box-sizing. I suppose it’s usually only one column, but I wouldn’t want to limit the design in that way.
The Golden Gridlet is nice, though it wouldn’t be the end of the world to create your own.
[/INDENT]
The problem here might be that I’m looking at this from a coder perspective and it’s more of a designer thing. That is, it’s just a basic ‘recommendation’ for how you might design a site, not strict rules to guide you in how to code it.
It’d be nice if there was more documentation on it. Tons of sites link to it, but I’m starting to feel that no one actually uses it!
I’d be interested in any info you can send my way to clarify this stuff, especially if you’ve been putting it to use!
Thanks!
Ok, so I looked at this one a bit more closely and noticed the following:
5.55555% = 100 / 18 cols, 12.5% = 100 / 8 cols, 6.25% = 100 / 16 cols, etc. so, the 2 outer columns are always 100/18.
5.55555% is still a decent amount of space on a mobile device, although i checked http://goldengridsystem.com/ and it’s design looks ok on my iPhone. …might not work for all layouts though and unfortunately the golden gridlet isn’t very configurable.
So, like some people in here I was quick to dismiss this as unnecessary and I am quite advanced in CSS and I didn’t feel like I needed this. But I recently gave it another chance and it’s definitely not for novices. It’s basically just a set of CSS comments that you can use as a guide. And the JS overlay helps you stay on track with a completely variable browser canvas.
Right. If you don’t get it, either work hard to figure out exactly what it’s doing (that’s what I do w/ JavaScript - screw that stupid programming language 
) or just drop it and learn from scratch. It’s never good to use a crutch for the rest of your life. I’m not saying that you will, but it’s always better to learn to do it the right way than to write “blind” code.
Like Paul said, “boilerplates” for HTML and CSS are always useful and very common. Personally, I have a startup for all of my CSS and HTML. I use part of Eric Meyer’s Reset (as recommended by RyanReese) and a cut-down and modified version of the [url=http://www.sitepoint.com/a-basic-html5-template/#fbid=kblFsQs61XN]Sitepoint HTML5 startup (no JS and an added wrapper div that I use). Both boilerplates are plug-ins for my Notepad++. Makes it easy to start up a project real fast or just to not have to deal w/ all of the initial meta data, etc. when doing a simple experiment.
~TehYoyo
Edit: The only grid that I use is 960 GS, but even then I’ve moved away after ditching the fixed-width layout.
Hello all!
Ok first things first. This is for the naysayers: you got the GSS confused with 960gs and others.
I agree with the whole semantic problems of grid systems, but that is EXACTLY what the Golden Grid System aims to fix!
And honestly: your end users will hardly see the source code; clients just care about results; and grid systems make life a whole lot easier. Why get so boggled down about tinny tiny details?
I use grids consistently, but I build my own based on what I need on a per-project basis. But the Golden Grid System is a fantastic starting point. I used it a few times, and it has definitely inspired my approach to building grids.
OK! onwards to the Golden Grid System!
What is a bit misleading at first about it, is that is doesn’t give you a grid at all. No classes, no helpers. And a pretty lousy example to get it started.
It does give you guidelines which are commented with the column sizes: e.g.:
/*
* Eight-column grid active
* ----------------------------------------------------------------------
* Margin | # 1 2 3 4 5 6 7 8 | Margin
* 5.55555% | % 12.5 25.0 37.5 50.0 62.5 75.0 87.5 100 | 5.55555%
*/
following these guidelines you can edit your elements to fit within the “grid”. You can also use their script to help align things.
1. I ususally start by setting a container that will house my elements. This container gets the margins of 5.55555%, for some breathing space.
.container {
margin-left: 5.55555%;
margin-right: 5.55555%;
}
you could apply this (with paddings instead of margins) to your body tag. It works. But I have a suspicion this isn’t a good idea. Let me know if I am right or wrong in that one.
2. Now you start building your “columns” with your elements. In the example he uses a wrapper, which is creatively named .wrapper. This has a 0.75em padding applied right and left, but no width. You have to use this format in your elements.
Say you have a navigation bar on the left which will span 2 of the aforementioned 8 columns. Your CSS could look something like this:
nav, .mainheading, article,
.littlecolumnontheside, .yourElementsInColumns {
padding: 0 0.75em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 25%; /* This is the width of 2 columns following the guidelines */
margin-right: 75%;
}
So, you define all of the “column” elements to have the properties of that .wrapper class. This keeps it tidy and avoids adding extra classes, plus you reuse the code and make the CSS significantly shorter and more manageable than if you were to write that in every element. But I’m just stating the obvious.
Then you add the width following the guidelines onto your element. In this case, the equivalent to 2 columns is 25% of the overall width.
Finally! thanks to the lovely box-sizing property, the paddings render inside the element AS THEY SHOULD! (This is one of the few things IE got right).
And your HTML is really straightforward:
<nav>
<ul>
<li>Whatever</li>
</ul>
</nav>
3. Repeat.
That is basically it. The difference between this and a grid system with class helpers is that it keeps your code tiny, even if its a bit more work.
Since the elements cascade with the media queries as the screen size increases, you can really tailor it to every conceivable resolution.
That is it!
BUT WAIT! There is a little caveat.
This is a mobile-first approach. Internet Explorer < 9 doesn’t understand media queries, which is bloody annoying. The “default grid” is 4 columns wide, which is ok in small screens, but looks crap in larger ones. And as much as we want to forget IE, its still a pretty important share of the market.
I adapted my own build of GSS to default the grid to 8 columns. Just did it by moving the media query definitions around.
BUT! this leaves another problem: Remember that .container element? It has an unrestricted size.
“Just add a max-width” I hear you say. No. For starters older versions of IE don’t support max-width.
The solution is very easy! You could add an IE only stylesheet with conditional comments … or …
Serve a fixed width layout and fix it inside a media query:
.container {
width: 780px;
margin-right: auto;
margin-left: auto;
}
@media all {
.container {
width: auto;
margin-left: 5.5555%;
margin-right: 5.5555%;
}
}
Voilà! A simple-yet-sophisticated solution that doesn’t bloat your markup with conditional comments.
I hope this helps.
First off, I’d like to salute a well done post. It was a pleasure reading it. Technical or otherwise.
<hr>
I have two things to note about GGS.
<hr>
I use normalize in my work: http://necolas.github.com/normalize.css/. It appeals more to me, as opposed to a reset. It doesn’t strip the default style, it helps it, which is more logical.
GGS is trying to normalize the reset it uses in the beginning. Making it more like a normalize for grids, in the process. Which seems a bit of a paradox for me, that knows of and chose normalize.
<hr>
Values like
line-height: 1.3846153846153846em;
margin: 0.9230769230769231em 0 1.3846153846153846em;
are not convincing me. If a grid requires this type of calculation, something went wrong, somewhere in the building process.
There is however, real example that could prove me wrong. Conversion from imperial to metric can lead to odd numbers too, and they’re used every day.
For example: 1.255 kg = 2.76680 lb. This could be the argument for odd values for em converted to and from px. Still…
I have to agree with itmitică and things like “margin-left: 5.5555%;” are not really viable measurements for cross browser compatibility. Indeed Opera does not honour anything after the point as far as percentages are concerned anyway so by the end of the grid could be as much as 50px or so out depending on the number of columns. Other browsers will vary in how they round up and down so going for that kind of accuracy isn’t really a viable solution.
A fluid width site should never really be made up of a sequence of percentage elements that add up to the total width as that is expecting too much and I always build into the layout at least one substantial element that has no defined width and soaks up the empty space and rounding errors without mishap. Even if you use exact percentages (e.g. 50% + 50%) ie6 and 7 will still get it wrong when the viewport width is an odd pixel size and drop a column as it rounds up the total to more than 100%.
By all means use a grid if it helps you but always remember to allow breathing space. I just prefer to code the page from scratch as setting up columns is a two minute job anyway so I don’t really see the benefit. I’ve said it a number of times now but some of the hardest pages to debug that we see on the forums are the ones that have used grids - which is probably why I don’t view them that favourably :).
[QUOTE=itmitică;5101793]
I use normalize in my work: http://necolas.github.com/normalize.css/. It appeals more to me, as opposed to a reset. It doesn’t strip the default style, it helps it, which is more logical.[/QUOTE]
Howdy!
I agree with you about the reset in GSS. I use normalize as well. But I find its better to flatten typography complete and start from scratch.
There are way too many resets flying about. I don’t use the one they provide. I just stripped off the bits that interested me really.
As for the code snipped you posted… I am not entirely sure where that comes from. But yes, if you are using that many decimals you are probably better off as a private banker (but maybe not any richer given how things are nowadays).
…
Values like
line-height: 1.3846153846153846em;
margin: 0.9230769230769231em 0 1.3846153846153846em;
are not convincing me. If a grid requires this type of calculation, something went wrong, somewhere in the building process.
Now im really curious as to what those margins are
** types away different calculations in spotlight with no success and quickly gives up **
That translates to a 16/22px basline grid … ish … with a 22px margin on top and a 15px margin on the bottom.
The only difference is the relative nature of EMs. How he got to such a ridiclously broken up number is a different question.
A pedantic, but very insighful read is Marcotte’s Responive Web Design from A Book Apart (http://abookapart.com/products/responsive-web-design).
He explains in very simple terms how to arrive to relative measures (in this case EMs, but could be ENs, %, points and picas)
Anyway, the idea is the following:
relativeSize = target / context
So if your body type is set to 16px, you multiply it by 1.375 to get the 22px line height.
1.375 = 22 /* the target */ / 16 /* the context */
That goes for the grid as well, hence the broken up numbers.
(Sidenote: do buy the book, its only $9 and you can read on the train home)
Finally it all comes down to this: Does it work? Well, yes it does. I have no issues. Yes, it might not be the ultimate pixel perfect photoshop mockup that we present to the client, but its fluid. You have to give it some credit.
At the office we make sure our clients understand that their website will NOT look the same. We let them know that we don’t support IE6 (directly, by that I mean: avoid making a mess of it, but just make sure its usable e.g. mobile first approaches), and have limited support for IE7.
Of course, it all varies a lot. If you are working for a corporation that uses an outdated windows infrastructure you might want to reconsider those terms of agreement, otherwise you’ll run out of business very quickly. Lucky for us, our clients know about Chrome.
In the end, it doesn’t matter how hard you try, different browsers/OSs will mess up your website. Its part of the beauty of web design really: this lack of control that is becoming oh so trendy nowadays, with generative art logos and fixed exposure camera * he says looking at his Diana+ and regretting ever wasting money on it. *
And to be honest, fighting IE is one of the reasons I design stuff for web, instead of just focusing on art direction as I am “supposed to”. Its an odd masochistic thing I guess: you shout and swear but in all honesty its quite fun. Its a puzzle. Albeit a very frustrating one… Maybe its just me
Ok, just though of this:
Take this measurement, and image this is the width of one of those so called ‘columns’:
5.23451132532152%
Lets round it to 3 figures, as in IE: 5.234%
So, your page is now shortened by:
0.00051132532152%
Chances are, this is less than a pixel, and will get rounded off anyway.
Opera ignores the decimals, so it becomes 5%.
Your website is now shortened by:
0.23451132532152%
0.2% is really not going to make a lot of difference. And it rounds down, so its not going to break your layout, just squish it a tad.
Unless you have a 27" screen (in which case you are probably not using IE7) this small different is surely not going to cause a lot of trouble.
Do what you feel most comfortable with, what gives you the best results.
In the end, all that you are selling is the end product, no matter how you get to it (that is the sad realisation that no one understands how hard we work. You present something to a client which you spent hours doing and you say: Look, this button is vertically aligned and it works in IE5, and all they reply is: “ok, nice” )
Do give the GSS a try. Don’t just throw away fluid designs altogether, they are very important at this moment
I might be biased towards mobile design though, I’ll grant you that
Good one.
I got those values from the GGS it self: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css
lines 168, 215… and many more like those in it.
<hr>
I like the mobile first approach too.
My first instinct when I finally decided responsive design should concern me too, was to start from 960 layout, which was the norm then, and adjust up and down the width, 480 to 1600.
Later, looking at other responsive design concepts:
I decided to give mobile first a try, and extend my range, from 280 even, to 1900. I’m not entirely sure if mobile first approach is going to fit well with every one of my projects, but it feels so right to me, I just love it.
<hr>
GGS certainly can teach a little something to everyone interested in different approaches to responsive design. Yet, somewhere, something is not right, with values like those I mentioned. Relative values, em or %, are relative for a reason. 0.23451132532152% is way past that.
Hi,
Well it does depend on the job in hand but if you look at this simple example you will see that Opera is actual over 50px out!" That’s enough to break any design.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css”>
*{margin:0;padding:0}
div{
float:left;
width:12.5%;
background:red;
height:100px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>
Chrome is about 5 - 10px out and Firefox and IE9 seem to be the only ones that get it right. IE8 is only a few pixels out but IE7 splits it onto two lines like IE6.
However we can fix all of them by not floating the last one and not giving it a width.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0
}
div {
float:left;
width:12.5%;
background:red;
height:100px;
}
.last {
overflow:hidden;
float:none;
width:auto
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="last">8</div>
</body>
</html>
Now there are no gaps, wobbles or broken layouts
Do give the GSS a try. Don’t just throw away fluid designs altogether, they are very important at this moment
I will agree that a lot of thought goes into some of the grid systems and reading the code and documentation does give a good insight into browsers problems. However, I feel that once you’ve delved that far into it you would be better off doing it yourself even if you borrow some techniques that you’ve learned. I just think that css is its own grid and I never see the need to layer something else on top. Maybe its just me
The problem with grids is that it attracts those that think its a short cut and jump in without understanding. I have some clients who are constantly asking me to fix the grids when they go wrong. More often than not they try and put content into the grid that just doesn’t fit and wonder why it breaks. That’s not the problem of the grid as such as they will work if used properly but there’s no accounting for what users do though
While somebody above specified how such numbers are calculated and how some browsers do fine with 1.3846153846153846em, I would suggest setting technology down and looking at a real-world view. Unless we are in some super-scientific setting, could you tell what’s the difference between 1.3846153846153846 and 1.3846153846? Let’s not mention 1.384615 <- this number specifies it down to the millionth. I didn’t bother to see what the sixteenth decimal is called, nor how much those 16 digits are attempting to split that pixel into.
When I do layouts, I try to stay as round numbers .25 -.5-.75. If I am needing to go below 0.125 to get a look I am attempting, I head back to the drawing board.
Translate something like em to px and you’ve automatically broken your layout on my machine. My baseline is NOT 16px and I’m not some weird minority (or is bad eyesite a really really really rare thing?).
Forget the pixels you might end up with somewhere. Use your own eyes to see how it looks/feels to you and go from there. (well, unless you have a client paying you to write pixels, in which case… just write pixels then)
Whenever I see a bunch of numbers after a decimal point in CSS I just assume someone put something really, really nice in their coffee that day. Wheeeee
Which right there is why you shouldn’t even need some stupid grid nonsense in the first place… if you leave one column fluid, you don’t need all that perfect math asshattery. Perfect widths == /FAIL/ which is why GRIDS == /FAIL. Grids seem to exist to assist the people using the flawed methodology of throwing exact widths on everything… which means uselessly bloated and needlessly convoluted CSS by people who seem to have failed to grasp the POINT of CSS.