I am a developer, who knows close to nothing about design, so please bear with me. As I read books about design, I keep getting stuck at the idea of a grid system such as 960gs. I completely understand designing within a width of 960px, but I don't understand what the red columns are for, or how this helps with the layout of a site. As a side note, I don't really see the benefit of the class library, as it just seems to increase load time for basic styles.

Designing to a grid helps line everything up.

Make sure everything lines up to the gutters and not half way through a gutter or half way through a column.

There is an amazing tutorial on the Skeleton CSS framework, watch the tutorial and you will be able to use the other grids aswell!

 

Here is the link: http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-starting-out/

The grid system makes sense to me infact, I never knew it exsited, I see there is a fine line between print design and web design. Though there is larger grid sizes, I decided to use the 978 grid system for flexibilitiy. What is the point in breaking up the section into two different blocks, for example; 60, 860 for a grid system in CSS, I couldn't understand from what I read, what this purpose is for ?

 

The grid system makes sense to me infact, I never knew it exsited, I see there is a fine line between print design and web design. Though there is larger grid sizes, I decided to use the 978 grid system for flexibilitiy. What is the point in breaking up the section into two different blocks, for example; 60, 860 for a grid system in CSS, I couldn't understand from what I read, what this purpose is for ?

 

You'd rarely use this. The grid system just makes it possible so they demonstrate it.

 

I am a developer, who knows close to nothing about design, so please bear with me. As I read books about design, I keep getting stuck at the idea of a grid system such as 960gs. I completely understand designing within a width of 960px, but I don't understand what the red columns are for, or how this helps with the layout of a site. As a side note, I don't really see the benefit of the class library, as it just seems to increase load time for basic styles.

It just makes your site easier to look at if there's some basic structure to it. Even if the customer doesn't notice the structure it definitely boosts your site.

 

Also it makes changing your site easier. Want to make the sidebar a bit bigger? Want to move it from left to right? Want to have some pages split 50/50, some 33/33/33 and some 50/25/25? This makes it easier and manageable. I like the 1140gs personally, though I take the media queries out most of the time

 

The 'red colums' are probably padding between separating columns, makes everything equally spaced.

I'm not sure if you're also asking how to implement a grid system? If you are let us know

Edited August 17, 201213 yr by Ashley Byrom

What is the point for those 20px spacing between each grid ? How do I implrement a grid system ? The easy part for me is to load the grid template into Ps and beginning desgining which I have already begun doing, except without the grid, I haven't got that deep into the design process I can't migrate it to the grid without hasstle.

It's just padding. On any site when you have a main body area and a sidebar there's always 20px or so space inbetween them.

 

Work out how many columns wide you want your body (say, 9/12 columns) so go 9 across, then you'll have one of the 20px columns, that's your padding. Then the other three columns can be your sidebar, see this image I made

 

To implement it your grid will have a series of classes you can apply to divs, for example:

 

<div class="row">
 <div class="9col">
 <!-- Body area -->
 </div>
 <div class="12col">
 <!-- Side area -->
 </div>
</div>

It's just padding. On any site when you have a main body area and a sidebar there's always 20px or so space inbetween them.

 

Work out how many columns wide you want your body (say, 9/12 columns) so go 9 across, then you'll have one of the 20px columns, that's your padding. Then the other three columns can be your sidebar, see this image I made

 

To implement it your grid will have a series of classes you can apply to divs, for example:

 

<div class="row">
<div class="9col">
<!-- Body area -->
</div>
<div class="12col">
<!-- Side area -->
</div>
</div>

 

It's just padding, why put that on the grid, I'm not going to have a 20px gap between a image What if I don't have a side bar, and instead a 9 col header, that is fine.

It's just padding, why put that on the grid, I'm not going to have a 20px gap between a image What if I don't have a side bar, and instead a 9 col header, that is fine.

 

If you have a 9 column header you'd have something 3 columns next to it - then you'd need spacing between them.

If it was just a header it'd be 12 columns.

Or you could have an empty 2 column, an 8 column and another empty 2 column.

If you have a 9 column header you'd have something 3 columns next to it - then you'd need spacing between them.

If it was just a header it'd be 12 columns.

Or you could have an empty 2 column, an 8 column and another empty 2 column.

Can you show me an example ? I'm redesigning my web site, I dunno if you have seen it or not, but I need to redesign to hopefully launch myself !

http://960.gs/ is built using their own grid system. They link a few examples too.

If you have a 9 column header you'd have something 3 columns next to it - then you'd need spacing between them.

 

What do you mean ? Why are there gutters ? I've watched about 4-5 videos on the subject and it wasn't explained that I could understand, I know it has to do with print, besides that I'm clueless

Edited August 17, 201213 yr by CreativeSheep

Don't think about print just think about setting out your content. You need spacing inbetween to separate them.

 

It's the same has having 20px margin beneath a paragraph to separate paragraphs. If you have two sections next to each other you'd have 20px between them.

Edited August 18, 201213 yr by Ashley Byrom

Don't think about print just think about setting out your content. You need spacing inbetween to separate them.

 

It's the same has having 20px margin beneath a paragraph to separate paragraphs. If you have two sections next to each other you'd have 20px between them.

 

Oh I can let go of all thinking when designing, but in the end it bites me in the arse when I'm ready to built the page I need 20px spacing between grids, but any images on the grid don't need to be sliced or do they so there is a space between the image ? I really want to know what those gutters purpose for, in my quest to find this answer, I was unable to find it

 

I'm using a 978 and so anything above the fold is what the user will see first is there any tips on folds, I want to make the redesign right this time, with no hiccups so I get WOW instead of POOP