Comments on: 6 Tips and Tricks for Designing with the 960 Grid System http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/ Web Development | Nashville, TN Tue, 16 Mar 2010 14:30:10 -0500 http://wordpress.org/?v=2.8.6 hourly 1 By: <fb:name linked="false" useyou="false" uid="693272095">Joe M Stevens</fb:name> http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-229328 Joe M Stevens Tue, 16 Mar 2010 14:30:10 +0000 http://blog.centresource.com/?p=842#comment-229328 Great article. I am a big fan of CSS frameworks and write now grid960 is my favorite one because its is lightweight, easy to understand and only sets the grids you need. I tried Blueprint for a few sites but it sets to many styles for my taste. I am going to use push/pull a little more now that you've explained so clearly. Thanks! Great article.
I am a big fan of CSS frameworks and write now grid960 is my favorite one because its is lightweight, easy to understand and only sets the grids you need. I tried Blueprint for a few sites but it sets to many styles for my taste.
I am going to use push/pull a little more now that you’ve explained so clearly. Thanks!

]]> By: Tom http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-229271 Tom Wed, 20 Jan 2010 04:45:39 +0000 http://blog.centresource.com/?p=842#comment-229271 You comment, "I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available." Where may we download this so our images can have proper baselines?? How does 960 cope with images of varying horizontal and particularly vertical sizes?? Thank you, Tom You comment, “I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available.”

Where may we download this so our images can have proper baselines??

How does 960 cope with images of varying horizontal and particularly vertical sizes??

Thank you, Tom

]]> By: Jason O'Brien http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-229002 Jason O'Brien Wed, 25 Nov 2009 00:05:56 +0000 http://blog.centresource.com/?p=842#comment-229002 There are a few relatively easy ways to accomplish drop shadows with 960.gs.. all depends on the design and how progressive you want to be. The easiest and coolest way is to apply the box-shadow property to the container grids. This is achieved with -webkit and -moz CSS extensions (e.g. -webkit-box-shadow: xxx) and would get you nice drop shadows that don't affect the containers. Since that won't work in IE, your next easiest bet is to reduce the background inside your container to be smaller in width _with the drop shadow_, so that the far left and right edges of the show (where it tapers) wouldn't extend past the edges of the grid. Then, you can set padding on inner elements to compensate. A trickier method -- but one that might be necessary because of a certain design -- would be to set up containers that have the drop shadow background, but don't assign them grid classes. Then, within those containers you can setup your grids. This can get hairy, and might be a situation where you're better off NOT using a css framework (or at least not 960 specifically). There are a few relatively easy ways to accomplish drop shadows with 960.gs.. all depends on the design and how progressive you want to be.

The easiest and coolest way is to apply the box-shadow property to the container grids. This is achieved with -webkit and -moz CSS extensions (e.g. -webkit-box-shadow: xxx) and would get you nice drop shadows that don’t affect the containers.

Since that won’t work in IE, your next easiest bet is to reduce the background inside your container to be smaller in width _with the drop shadow_, so that the far left and right edges of the show (where it tapers) wouldn’t extend past the edges of the grid. Then, you can set padding on inner elements to compensate.

A trickier method — but one that might be necessary because of a certain design — would be to set up containers that have the drop shadow background, but don’t assign them grid classes. Then, within those containers you can setup your grids. This can get hairy, and might be a situation where you’re better off NOT using a css framework (or at least not 960 specifically).

]]> By: Jason Judge http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228995 Jason Judge Fri, 20 Nov 2009 23:01:14 +0000 http://blog.centresource.com/?p=842#comment-228995 Interesting tips - some great design tips. One thing that I am trying to work out the best approach to, is how to pur drop-shadows into the gutters. Do you have any hints on how best to achieve that? The only way I can see would be to have gutterless column containers, then put a 10-pixel gutter inside each individually, along with the shadows. I'm not sure if that is the right approach though as it could start complicating the CSS a lot. -- Jason Interesting tips – some great design tips.

One thing that I am trying to work out the best approach to, is how to pur drop-shadows into the gutters. Do you have any hints on how best to achieve that?

The only way I can see would be to have gutterless column containers, then put a 10-pixel gutter inside each individually, along with the shadows. I’m not sure if that is the right approach though as it could start complicating the CSS a lot.

– Jason

]]> By: Cybergrace http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228980 Cybergrace Wed, 11 Nov 2009 09:01:33 +0000 http://blog.centresource.com/?p=842#comment-228980 Wow! This is hurting my head but you just explained the alpha/omega problem I was having with the 960.gs grid. Thanks for the clear language & examples. Wow! This is hurting my head but you just explained the alpha/omega problem I was having with the 960.gs grid. Thanks for the clear language & examples.

]]> By: Juraj http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228968 Juraj Fri, 06 Nov 2009 23:13:23 +0000 http://blog.centresource.com/?p=842#comment-228968 Nice and easy to follow, laughed on 6) I work with the grid off, while turning guidelines of 960.gs on/off with ctrl + ; Nice and easy to follow, laughed on 6)
I work with the grid off,
while turning guidelines of 960.gs on/off with ctrl + ;

]]> By: Jason O'Brien http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228896 Jason O'Brien Mon, 19 Oct 2009 21:04:51 +0000 http://blog.centresource.com/?p=842#comment-228896 Ali, I can't forsee any problems doing that. Your markup would look something like this: [div class="container_16"] [div class="container_12"] [/div] [/div] The container classes share the same overall width and set the widths of inside columns based on the container using cascading styles. So, in theory, if you place 3 grid_4's inside the container_12, they will inherit the column widths from the container_12 set of styles (inherently wider since there are less columns available). Let me know how that works out, interested to see if it can happen. Ali, I can’t forsee any problems doing that. Your markup would look something like this:

[div class="container_16"]
[div class="container_12"]
[/div]
[/div]

The container classes share the same overall width and set the widths of inside columns based on the container using cascading styles. So, in theory, if you place 3 grid_4’s inside the container_12, they will inherit the column widths from the container_12 set of styles (inherently wider since there are less columns available).

Let me know how that works out, interested to see if it can happen.

]]> By: Ali http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228889 Ali Sun, 18 Oct 2009 13:19:31 +0000 http://blog.centresource.com/?p=842#comment-228889 Any tips on how to mix a 16 grid with a 12 grid I want to have a standard 16 column layout with for instance a single row nested within it that has a 12 column layout. Can't quite get it to work Any tips on how to mix a 16 grid with a 12 grid

I want to have a standard 16 column layout with for instance a single row nested within it that has a 12 column layout. Can’t quite get it to work

]]> By: Billee D. http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228530 Billee D. Tue, 04 Aug 2009 19:13:27 +0000 http://blog.centresource.com/?p=842#comment-228530 I find that CSS grid systems are OK for some sites. I tend to roll my own grids for most designs. However, I have recently started liking (and using) the 1KB Grid: http://1kbgrid.com/ It's really basic and lightweight compared to Blueprint which has all those extra form and typographic styles. The 960.gs system is great too and I have used it on one client site. I think it allows you to push/pull things out of the grid a little more easily than with Blueprint. But, given that these frameworks add a bit of CSS overhead I really like the 1KB grid. Thanks for the read! I find that CSS grid systems are OK for some sites. I tend to roll my own grids for most designs. However, I have recently started liking (and using) the 1KB Grid: http://1kbgrid.com/ It’s really basic and lightweight compared to Blueprint which has all those extra form and typographic styles.

The 960.gs system is great too and I have used it on one client site. I think it allows you to push/pull things out of the grid a little more easily than with Blueprint. But, given that these frameworks add a bit of CSS overhead I really like the 1KB grid.

Thanks for the read!

]]> By: Jason O'Brien http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/comment-page-1/#comment-228421 Jason O'Brien Wed, 15 Jul 2009 16:11:14 +0000 http://blog.centresource.com/?p=842#comment-228421 Maanas, Alpha and Omega classes remove the left margin and right margin respectively from a grid column(s) and are used for nesting grids inside of grids. So, if I wanted a grid_12 with two grid_6's inside (for a 2 column layout) I would need this: [div class="grid_12"] [div class="grid_6 alpha"][/div] [div class="grid_6 omega"][/div] [/div] Without the alpha and omega resets, there would essentially be a double margin for both the left and right sides, and you would see columns start to jump down and your layout turn to crap. Important to note is that only the FIRST and LAST nested grid containers need those extra classes. Any grids in the middle wouldn't need them. For an example of how to properly use the classes, check out the source code for this blog, or check out some of the sample sites that 960.gs showcases on their homepage. Maanas,

Alpha and Omega classes remove the left margin and right margin respectively from a grid column(s) and are used for nesting grids inside of grids. So, if I wanted a grid_12 with two grid_6’s inside (for a 2 column layout) I would need this:

[div class="grid_12"]
[div class="grid_6 alpha"][/div]
[div class="grid_6 omega"][/div]
[/div]

Without the alpha and omega resets, there would essentially be a double margin for both the left and right sides, and you would see columns start to jump down and your layout turn to crap.

Important to note is that only the FIRST and LAST nested grid containers need those extra classes. Any grids in the middle wouldn’t need them.

For an example of how to properly use the classes, check out the source code for this blog, or check out some of the sample sites that 960.gs showcases on their homepage.

]]>