How to Make CSS Layouts With Blueprint, a CSS Framework

[Beatrix186]

I love that there is a video for this kind of thing! sometimes reading code is not for everyone and having someone explain it is much easier! THANX!

[dovic3107]

please how did you do in 2:45 to measure with value ????

[dovic3107]

how do you make if we want to reduce the padding between the columns ??

[dovic3107]

I don't know your firefox version but in my case : there are the 24 grids but the text with (class ="span-x" don't align at the same side .

it's the same on the others navigators

[dovic3107]

in 2:47 how do you make to draw the rectangle in order to calculate the 4 grids ??

I think it's in firebug

[dovic3107]

great tutorial !!

[jgestiot]

Great effort but I find kind of stupid to have videos about coding CSS, HTML or anything else. How do people copy and paste code to try their own thing? There is nothing better than a step by step tutorial using web pages when you are trying to teach somebody how to code. They don't need to hear you, they need to see what they have to do. A video is the wrong medium for this kind of teaching.

[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

[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!

[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!

[serpastudio]

interesting

[pankajphartiyal90]

Using span-# means that you are indirectly embedding styling information inside HTML which is a deprecated practice.

[Baios81]

nice simple tutorial! good job man :)

[michaeltrich]

Nice vid, you explained it well

[Pixel3]

Yes please, your tuts are simple to understand.

[jhencluff]

plain, short and simple. thank you for your tutorial. this is exactly what im looking for.

[slier81]

can u make equalize column using this framework?

[damhazitis]

i wonder why i cant post a comment?

[damhazitis]

hi there. i find this tutorial is very interesting especially for the newbies.

however, i wonder why i can't see any grid/columns displayed in the browser after i added the Showgrid class after the container;

is this because i dont have the measureit add on uve mentioned in one of your comment?

thanks in advance for your reply :)

[alozuldo]

Really nice tutorial!

I think Blueprint is a little bit better than 960 Grid

[damhazitis]

@alozuldo i agree!

[z00lus]

nice work! thanks for your intro to blueprint

[puschkin09]

Thanks this vid was very helpfull

[lordoftheflings]

Hey man, nice tutorial. Thanks.

[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.

[anderzom]

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

[colinxjcallahan]

Thanks for the great tutorial. Very clear and concise.

[ImTosS1]

Excelent tutorial Miguel it really helps me a lot, i´ll be waiting for new ones =D.

Regards!

[davesdaname]

this is great, just what I was looking for. thanks.

[rethinkhypnotherapy]

Thanks!

[liquidplastic62]

If you like Blueprint CSS, you'll love the new AIR app developed by Toki Woki called BOKS.

Just google it friends and see the magic.

[ichiwebb]

thanks miguel, that's very useful!

[tshawbshaw]

thanks! what a great introduction to not only blueprint, but also to using css instead of tables for all of us who have been slaving with tables for years!

sick vid

[dan80794]

Great help! :D...thank you.

[Proverbs21vs9]

I was introduced to frameworks today in class and was very unsure of it's usefulness. Your video have been a great help. Thanks.

[ferero22]

EXCELLENT VIDEO. Couldn't be clearer. When I first got introduced to BSS, I was totally LOST but now it is a different story. THANKS A BUNCH!!!

[graceoverall]

Sorry. By the way... will this work for making each "frame" load individually? How would I set that up? I'm sure there are plenty of techniques I'm unaware of. I'm trying to learn php and css at the same time. I'm already rather familiar with html.... Thanks!

[graceoverall]

Thanks Miguel, it was very helpful. I code in many languages both in webdev and programming so I prefer Notepad++, but it looks like a nice tool. I'm still new to webdev though so this was helpful.

Is it a more modern technique to use the spans like that? I don't believe I've seen it done in a grid like that before, but it seems rather organized. I suppose it might take a bit of getting used to though, no?

[Sergio0Oo]

how this work with images and dinamic boxes? how you ad a menu on this frame work? cause i try to add one but looks like that menu bar breaks most of the grid

[kwguy]

Thanks for this. Being new to CSS, I need all of the help I can get, and you just helped me!

[joncallum]

Great video - really clear and concise. Thanks

[JeanEUss]

Thanks, Miguel..

For a great intro tut to BluePrint CSS

[thugzanime]

GREAT tutorial 5/5 and it gos to my favorite list :)

[Eruonen]

You are full of shit, evilmachine.

[borisbars]

Nice job. Didn't feel like reading the docs but I followed along on your introduction using Dreamweaver and it was great. Just the right level of detail for an intro. Thanks.

[lBurt0n]

Just watched a 960 framework tutorial and it convinced me to give CSS frameworks a look. Had heard of Blueprint CSS before I'd heard of the 960 so had a look to see if someone had done similar so I could compare before diving in and giving them a go.

Needless to say, stumbled on this video and I'll have to say your tutorial convinced to try Blueprint over 960. Was a no messing about, clean and straight to the point demo of what its all about, both the vid and the framework!

Nice one!

[janidhaval]

thanks great tutorial... very easy and quick... and samson if you mean editor, he is using notepad++

[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".

[sermoa]

Thank you very much. Good tutorial. Is there more that Blueprint can do other than this, such as backgrounds, borders?

[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?

[sermoa]

I would love to. I've seen some example pages, but there's nothing quite like a video demo!

Please also see my screencast about making websites with Webby, which uses the Blueprint CSS framework.

[Trenthalo14]

Awesome beginning tutorial, thanks! A form tutorial would be great!

[grid212]

That would be great.

[m4niacojones]

@webholevids i do :D i just love your tutorial :) some guy told me about this CSS Framework and i just felt in love with it :D many thanks for your work! also, can't hardly wait the next tutorial on BluePrint Framework :), regards

[iAdemoSi]

@webholevids This screencast was a great help for me to understand how a css grid works. So yes, I would like to see more screencasts for things like forms, etc.

[verhaniamitk]

@webholevids

YES PLEASE....i would like to see a video on that...!!

[arnireynir89]

@webholevids yes please

[andresmillang]

@webholevids

I would!

[francisphan]

Excellent, thx!

[compres666]

Very nice introduction, thanks.

[vince251]

Thanks for the informative video