Woven Thorns Productions

Step 1: Download Blueprint-CSS

Go to the Blueprint-CSS homepage and download the blueprintcss zip file.

Step 2: Extract the blueprint folder

Open the zip file and extract the blueprint folder to the root folder of your website, so if you typed yourwebsite.com/blueprint that folder would contain plugins, src, core .css files.

General concepts to keep in mind

Everything is in a container

The whole Blueprint-CSS enabled content must be inside a container, so wrap a big-ol div tag around all of your content and give it the “container” class. This will give the content a container to fit into.

Objects can have multiple classes

All of your objects such as Headers, Div tags, Paragraph tags, etc. can have multiple classes separated by spaces. So you could have a div tag like <div class="e;span-7 colborder"e> which means the div will span 7 columns and will have a border at the end of the column.

You could also have <div class="e;span-7 last"e> which means the div will span 7 columns and will be the last column on the row. So the next Div tag you enter will reside on the next row down.

Go Wide!

Whether you want to make a wide or narrow website, you can make custom blueprint-css files with your favorite width using tools like the Blueprint-CSS file Generator. You can even use this tool to define the width of each column.

Cascading Style Sheets Cascade

While the Blueprint-CSS kit and typography kit (included with Blueprint-CSS) are great starting points, you can still add color, graphics, and other styles to your layout. Simply add your own additional stylesheet (I strongly advise against redefining blueprint-css files, because updating them and getting help will be very difficult.) and start redefining or adding new styles.

Remember to reference your stylesheet after you reference the Blueprint-CSS stylesheets. That way you know yours gets the last say, but layout styles get “cascaded” down over your definitions. If that doesn't make sense, head over to The W3 Schools Site to learn a bit about CSS and how it works.

Play around and ask for help

Don't try to make it perfect the first time, make as many sample pages you can with Blueprint-CSS before making something that goes live, and ask for feedback from other web designers. (Just don't get offended if they think you have room for improvement!)

There is a great Blueprint-CSS Wiki with articles and links to other websites and communities that you can get plugged into and ask for help. Don't hesitate to get involved in an online community. Remember, you are more likely to get a response in a forum than email, because email relies on the person you asked responding, while forums allow anyone in the world with a few free moments to respond.