The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.
Blueprint: A CSS Framework
bjorkoy.com — Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
aldomatic- 1490 diggs
- digg it
- wackymacs, on 10/10/2007, -7/+30I can see this being useful but it's nothing new.
- fkr3, on 10/10/2007, -12/+11I can't even see it being particularly useful.
- appletalk, on 11/10/2007, -3/+7I have to agree with this. The grid technique is not something everyone uses, the reset is from Eric Meyer, and the typography file even uses px instead of em, and has fixed values for sizes, which is something that greatly varies from project to project.
I think it's a bit of an over generalization. Reset and a some other lines are enough for a project's default css.- ubernostrum, on 10/10/2007, -2/+1Using pixels isn't evil.
And if your reply is anything along the lines of "But... but... IE can't resize them", then I'd like to offer an analogy:
If a major wheelchair manufacturer produced chairs with square wheels that couldn't roll, would we expect every building with a wheelchair ramp to rebuild it as some sort of lift to physically pull the chair up, or would we expect the manufacturer to fix the chairs (or to lose the business of the wheelchair-using public)?
Same with pixels: if a browser can't resize text set in pixels, it's the browser's problem and users should be steered away from that browser. Don't tell me a workplace enforces IE, either, because that's an accessibility lawsuit waiting to happen. In fact, that's an accessibility lawsuit that _should_ happen.- ra1971, on 10/10/2007, -0/+1Pixel are evil, and resizing them is yet more evil.
What's a pixel? It's a physical thing in your display. How are you going to resize those?
If you have resizable pixels in web browsers, those are **not** pixels.
And using them is evil because the real size of the object will change according to the screen it's displayed on.
So there. Use ems which are related to the size of font the user selected, or points which are a displayed size measure.
- ra1971, on 10/10/2007, -0/+1Pixel are evil, and resizing them is yet more evil.
- ubernostrum, on 10/10/2007, -2/+1Using pixels isn't evil.
- appletalk, on 11/10/2007, -3/+7I have to agree with this. The grid technique is not something everyone uses, the reset is from Eric Meyer, and the typography file even uses px instead of em, and has fixed values for sizes, which is something that greatly varies from project to project.
- fkr3, on 10/10/2007, -12/+11I can't even see it being particularly useful.
- appletalk, on 10/10/2007, -0/+21Original idea:
http://www.alistapart.com/articles/frameworksfordesigners- Resilient, on 10/10/2007, -0/+5That article was written by Jeff Croft and he also played a role in the Blueprint framework. Same idea, if anything.
- appletalk, on 11/10/2007, -2/+1He didn't. Read the entire page
- Resilient, on 10/10/2007, -0/+5That article was written by Jeff Croft and he also played a role in the Blueprint framework. Same idea, if anything.
- joshdavey, on 10/10/2007, -0/+2I really like the grids. I can see this being very useful. Maybe a bit of overkill for most sites though.
- realnebby, on 10/10/2007, -0/+13is really not how CSS is meant to be used. Class names are supposed to describe what an object in the DOM is not where it should go.
- Smuikas, on 10/10/2007, -0/+1So true. Yahoo Grids works a little better than this, I think.
Plus, why is their sample site so damn ugly? Ugh.
- Smuikas, on 10/10/2007, -0/+1So true. Yahoo Grids works a little better than this, I think.
- realnebby, on 10/10/2007, -0/+13is really not how CSS is meant to be used. Class names are supposed to describe what an object in the DOM is not where it should go.
- careyt, on 10/10/2007, -0/+13this is the first really thought out css library that I've ever paid any attention to, I think I like it.
does anyone know of any other things like this out there??- drzeus, on 10/10/2007, -0/+5Yahoo's YUI library has four CSS components: grids, reset, fonts, and base. Blueprint sounds very similar.
- ChrisGwynne, on 10/10/2007, -12/+1This looks really crap to be fair. I can't really see this taking off at all. Way too many un-needed elements. Should have just provided a clean bare-bones structure.
- crewof502, on 10/10/2007, -0/+9This is an amazingly useful tool. Creating the foundation for a good quality CSS design from the start every time. Similar to the idea behind Rails. Build a great tool based on convention over configuration.
- vade79, on 10/10/2007, -9/+1I think the word "framework" is literally starting to make me angry when I read it, kind of like "Web 2.0" did...well, does.
- avalot, on 10/10/2007, -7/+2I love it! It's a good dose of prescriptive design without bloatware. Well done.
The test page does have an issue in IE4.0... but then, what doesn't?
:) - VirtualRichard, on 10/10/2007, -15/+2Oh. For. *****. Sake. Get OVER it!!!
- maexus, on 10/10/2007, -12/+7A framework for CSS? CSS is fairly straight forward.
- CircleFusion, on 10/10/2007, -0/+4So is the concept of a framework. It's a time saver.
- glesica, on 10/10/2007, -1/+2straight forward?! are you joking? css is anything BUT straight forward. the basic rules and concept are easy to grasp, yes. but if good design is straight forward with it why are there so many sites dedicated to teaching people how to use it and how to do "tricks" with it? even just the IE fixes are too complicated for a casual (non-professional) web designer to handle easily. this isn't targeted at pros necessarily, it's targeted at anyone who might find it useful... and i'm guessing that's quite a few people judging by the number of problems people seem to have with CSS
- dgh1973, on 10/10/2007, -0/+3Dugg, I'm going to try it out.
- KelliShaver, on 10/10/2007, -10/+42This is neither "smaller" nor "easier to implement" than 90% of the CSS I code on a daily basis. Digg's CSS, for instance, is only 32k and while it's not the most complicated site out there, it's pretty typical. Blueprint starts at 40k and then you must add your own CSS on top of that.
I'd also rather have descriptive CSS and ID and class references, like "sidebar" and "main_nav" not "column span-11" and "prepend-4"
Then there's the whole other issue how ot forces a certain level of "sameness" on everything built with it and yes, maybe you can work around that, but it's far easier and faster to not have to create "work-arounds" in the first place.
Stifling creativity one CSS file at a time.....- reidman, on 10/10/2007, -0/+9If you look at the files which get included, they come to a grand total of 12kb.
I was going to say something about using "90% of the CSS you code on a daily basis", but then I clicked the 'valid CSS' link on your portfolio and got 6 errors and 65 warnings, mostly from ThickBox, a creativity-stifling library...
Pointless quibbling aside, creative designers/developers can use frameworks to do awesome things more quickly. The people putting this project down are trying to make themselves look like professionals too busy to trifle with fancy toys, but a lot of the comments against this framework -- and even the idea of a CSS framework -- are either ridiculous ("A framework for CSS? CSS is fairly straight forward") or factually wrong ("'grid' is another word for excessive divs that waste space and make the site overcomplicated").- vh1`, on 10/10/2007, -0/+2while I do agree with the GP, she wraps each input on her site in a fieldset
while yes, form elements should be in fieldsets, they don't each require their own
- vh1`, on 10/10/2007, -0/+2while I do agree with the GP, she wraps each input on her site in a fieldset
- xe54, on 10/10/2007, -0/+3I agree. Plus, the BP style sheets are very heavily commented... if you pop them into a css optimizer such as www.cleancss.com (which removes comments and redundant info) you are talking about less than 8Kb!
However I also agree about the semantic div titles like prepend-4 being useless for accessibility and particularly undescriptive. If I use this framework I will have to add my own classes to help make the site easy to understand. Thats a bit of a hack though.
- reidman, on 10/10/2007, -0/+9If you look at the files which get included, they come to a grand total of 12kb.
- ArnoldLayne, on 10/10/2007, -13/+7That sample layout looks like ass. Columns aren't lined up, the top picture is outside the left text edge, and the background makes it hard to read. Why is there so much of this crap from people who are so incompetent?
- kolofon, on 10/10/2007, -1/+6You are missing the point of the background lines Mr. Arnold.
- ArnoldLayne, on 10/10/2007, -6/+1Well, I guess they have some kind of layout grid on the sample page. Why do they have baselines visible on the main page? I just think you're better off doing the CSS yourself. If anything you will learn what a big pile of crap CSS is and that it needs to be fixed/replaced.
- iblastoff, on 10/10/2007, -1/+6wow. this is all going COMPLETELY over your head, isn't it?
- insub2, on 10/10/2007, -1/+2CSS a pile of crap? in what way? how is this so? It's always been so nice to me.
- ArnoldLayne, on 10/10/2007, -6/+1Well, I guess they have some kind of layout grid on the sample page. Why do they have baselines visible on the main page? I just think you're better off doing the CSS yourself. If anything you will learn what a big pile of crap CSS is and that it needs to be fixed/replaced.
- mcmlxxii, on 10/10/2007, -0/+1.....and the image floating out of the text.....
- kolofon, on 10/10/2007, -1/+6You are missing the point of the background lines Mr. Arnold.
- muniak, on 10/10/2007, -2/+8As far as I was always concerned, CSS was built around the content of your site, so that either could be easily and seperatly changed whenever. This title and description makes it seem as though the content is built around or "on top" of the style.
Seems to me, after reading some of the source on the tutorials, that it's using CSS to emulate using tables with divisions eg. (div class="column span-8 prepend-1 first border") . This seems a bit redundant, unless we're trying to cut out as much html from the standards as possible. What ever happend to keeping your source as small as possible?- Skardhamar, on 10/10/2007, -1/+11mbit lines were invented. Focus on kilobytes is so 90's
- kolofon, on 10/10/2007, -1/+5Besides the fact that your HTML code is gonna get ugly and the framework weighs 40k it still is a remarkable idea to have a nice steady grid lying in front of you while applying CSS code to a page.
The framework also contradicts the philosophy of separating style from markup. With the framework you are creating a layout structure within the HTML code as an opposite of normal CSS coding where you define all the structural properties in the CSS code. On the other hand, CSS isn't very good in mixing with other programming languages.
For instance if you want to create a chart with percentages from a database to represent the length of a bar you can only link information out of a database to a CSS element within the HTML code. With this framework you could modify the structure of the page with information from a database very easily because all the structural properties are inside the HTML code.
I'm looking forward to see this being properly developed. - pyroh, on 10/10/2007, -5/+1meh
- phoebus, on 10/10/2007, -1/+3This looks similar to some of the functionality that the Yahoo User Interface has in its CSS files. ( http://developer.yahoo.com/yui/reset ). YUI doesn't have a separate CSS file for print however.
- uuhclem, on 10/10/2007, -0/+1It seems as though id's like #wrapper, column, main, content, header have become an informal 'folksonomy' of content markup, with some sort of 'framework' as this attempts to provide, the way toward having the web contain a consistent XML structure is possible. At least in attribute format, so I applaud the idea if not the execution. Certainly google must be aware of these and is training the spiders to recognize content in different id's as having different meanings...
- TheBSG, on 10/10/2007, -13/+8This is a horrible concept. Completely ruins the idea of CSS. "grid" is another word for excessive divs that waste space and make the site overcomplicated. It'd be easier to just learn CSS.
- reidman, on 10/10/2007, -0/+6Did you even look at the website? Do you have any idea what a 'grid' is?
- badboibillie, on 10/10/2007, -0/+3like someone said earlier - bloated. There's so much junk in there that you don't need - it's way more efficient to just use base css templates and build upon that instead of using this catch-all css.
- makingme, on 10/10/2007, -0/+2Again, its a framework and the files are easily accessible and editable by the developer. Remove the cruft you don't need. They're not telling you to use this as the end-all, be-all solution to your css needs.
- MondayJBlack, on 10/10/2007, -4/+5Ask yourself, would you hire anyone that coded websites like that?
- arniemg, on 10/10/2007, -1/+2Yes.
- AussieScribe, on 10/10/2007, -2/+8For the record, *I'm* bloody impressed.
Ignore the nay-sayers. Damn fine work. Well done! - SpookyET, on 10/10/2007, -1/+7Eh. First, he still thinks in terms of tables. Second, that CSS is not sandboxed. Have fun embedding a forum or any other app in your site.
- joeyjojo, on 10/10/2007, -0/+2Tables are a logical way to layout anything. It's how it's always been done, for the most part. There's nothing wrong with the concept of tables. There are things to argue against in the use of actual table tags, but the concept of tables...ie rows and columns...ie a GRID is a very sound design concept to use.
I do agree that the IDs should be more semantic, but I'm also pragmatic, and there are definitely benefits to using a system like this.
- joeyjojo, on 10/10/2007, -0/+2Tables are a logical way to layout anything. It's how it's always been done, for the most part. There's nothing wrong with the concept of tables. There are things to argue against in the use of actual table tags, but the concept of tables...ie rows and columns...ie a GRID is a very sound design concept to use.
- JasonCox, on 10/10/2007, -8/+3Whoever the hell needs a framework to write CSS shouldnt be writting CSS in the first place.
- ubernostrum, on 10/10/2007, -0/+6Perhaps you could re-phrase that for other professions:
"Whoever the hell needs libraries and hardware drivers to write code shouldn't be writing code in the first place."
"Whoever the hell needs standard-sized boards and nails to build a house shouldn't be building houses in the first place."
etc., etc.
I mean, seriously: if you want to write a desktop application, do you first write an operating system kernel and low-level code for disk operations, display management, and so on? Or do you rely on the fact that these common, repetitive tasks have been handled by standard components you can pick up and take advantage of? Or if you were going to build a house, would you first go out and cut down some trees, and open a blacksmith's shop to make your own hammers and saws and such, or would you go to a hardware supply store and buy some tools and standard-sized pre-cut lumber?
- ubernostrum, on 10/10/2007, -0/+6Perhaps you could re-phrase that for other professions:
- bitsyboffin, on 10/10/2007, -8/+3Ack! THE WEB IS NOT PRINT, you cannot and should not apply your "print way of doing things" to the web. This "grid framework" is little more than a reinvention of tables, except far more untidy, far more verbose, far more confusing, and far less well tested.
It really ticks me off when so called "web designers" don't understand even the basics of CSS, or when they abuse it because of that, I wrote an article on it a while back: http://code.gogo.co.nz/developers/common_css_foibles.html- MScrip, on 10/10/2007, -1/+4> "It really ticks me off when so called "web designers" don't understand even the basics of CSS"
What did web designers do before CSS? There were plenty of web designers who were employed from 1995-2002.- bitsyboffin, on 10/10/2007, -1/+1Chewbacca.
- makingme, on 10/10/2007, -0/+1Ball aching. Thats all you're doing.
- DOGPARTY, on 10/10/2007, -0/+3Grids are the most important part of any design, you havent a ***** clue what your talking about.
Blueprints grid doesn't appear to line up right for me FF2
- MScrip, on 10/10/2007, -1/+4> "It really ticks me off when so called "web designers" don't understand even the basics of CSS"
- homesqua, on 10/10/2007, -2/+3CSS errors: http://jigsaw.w3.org/css-validator/validator?uri=http://bjorkoy.com/blueprint/index.html
and two alt tag errors for the html... not that they really matter..
I just think it's funny to see accessibility errors on this. - olavfb, on 10/10/2007, -2/+42Hi guys!
I made this framework, and really appreciate your comments, both positive and negative. I'm well aware of the somewhat laughable notion of using class names such as "column" and "span-11" and so forth.
However, I wanted to create a light-weight alternative to YUI, and this is as far I've come. I hope to develop it further, but I can totally understand the criticism uttered in the comments above.
If you like it, I hope you'll find it useful (I know I will). If not, well, good day to you. ;)- bambala, on 10/10/2007, -0/+3Well done. One of the parts that I like about YUI, is that they also host the libraries for you.
- reidman, on 10/10/2007, -2/+7olavfb:
You should know better than to try to do something useful with your time. Luckily, there are plenty of highly-accomplished designers and developers here more than willing to ridicule your efforts.
Seriously though, the fact that you brushed off some of the moronic comments in this topic is commendable. Digg needs more users like you. I'll be working with your framework in my next project, hopefully I can add something useful to it (or remove something unnecessary).
- digger1942, on 10/10/2007, -1/+2The grid feature looks really useful. I've always had trouble getting my divs where I want them, despite spending hours on w3 websites and searching Google. Maybe I'm still thinking in terms of tables and boxes, and that's not good, or something. As for the overkill and bloat comments, I could see developing with it, then taking out parts you don't need, as a viable deployment process.
- sonofagunn, on 10/10/2007, -0/+1"Thinking in terms of tables" is not a bad thing. Good design has different elements line up nicely - a "grid" is a nice way to make this happen. There is a reason professional printing tools have a grid layout.
The html table tag is bad for layout because of semantic reasons(a table should contain tabular data) - not because lining everything up in columns and rows is bad.
- sonofagunn, on 10/10/2007, -0/+1"Thinking in terms of tables" is not a bad thing. Good design has different elements line up nicely - a "grid" is a nice way to make this happen. There is a reason professional printing tools have a grid layout.
- stylepile, on 10/10/2007, -1/+1I personally think this is a good FOUNDATION. I'll edit it to my way of thinking and needs.
Some of the commentors on this are commenting on the SAMPLE LAYOUT??? Come on people, it's showing the usefulness of having columns and line height references. It's not supposed to be a Zen Garden entry.
And for those who insist on hand coding everything from scratch without keeping some sort of library to start their project with must never make deadlines. Stop being elitists. - SPThom, on 10/10/2007, -0/+2I dunno... For some reason, the thought of putting CSS on a grid system seems backwards to me. Granted, the sample page and tutorial pages reveal cleaner code than you'd get with a tabled site... But I don't know if I could really invest in a framework that doesn't provide any full, fluid-width design capability.
On the other hand, it would appear to solve the problem of equal column heights, or in other words, columns filling down to meet the bottom of other columns, and that's no small feat. - MalDON, on 10/10/2007, -7/+2Buried as "highly inefficient"
- MrSunshine, on 10/10/2007, -2/+2"Planned features
* Support for PNG transparency in IE5.5+ (js)"
How old is this? - makingme, on 10/10/2007, -0/+3The grid-based system is a method used in print design. CSS libraries or frameworks are there to improve effeciency. Give you a better start from the gate. Not everyone is into grid systems, but most CSS developers I know ALWAYS zero-out or reset certain CSS elements. I've mentioned in previous comments the acronym DRY. The only thing CSS and JS libraries do is prevent the laborious recreation of regularly used css style definitions. How about everyone stop their ball aching and learn how to not repeat yourselves.
- stylepile, on 10/10/2007, -0/+0Exactly!
- chaosmachine, on 10/10/2007, -1/+440k? wow, no thanks.
- SomeImagination, on 10/10/2007, -4/+0People wouldn't need this if they actualy learnt css and re-used code snippets from old projects
- ozsynergy, on 10/10/2007, -1/+3In IE 6.0 the "demonstration" page doesn't display properly. The columns display vertically.
Sadly, IE6 exists and still commands an undeserving high market share.
Yet another reason not to use this framework. - svivian, on 10/10/2007, -2/+3Ew, how about next time removing all the Mac folders/files. I don't want __MACOSX or .DS_Store clogging up my folders.
And like most everyone else said, it's pretty pointless. Everyone has their own ideas of what are the best default styles, let them create their own CSS template for reuse.- DOGPARTY, on 10/10/2007, -0/+1pfft no one cares about your ***** yellow folders
- chrism1128, on 10/10/2007, -0/+2I'm not feeling it.
- natch, on 10/10/2007, -2/+1The developer said he wanted to make a "lightweight alternative to YUI."
How is this lightweight?
With YUI, the css (reset, fonts, grids, base) weighs in at well under 4K.
With your framework, the css weighs in at 40K. Ten times bigger.
Am I missing something here?
And yours says "Don't use this with important sites!" Not exactly confidence inspiring. With YUI I'm getting the full expertise of Yahoo!, which is not something to be dismissed.- ubernostrum, on 10/10/2007, -0/+2I downloaded the zipped Blueprint package. File sizes:
grid.css: 4k
print.css: 1k
reset.css: 1k
screen.css: 718 bytes
typography.css: 3k
Total: 9.7k
Compare to YUI (in both cases, going by the non-minimized versions, since Blueprint doesn't ship minimized copies of its files):
fonts.css: 4k
grids.css: 8k
reset.css :4k
Total: 16k
What was that you were saying?
- ubernostrum, on 10/10/2007, -0/+2I downloaded the zipped Blueprint package. File sizes:
- Error601, on 10/10/2007, -5/+1Yea, that's what we need...yet another web framework.
- vaako, on 10/10/2007, -6/+0I just downloaded the Blueprint, but there is no .exe in the folder. Just few .txt, folder, and lib. How do I use this program?
Thanks! - tilleyrw, on 10/10/2007, -1/+1vaako, web pages are text files. HTML pages are text files. CSS files are text files. Repeat after me.
- vaako, on 10/10/2007, -3/+0Okay!
Your ghey!
- vaako, on 10/10/2007, -3/+0Okay!
- anamanaman, on 10/10/2007, -1/+1Yaml is also a good CSS framework... more mature (or maybe "bloated") than blueprint. Terrible name though.
http://www.yaml.de/en/home.html - controltheweb, on 10/10/2007, -0/+1Amazing variety of comments on this. You'd think it was an article on SEO....
- AceTracer, on 10/10/2007, -0/+1I don't get it, how is this easier than building it myself? Frameworks are generally a good idea for building MVC models, and maybe even a framework that involves HTML, CSS, and Javascript would be a nice idea, but I don't see why this is necessary for just CSS.
- ChrisTek, on 10/10/2007, -0/+2To implement this, I would double the size of my CSS, require memorization of the whole stylesheet, and spend twice as much time trying to cancel out and work-around things I don't like, or that need to be changed.
No thanks. - ptrkmkl, on 10/10/2007, -0/+3If nothing else, this has inspired me to make my own framework from which to start my projects.
- hotnsour, on 10/10/2007, -0/+0now what we really need here is a script/tool to process a directive file that combines the existing framework of Blueprint with custom (meaningful) classes, ids, etc.
so you design away and use the framework as desired, add a few descriptive directives to translate the css and BAM! coolness++ - bradkovach, on 10/10/2007, -0/+1I've been playing around with this for a while now. I have to say that I love it.
- Styleboost, on 10/10/2007, -0/+1Bra jobba, Olav!
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2008 — Content posted by Digg users is