Geekons.com: Christian Technology Podcast

Geek-Tweak: Direct access to the spiritual support desk

• Blueprint-CSS is a CSS framework that makes creating CSS based layouts easy and consistent
• Sample page I made: http://woventhorns.com/simple.htm
• Download it for free at http://blueprintcss.org
• Extract the entire folder somewhere on your hard drive, not in a website folder!
• Rename the extracted folder to something more readable, like "Blueprint-CSS"
• Copy the blueprint folder to your website's root
• Add the blueprint css files to your website (you can find the tutorial from Blueprintcss.org or the sample page I mentioned earlier)
• Create a master div tag with the class: container.
• Add whatever full-width header you'd like (could be as simple as an H1 tag or as complex as a header div with inline lists for menus)
• Add some columns, but make sure you are on a new row if you had a complex header.
• To add columns, first decide how many columns you want on this row.
• Next, decide how wide you want each column, keeping in mind the default grid.css file creates a 950px wide div with 24 columns spanning 30px each with a 10px margin between columns.
• So in our 3 column layout, we might want the largest column in the middle, so we might choose a 5, 14, 5 layout (meaning the left and right columns are 5 units wide and the middle is 14 units wide)
• Beware the use of append, prepend, or colborder, as each of these will affect the width of your columns! They are awesome tools once you understand them, so read through some tutorials first. (for example, if you make a row with colborders, just remember to subtract 1 unit from each span you use it on)
• Now that we have our header and we are ready to add our columns just add div tags for each column giving the first one the class: span-5, the middle: span-14, and the last:span-5 and last. (add two classes by separating each class with a space)
• The next div you create after a "last" div will be on a new row, and there is no reason you have to choose the same layout for the next row. (meaning one row may have 3 columns, whereas the next row might have 5)
• You can "nest" columns by adding divs within parent divs. So in our middle column with span-14, after we put a bunch of text in, we might directly after a paragraph tag add two divs with span-7.
• remember to add the "last" class to the final div, and keep in mind you only have as many columns as the div you are working in.
• Above all, keep playing! This is easy once you are used to it, but may take a while to get used to.
• Don't get discouraged if it doesn't click immediately. Check out the source of the sample sites at Blueprintcss.org
• When you've made a site with Blueprint-css email me, I'd love to see what you're doing in your church or ministry!