Thread

Who uses CSS frameworks (can of worms)?
I’ve been using a CSS reset, then a base stylesheet resetting consistent browser styles, then going from there for whatever the site requires.
There are plenty of reset stylesheets around, YUI, Blueprint, and 960 grid to name a few.
From there lately I had used the default specification sample styles over at the W3 site here: http://www.w3.org/TR/CSS21/sample.html <—Right’cheer
For spelling out the typography of the site, that’s been a bit of an issue and ends up scattered through the stylesheets, not making changes to the reset or base stylesheet are probably best, and I haven’t dabbled with the Grid stylesheets at all.

YUI seems awfully bloated just to use for a CSS framework, the download was 53 megs (I stand corrected almost 59 mB) for crying out loud, that’s what got me to thinking I’ll never use but about 20kb of that stuff.

960.gs is looking pretty good for this project, maybe it would be worth my while to pick through the grid goodies even?

I tried Blueprint once.  I wasn’t terribly happy with it.  I’m so used to doing things my way that its pretty hard for me to conform to a completely different way of doing it.  I also kept running into limitations inherent in the system with regards to the layout I wanted to get but couldn’t because of something in the framework that just didn’t allow for what I wanted.

I could see it having an advantage though.  Especially if you have a team of people working on the same sites or site.

Jamie

I have yet TO DO IT, but I’d like to make my own framework. Some bits and pieces of what works best for me.

I like BluePrint and 960.gs, but they are restrictive that they only work with a fixed 950px/960px width.
I started looking at emastic, because I really want to stick with a fluid based layout, but the method of classnames is just horrendous. My current client wants pixel-precision, so ... BluePrint it is. This little sitehas been invaluable.

So I have a current ugly mix of meyer reset + the typography.css from BluePrint + a em based grid that I am working on.

I think we are all just best to leave CSS Frameworks alone and come up with what works best for us. This ‘can of worms’

YAML.

I tried Blueprint once.  I wasn’t terribly happy with it.  I’m so used to doing things my way

Blueprint does constrain you when it comes to laying out the grid, but that’s pretty much it in terms of doing it the “framework” way. We found that, especially on grid based sites, using a framework (so far we’ve had experience with 960gs and Blueprint) saves you a lot of time.

Sure, you have to use some of the framework classes to layout the containers, but the benefit of cross browser compatibility as well as fast prototyping and development is higher than the constraint to use the framework’s namespace.

Regards
Peter.

Actually Blueprint doesn’t constrain you to only using 950px and there are some handy-dandy tools on the net which allow you to make the grid any size you want such as :

Blueprint Grid CSS Generator

Construct Your CSS

Miscellaneous
Blueprint CSS Air Grid Tool

So you can definitely make grids that are larger or smaller than 950px with Blueprint. Takes a little work but can definitely be worth it in the end.

Best wishes,

Mark

I am now using 960.gs - very flexible and very simple to set up. You need to then add your own look and feel inc typography on top but unique designs will need that anyway.

Thanks for the replies.
Had an interesting thought there was a framework I couldn’t think of turns out it was boilerplate, so I did a search within code.google for CSS framework. It turned up some new to me links. I’m looking for, like organized fellow says my own set of tools and stylesheets to begin any project, expanding my set of CSS stylesheets is more like it, to get a little bit more complex, griddy and interesting.
My designs for a long time now have consisted of div structure based on 456BereaStreets Simple layout, and then put in my background bits, typography etc.
This layout has served me quite well, I use it minimalistically in that usually there are no other grid variations from the standard two column, maybe a third column once in a while.
Really to avoid making mistakes, but it hasn’t lead to much layout exploration which is where the real fun begins.

In regards to being constrained to 960px that’s just where I’m targeting things, meanwhile a page background can go larger, I’ve been thinking in terms of using 80 pixels on either side of the 960 if there is to be a graphic page background. It gets a little hard to do in Photoshop when my total screen setting is at 1280 at work.
So really my main design is the 960 centered box, if you will.

Here’s a new one somebody morphed what they liked from Blueprint, and Tripoli and called it Bluetrip.
http://bluetrip.org/
Giving this one a try. Looks great for a starting point, have to wait and see about the typography elements though.
Tripoli was here: http://devkick.com/lab/tripoli/ I’ve used pieces of tripoli, looks like it’s a little too much now for my taste.

Scared the p-j-ee-bers outta me. adding the class=“container” to my wrap div and things don’t look to bad. Still this one’s pretty heavy with things like grid that will take some study. Might be a keeper, Eric Meyer’s reset is in one of the four sheets, most frameworks use that if you want to go “Reset”.

YUI seems awfully bloated just to use for a CSS framework, the download was 53 megs (I stand corrected almost 59 mB) for crying out loud, that’s what got me to thinking I’ll never use but about 20kb of that stuff.

Whoa there, that’s the full YUI download.  Meaning it includes all the JS components and documentation. The CSS files (4 of them, use only those you need) only add up to about 7kB.  Added plus: you can grab them from Yahoo’s servers.

We can guess what my preference is 😉 .  Although I have used 960gs quite happily as well.

Thanks Pascal, hey just noticed YUI css has a cheatsheet for download at:
http://developer.yahoo.com/yui/reset/ upper right corner, that might help some for Yui.
Click the graphic to get just the CSS pdf. Man they got me again , I clicked the whole friggin’ set.
looking that over.

Although I have used 960gs quite happily as well.

Just when I was thinking that 960 would become a full blown ‘standard’ for layout I’m starting to see sites over 1,000 pixels wide (1024). Google Analytics is showing that less than 10-percent of all traffic to the site has screen resolution of 1024 or less (though a slight resurgence of smaller screens due to the iPhone/iPod touch). Over 90-percent are using screens with 1280 pixel width or larger, which would indicate that an open browser window could still easily handle 1024.

Ah, changes. How about a minimum of 960 but totally flexible right and left margins?

;-0

Another vote here for 960.gs. I really like the ease with which it works. As a matter of fact I am working on something special for EE using the 960 framework…

Another vote here for 960.gs. I really like the ease with which it works. As a matter of fact I am working on something special for EE using the 960 framework…

I just finished the homepage design for a new site, and the layout caused me to jump out of my comfort zone, usually a two column fixed width layout.
For the bottom of the design I tossed in a container_12 from the 960.gs framework, and what do you know, I learned the valuableness of the prefix and suffix class variables.
I just think the 960 framework is going to be my new timesaver, and an aid in grid creativity. I finally get it, or parts of it anyways 😉

Yeah I was scratching my head till I realized you can remove some margin by using alpha or omega as a secondary class.