You hear a lot about the grid in your print classes, well, you’ll hear a lot about it in this class too. But this time you would actually get to experiment with it as well. First, let’s briefly go again through the Grids Are Good presentation by Khoi Vign from NYtimes.com and Subtractions.com fame.
After getting your hands dirty in html, it is time to dive into CSS. Luckily we are not starting from scratch and a lot of the heavy lifting will be taken care of for us by BluePrint CSS – a Cascading Style Sheets framework. What does Blueprint gives us?
- CSS reset for default browser styles
- An easily customizable grid
- A way to separate custom designs from the basic grid settings
- Some default typography
- A stylesheet for printing
- A typographic baseline (should we choose to use one)
What do you need to do?
- Download BluePrint CSS
- Unzip it into the directory where your HTML file is
- Open the css files in your favorite text editor
- Follow the instructions and documentations inside the CSS files
- Choose how many columns and width you want in your grid
- Build your grid using the Grid Generator
- Replace the code on your grid.css with the one provided to you through the generator
- Go back to your html file and include a link reference to the CSS files in the header (check the documentations if you’re not sure how to do it)
- Start assigning classes to your html elements, adding divs and other elements appropriately to group them together and develop your layout.
- Create another CSS file to include your own css, make sure it is the last to be linked to the html page so it overwrites the default Blueprint styles.
- Write your CSS in that file and use firebug to monitor your changes
- Enjoy
You can check the quick start tutorial here.
For more resources, check the Blueprint CSS wiki page
