How to Make CSS Layouts With Blueprint, a CSS Framework

For more web development tutorials check out http://webhole.net/
BlueprintCSS is a framework that makes cross-browser CSS. Making layouts can't get any easier than this.

Category:

Science & Technology

Tags:

• css
• blueprint
• blueprintcss
• css framework
• css layouts

[maderadesign]

Que merda de inglês é esse ?

WTF this voice ?

[webholevids]

@maderadesign es tu padre hablando, pon atencion rmf

it's your daddy talking, now listen up lol

[arashisakuraiba]

Good tutorial=) i'm just starting to learn to use blueprint. i wonder i there's a way to make tables with blueprint?

[webholevids]

@arashisakuraiba yes blueprint has a couple of classes to style tables but they are nothing out of the ordinary, I personally don't like them. Look through the source for the word "table" and you'll find these classes in that group.

[samson876]

Great Tutorial! What software are you using? And, how did you draw that box in firefox?

[webholevids]

Thanks, am glad to know people like my tutorials.

Answer to second question:

I used a firefox add-on called "Measurelt" to draw the box.

Answer to first question:

Am not sure what software you are asking about. The one to look at the source? that is another add-on called "firebug".

[webholevids]

Yes, blueprint comes with a stylesheet called "form.css" that you can use to style text boxes, buttons, form backgrounds and error, notice and success messages.

Would you like to see a video on that?

[joncallum]

Great video - really clear and concise. Thanks

[00ImRightYourWrong00]

This is great for the basics, but I really need a more advanced blueprint tut. For example maybe showing the append and prepend class in detail or how to avoid margin and padding difficulties, or how to effectively add borders with out destroying the pixel perfect grid....

If anyone wants to step up it would be very appreciated!

[andresmillang]

@webholevids

I would!

[anderzom]

@webholevids tables are not good for layout but good for comparison boxes by example

[LimitedWard]

That's really cool! This can save sooo much time.

Great tutorial btw :)

[harisswathi]

Good tutorial

[willzurmacht]

I realized my comment 4 months ago was insensible. Thank you for this tutorial :)

[bawilcutt]

Thank you, thank you for this video!!! I have to use Blueprint (or some other framework) for a site I'm making for class and I was SO confused. This really helps. :)

[mythhealer]

I'm glad I waited to learn all the tricks about web making before I tore out all my hair in agonizing frustration. Guess how I first learned about Blueprint... It was a requirement for a web developer job!!!! LOL, the job posting required all these extra special skills, and mentioned something about CSS blueprint. Ok, so I master blueprint, what then? Master the art of web design? Why not!