Do you use CSS Frameworks? (blueprint/960/YAML/YUIG, etc) What's your take?

Hi,

This topic is a continuation from this thread

What’s your take on CSS Frameworks? This is one of those topics that has been discussed before elsewhere and there are no right or wrong answers. Basically, what I/we would like to know is:

1. What has been your experience when using CSS Frameworks such as Blueprint, 960, etc? (with or without modx)
2. Do they make developing easier or they are just a bloat?
3. Have you used CSS Frameworks before but decided to go back to coding your own CSS? if so, why?
4. Any recommendations on how best to use CSS Frameworks? (or not to use CSS Frameworks)
5. Which CSS Frameworks would you recommend and why?

OK, there it is folks. I personally hope to get answers because I have been toying with the idea of using CSS Frameworks. I’m off to play with 960 a bit and see how it feels.....

Thanks! 

1. What has been your experience when using CSS Frameworks such as Blueprint, 960, etc? (with or without modx)
I always use Blueprint! And I love it
2. Do they make developing easier or they are just a bloat?
Your own css will be smaller (no framework code ) But it makes developing much easier
3. Have you used CSS Frameworks before but decided to go back to coding your own CSS? if so, why?
Doesn’t apply for me
4. Any recommendations on how best to use CSS Frameworks? (or not to use CSS Frameworks)
Only use it when your design allows you to! But you should always use a reset.css and Typography.css.
5. Which CSS Frameworks would you recommend and why?
Blueprint... The only one I have experience with. The big pro about this framework is that it has a reset.css, typography.css and grid.css You can develop really fast if you design your site with the grid. And making a subpage with a different page layout is easy as hell, I can create a different subpage in just 2 minutes based on the normal template.


I would like to see some experiences with 960 framework, I hear a lot about it but I did never use it.

1. What has been your experience when using CSS Frameworks such as Blueprint, 960, etc? (with or without modx)

I’ve recently been using blueprint with Modx, I’ve yet to use it on a non-dynamic website, but I can’t imagine there is much difference in performance

2. Do they make developing easier or they are just a bloat?

I find developing much much easier, the alternatives are to create your own purpose built framework, or code CSS unique to each website. Of course, the last two are difficult to update (cheer for IE8 sigh). For example, let us say, you have used a framework on 15 websites, IE8 is released, and they’re all jumbled. Then the framework is modified to compensate, you simply update the CSS on each website, and you’re back in action!

3. Have you used CSS Frameworks before but decided to go back to coding your own CSS? if so, why?

I’ve really been impressed with the recent use of frameworks, there are many advantages, and I don’t think I’ll switch back to my own coding. Mainly because my own coding isn’t the best, at least with a framework I can ensure a certain standard of quality that can be easily reproduced.

4. Any recommendations on how best to use CSS Frameworks? (or not to use CSS Frameworks)

As MediaGuy said, use it if you need it!

Another great way to use a framework, is if you’re working within a team of developers. When I have to outsource template coding for projects, and my freelancer uses blueprint, I know exactly what they’ve done and how they’ve done it, without having to heavily study their code. I’ve done this recently, and communicate between developers has been brilliant.

5. Which CSS Frameworks would you recommend and why?

I looked at both Blueprint and 960. The only reason I’ve been using blueprint was that it was the first one I downloaded and experimented with, it does absolutely everything I need it to do, and decided to run with it. I will hopefully get time to sit down and take a detailed look into 960 over the next month or so. As media guy says, creating sub templates after the primary template has been created, is a breeze. My development time has been cut in half, which means better prices for my clients (good for this current economic climate), more time for me to take on more projects, and less time wasted CSS coding.

Overall, blueprint with Modx has saved me money, made me more money, and left my clients pleased with cheaper prices and faster turn around times.

Overall, blueprint with Modx has saved me money, made me more money, and left my clients pleased with cheaper prices and faster turn around times.

This is a powerful argument for using a css framework.

I have not used or actually been interested in css frameworks (php frameworks maybe but not css), but recently I have been a little more interested. My opinion is based on impression and not experience..

My reasons against them are: 1) they are div dependent, it seems that in a time where practices are encouraging using less divs that you end up with additional divs just accommodate the grid. 2) they are not semantic and bring layout information into the code rather than keeping it in the css file. 3) In some ways it is similar to using tables and after the table-less movement anything that resembles tables for layout is percieved as a no-no.

My reasons for considering them: 1) I am tired of starting from scratch every time. 2) getting a basic layout ready takes literally minutes.

960 seems very easy to use, but a bit limited. Blueprint seems to do everything. I also ran into emastic which seems to be interesting since it can be used for a fluid site as well and can handle % based layouts.

I am planing to give a css framework a try on a personal project over the holidays and then I will have a better idea about it.

Personally I would rather create a css layout from scratch. I would like to be able to say that I can create any form of CSS layout and do it in notepad rather than rely on a framework. These auto layouts etc is taking away from the black art of web design and I don’t use them. I was at the launch of CS4 suite by Adobe and I can see the black art of web design being automated and do able by anyone. I’m all for people creating websites but I have no time for those who say they create websites and clearly don’t know anything about it, using CSS layout programs or auto generation of layouts is not on my list for learning or using.

I’ve used BP and 960 and have developed my own framwork and snippet files. I think it is a waste of time and effort to start from blank everytime. As a business person, when you can reduce repeated actions and speed production you are optimizing workflow. I use php, html and css snippets (not modx SNippets) to create projects. I have built dozens if not hundreds of vertical and horizontal navigation lists why should I not save an hour scratching my head to remember how I did this or that.

I do think that in large groups a framework is helpful too. If a design co can establish guidlines for building out CSS and formalize its use a framwork is born.

On the flip side a framework should not be used in lieu of actual design. It is not a template it is a basis for organization and communication.

Whether you roll your own or use an OS framework, you need to make it yours, understand its limits and at every step find ways to work smarter, more efficiently and make more money.

Cheers,

Jay

Quote from: smashingred at Dec 02, 2008, 08:33 AM

I use php, html and css snippets (not modx SNippets)

What kind of css snippets do you have?

Out of curiosity how would this help if say 90% of your designs do not follow the same structured layout? Would it be of any use? I’ve never tried these frameworks as I usually code in notepad+ (don’t use dreamweaver or the likes) so if each project was different, would the framwork speed things up?

Quote from: rossco at Dec 02, 2008, 09:15 AM

Out of curiosity how would this help if say 90% of your designs do not follow the same structured layout? Would it be of any use? I’ve never tried these frameworks as I usually code in notepad+ (don’t use dreamweaver or the likes) so if each project was different, would the framwork speed things up?

Yes it would, just be sure to design your site with the column width of your framework. Our sites are never the same, but we design them on the grid so that we can make new layouts fast.

Rossco,

Don’t use someone else’s framework build your own. I use Textmate (used E-Texteditor, HTML-Kit and Notepad++ on windows) and sure not every project is the same but how many different types of navigation do you use? There is vertical and horizontal (if talking pure HTML) and every other is a variation of those. Be they nested or dropdowns or 2 level or whatever. So I have them ready to drop in and mod in my designs.

My CSS I have a base file because almost all my designs have the same type elements. They all have body, a, ul, li , p elements. I don’t style them but set them at a starting point. Most of my designs also have a #site_id, ul#menu, #site_info, as well I incorporate a customised version of Eric Meyer’s Reset CSS (it is not his zero everything as it seems a waste of time to zero everything and then add override rules).

In addition I have my whole template structure with base index.html files called a "Site Template" in my .htdocs folder that I just copy into my assets/templates folder that contains the following structure (you could do it differently):

<br />site_template<br />    _images<br />    _scripts<br />    _styles<br />        common.css<br />        ie7.css<br />        ie6.css<br />    index.html<br />

Another way to optimize development time is to find the common classifications for wrapper elements and use those as ids and classes in your html. I use #site_id instead of logo as it is representative of function not its contained element. It can be type or some other site identifying element like a banner or text. I use #content, #subcontent instead of things like #sidebar and #footer so I can stick them into every design and they perfectly describe function not sub elements.

When I get down to the actual design I can then create the site’s unique elements and execute the creative part of the design.

I liken this all to an artist who stretches and prepares his canvases when he isn’t paintng so that when she is ready to start hours don’t need to be wasted on the boring stuff of setting up. Just grab a canvas and start sketching or painting.