All the latest news and announcements, straight from the WooThemes HQ!
Why we love 960.gs
04. Dec, 2008 by Adii Rockstar in Development
If you’ve been following us, you’d know that many of our themes (as well as this website) are based on the extremely popular 960.gs CSS framework. Now even though many designers / developers prefer not to use CSS frameworks in their projects, we think that we’re maximizing the value of the framework, whilst maximizing the ability of our users to edit the themes.
See – we believe that because it is so easy to understand how 960.gs works that it makes customizing our themes slightly easier. Considering that our themes are created to serve as the basis for your next (unique) project; customizablity thus plays a big role in that regard.
Beyond the customizability of a theme using 960.gs; we also think that the framework is extremely flexible, which allows us to create a wide variety of different themes, whilst it also doesn’t limit users of our themes in what they can & can’t do with them.
Do you have any experience with 960.gs? What do you think about us using it? Think it adds value?
4 December 2008 at 4:38 pm #
Is this basically the same thing as Blueprint-CSS?
4 December 2008 at 4:50 pm #
yes it is kinda, there are some differences which are good and bad… besides it has a much cooler name 960 just sounds bad ass.
4 December 2008 at 4:58 pm #
I understand why many developers choose to use these systems, I think. For those that grow accustomed to using them, I realize that development can get quite a bit faster with them. And your points make sense, Adii.
I find the plus column to be too thin, though, compared to the minus column. Using one of these systems, whether Blueprint or 960 or others, requires the use of non-semantic classes and ids in the site’s HTML. Giving elements ids of “grid_8″ or classes like “column16″ or whatnot isn’t interesting to me. I find it counter to many of the best practices I’ve come to believe heavily in.
That said, I understand my stance is a very developer-minded stickler-ish motif to it. But then again, yours was a developer sort of question
4 December 2008 at 6:32 pm #
I tested Blueprint and 960 a few months ago, and decided to use 960, since it is simpler. The download of 960 is 180 kb, while Blueprint is like, 4 mb. Blueprint has 24 columns by default, which is overkill. I like using 960 with 12 columns, which is more than enough for most layouts.
Anyway, when deciding upon a WooTheme to use for a particular project I look at the source-code to see if it’s 960 based, which is not a requisite, but nice, since as you state yourself, makes customization easy. And hopefully simpler CSS, since the layout is hidded away in the 960.css file.
So, please base all your future themes on 960 GS. And state it clearly on each theme, so I don’t have to investigate the source code to check;-)
4 December 2008 at 6:35 pm #
I think one of the reasons the Blueprint download is so large is that it comes with a ruby script to generate your own custom versions of the CSS files, including adding semantic class names and custom grid properties. Not that I’m a sales guy for blueprint or anything.
5 December 2008 at 12:54 am #
I started using Blueprint but ended up using 960 because the grid system of much more intuitive. Another reason I’m using 960 is that WooThemes is using it, seriously.
What I do when it comes to semantics is I put the grid names in ‘class’ then I name the ‘id’ with a more meaningful name.
If 960 helps your customers with your themes then definitely it adds value. Keep up the good work guys.
5 December 2008 at 11:01 am #
I’ve been using this for a while. I used it for my last big project:
http://www.barnsleyhospital.nhs.uk (uses WordPress of course)
It made the development much easier. The built in PSD files are a real help.
I noticed that the WooTheme guys have been using this since your new site launched. However, you seem to have modded the source CSS in the 960 core and added some extra padding to the container classes.
My question is, why do it this way? You could add the extra style to using a separate stylesheet which would overwrite the built-in 960 padding.
This way, if the 960 is ever updated, you won’t have to worry about putting the new changes in place.
Last of all, I notice you using the built in “clearfix” style to clear the floats. I stick to the rather old fashioned – style=”clear” – class on an empty DIV.
Do you ever run into any browser compatibility issues using the “clearfix” style?
5 December 2008 at 12:16 pm #
I’ve never been so sure about using a grid system. It never feels like I would use enough of it to justify including the whole grid. Most sites (even if they are based around a grid) just have 3-4 columns that are used. I usually just create a few divs (named more easily then 960 ‘
.nine-sixy { }‘) instead.@mkjones
I always use a clearfix method, and never have any problems with browsers. The only thing I don’t like about your method is the extra markup it adds. If it works though…
5 December 2008 at 10:40 pm #
I guess using that framework is what make your layouts usually 960px wide. Actually I miss more themes that suit lower screen resolutions. Of course I can always hack one I like so that it has a fluid/elastic/800px width, but then I would feel I am paying twice. My screen is certainly wide (1300), but only ProudFolio adapts to that 9% of my visitors that are using 800×600 screen resolutions. Yes, I know, we are in the XXI century and some designers tell me that I shouldn’t care about anyone that uses less than 1024×768, but I think that 9% is still a lot and I owe those users respect.
Otherwise, I love your themes, independently of the framework or technique you use.
6 December 2008 at 4:55 am #
Hey Spencer, I guess I don’t trust what is essentially a hack.
Plus the extra markup doesn’t bother me, you can always throw in a HR if you feel the need
6 December 2008 at 11:41 pm #
I just feel like using frameworks you don’t get 100% control over your work…
7 December 2008 at 6:03 am #
@TCThemes,
Your right, it can be very frustrating when you for example want to fit 3 columns into a 4 column area and end up having to code your own classes with extra mark up.
However, the time saved and amount of overall consistency you get with a framework for me outweighs niggles like this.
29 December 2008 at 1:43 pm #
@Ryan Imel
“Giving elements ids of “grid_8″ or classes like “column16″ or whatnot isn’t interesting to me. I find it counter to many of the best practices I’ve come to believe heavily in.”
Could not agree more and for the life of me can not understand how can anyone* find it easier to edit this…vs. using some logic of either deign or content based naming. (eg. ‘header’,'left column,’content’,'categories’….).
*especially end user.
To me these generic names take more time than if I start from scratch. However, I do value the grid in photoshop
6 January 2009 at 9:57 am #
I am in the process of revamping my site using 960, and i like it – in fact thats actually how i found out about woothemes, which have a few designs i am thinking of buying for my wife’s WP blog.
so for you guys not only did 960 make your life easier, but it may have made you some $$ too
7 January 2009 at 12:21 am #
@Graham – That’s great that you found WooThemes via 960.gs. We are really unashamed fan boys of the framework, since it really makes agile development so much easier.
15 January 2009 at 10:11 pm #
I found WooThemes via 960.gs as well.
Using the 16 column photoshop grid template for the redesign of my own company site (not yet online) has been interesting and beneficial.
Like others though, I’m finding myself torn between adopting 960.gs fully for my CSS as well or sticking to my own semantic naming schemes. The idea of speeding up development is so tempting (I’m remarkably slow) but the thought of going back to projects after a few years and wading through non-semantic soup is a bit scary..
16 January 2009 at 1:15 pm #
You can still have the id= set to something more intuitive than grid_8 to help expedite the process of remembering what controls what.
16 January 2009 at 3:39 pm #
I’ve just started using it today to give it a go. As IW@pu states, you just name your id to accompany the grid class.
example:
It’s actually more consistent than developing a string of new classes that only you will understand. On top of that, you can display the grid as your html bg if need be to get a better understanding.
Nettuts.com has a 960 tut that dispells the complaints, of which made me decide to give it a go.
It’s not for everyone, but as the old addage goes, don’t knock it til you try it.
18 January 2009 at 3:07 pm #
I decided to have a crack at it and have been pleasantly surprised.
The the grid and prefix classes take a huge amount of guesswork / experimentation out of layout; the transition from PhotoShop to code seems to be going a lot faster.
And as pointed out, I’ve simply added my own semantic id to each div.
Seems to be a much more efficient way of working. Chuffed with it so far!
21 January 2009 at 6:47 am #
Are you guys serious? You are using a framework which puts all your websites back into a table structure, except this time he uses DIVS instead of rows and columns?
I’ve just had a discussion with a programmer friend of mine and we both agree that this system would help designers a lot because it would free them from the mental gymnastics that we deal with everyday, but for more complex layouts this system has the appeal of a table layout.
seriously, grid/table layouts, in 2009, only a designer would think such a system is fantastic.
21 January 2009 at 10:30 am #
@ Christoper Thomas,
I think you’ve misunderstood what a css grid framework actually does. Grid does not mean table.
A css grid system like 960.gs is simply using a pre-set page width and predictable horizontal rhythm courtesy of preset classes to assist with placement. On my site I have no superfluous DIVs at all, apart from a couple of clearing DIVs (something I would have regardless of framework).
A table-based layout involves a lot of unnecessary empty cells, blank gifs to pad cells out, and a resulting mess of code.
You obviously don’t understand 960.gs or css grids, much as I didn’t before trying it, so save your disdain and “only a designer” comments until you actually know what you’re talking about.
26 January 2009 at 3:08 pm #
I like 960 a lot. Been using it for a couple of sites. Just one thing I can’t manage: a footer sticking at the end of the page or bottom of the screen (if little content). Anyone an idea?
27 January 2009 at 9:54 am #
well, after using 960.gs with other wither people making the final decisions having a to not edit a css file and just change something from grid_5 to grid_6 or what have you makes things alot faster and easier also having set width for each thing and letting the decision makes know that. keeps them from saying can we make this 3 pixels wider…
27 January 2009 at 11:59 am #
As far as a footer goes, just make the class “grid_12″ or “grid_16″. That should handle it.
6 February 2009 at 11:58 pm #
I’ve tried designing themes in the past without a CSS framework such as 960.gs, and I found it fiddly and time consuming just getting the widths of the columns right.
I’ve just designed a basic layout without too much work, and column widths already set.
Using 960.gs is a no brainer, haven’t tried Blueprint yet, but if people are saying the 960.gs is easier, I think I’m going to stick with it.
16 February 2009 at 4:33 pm #
Finally… You all have convinced me to try some framework, and of course the 960.gs will it be! :_)
The PSD files looks very helpful.
4 March 2009 at 2:41 pm #
I guess designers/developers at the first time try not to use these frameworks given the need to learn another new framework… But once they find the potential underneath this kind of frameworks, they definitely will use them. As I guess it happen with all of you who use 960gs or Blueprint-CSS.
4 March 2009 at 4:13 pm #
960GS is just a prototyping solution for quick deployment. We use it to build the functionality of our site before getting visual designers involved. Makes the whole development process much easier. Generally, we swap most of the non-semantic markup out including the columns included in 960 after we get final design specs from our visual design team.
7 April 2009 at 2:29 pm #
@ lebisol: Have you actually tried it? Because it is a lot easier than you think. You can still use the id of a div for identification (hey, wait a minute…that might be where the ‘id’ comes from).
See, I find a div that has an id “header” with class “grid_12″ a lot easier to understand than a div with id “header” and class “whatever”, which always has you diggin’ around in the CSS file to figure out what the hell the width, padding and margin of the damn header are.
Go 960!
7 April 2009 at 7:40 pm #
@Schop
“grid_12″ makes me wonder what who where…especially about clearing these.
Yes I have, granted only few hrs over the weekend.
Not saying it is bad idea just awkward for me to get used to.
For me it is reverse
I suppose it is like any other framework else after you get used to it.
Not every design fits the grid but for something like mass producing WP themes or column based newspaper sites it works.
It is hard breaking old habits
All the best!
29 April 2009 at 10:46 am #
I’ve been using the blueprint framework for a while. It does feel a little bloated. Think I’ll give 960 a try after reading all the comments. Thx.
30 April 2009 at 5:53 am #
I’am also using this and its amazing. I need to know something about the griding. Can we use both container_16 and container_12 in a same design ?
thx
30 April 2009 at 11:15 am #
Yes, you can use grid_16 and grid_12 in the same design. It’s all dependent upon how you segment your design.
13 May 2009 at 6:35 am #
As said by JB, someone can use the grid system to start the job and speed up things, and when you get the right layout, you can change the class names to something more suitable to your needs.
13 May 2009 at 10:48 am #
My first experience with 960.gs was updating my own site. I stuck with their class names and it’s fine for my own use.
For my latest client site, I’m again using 960.gs but this time using semantic class names and simply copy/pasting the relevant code into a custom stylesheet.
Best of both worlds: faster visual development to a uniform grid, fast transition to HTML thanks to all the guesswork gone from measurements (horizontally anyway).
24 May 2009 at 6:00 am #
I just starting my exercise using 960 grid system and I fallen in love using this to design my website. I already did some basic design to build a website using 960’s without using any graphics, which mean I only play using css with text and color block to know the idea using this system.
Beside that I also want to learn how to design the web using PSD with 960 grid and slice it into HTML and then import it to Wordpress. Does anyone know how to do it? Where I can find the best tutorial about this?
Thanks…
3 June 2009 at 11:34 am #
@mkjones
“Do you ever run into any browser compatibility issues using the clearfix style?”
I prefer to use the clearfix class (I have it named .cf for brevity) in my projects because it is less likely someone will delete a div that contains content vs. an empty div that clears both. Just a bit more fool proof, which is necessary when working with other developers whose front-end skills vary.
You can view a comprehensive example of clear both vs. clearfix here, http://www.happydevhq.com/clearfix_guide.html.
They both work, it really is preference. Test the examples yourself in any browser. http://www.xenocode.com/browsers/
3 June 2009 at 12:25 pm #
I just got into 960.gs and so far it’s pretty awesome!
5 June 2009 at 12:21 pm #
What themes use the 960.gs framework?