The Baseline Development Wordpress Theme has Blueprint plugged in already. There are some optional Blueprint plugins you can take advantage of. We’ll take a look at the fancy-type plug-in. (more…)
Posts Tagged ‘Blueprint Framework’
Blueprint Optional Fancy-Type Plugin
Monday, February 15th, 2010Why Use Blueprint and the 960 Grid System in the Baseline Theme?
Sunday, February 14th, 2010An Inventory of Blueprint’s Style Resets and Useful Classes
A friend contacted me about using the Baseline Wordpress theme, but asked why I included both Blueprint and the 960 Grid System. The short answer is that Blueprint has a number of browser resets that I like to take advantage of and 960 GS offers greater flexibility in terms of the width of columns and their gutter widths. Especially if you want to adhere to the Golden Ratio for design. 960 pixels divides very neatly into 3.
Let’s take a look at what Blueprint does to reset some things to establish a cross-browser baseline. (more…)
Blueprint: Taking a Close Look at grid.css
Monday, November 9th, 2009About Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
.container
/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}
When Using a Grid Layout CSS Framework, Do the Math
Tuesday, December 16th, 2008I recently spent an entire weekend trying to troubleshoot why Internet Explorer 6 kept wrapping the rightmost DIV in my design to the bottom of the page when no other browser did. In my case, I was using the Blueprint CSS framework that creates twenty-four 30 pixel columns, each with a 10 pixel right margin (except the 24th column, which has no right margin), to make a nice 950-pixel wide grid. The whole purpose of using a CSS framework is that it’s supposed to protect me from exactly the sort of problem I was having where different browsers display the page differently. I spent hours trying to figure out why Blueprint was failing in this case. Finally, on Sunday evening I figured it out. The enemy was not Blueprint. The enemy was me.
Above is an approximation of the Blueprint grid. (The thirty-pixel columns are in gray and the ten-pixel right margins in white.) Read the tutorial file for details, but basically, by defining “span-16″ as the class of your DIV, you wind up with a 630 pixel DIV with a ten-pixel right margin for a total of 640 pixels. Nice and neat, and it seemed perfect in my case since the photo I wanted to place on the right was 300 pixels wide. I even had ten pixels to spare. You’re probably a lot smarter than me, so you’ve already figured it out. Unfortunately, I spent the better part of a weekend working in this problem. Finally I was reduced to counting columns and I realized there’s no way to get a 300-pixel DIV using 40 pixel columns! Firefox, Safari & higher versions of Internet Explorer were more forgiving and formatted the page as I wanted. Only Internet Explorer 6 interpreted the code strictly in this case. The other browsers corrected for my math error. I blamed Blueprint for failing and Internet Explorer 6 for misinterpreting my CSS when I was at fault all along.
Forty X 7 (span-7) = 280. Just short of my needed 300 pixels. Forty X 8 = 320. Twenty pixels too wide which left an unwanted margin on the right of my photo. When I finally figured all of this out, I was able to use a combination of Blueprint classes and my own classes to consistently format the page the way I wanted.
Lesson learned: Leverage your CSS grid framework as much as possible, but also add up your columns to your page elements don’t get pushed around the page. It may still be necessary to define your own DIVS outside of the framework.
Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
Wednesday, November 26th, 2008Updated 12/3/2008
The other day I wrote about getting the Blueprint CSS framework into your Wordpress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.
<?php
$css = array('blueprint/screen', 'blueprint/ie', 'style');
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
echo $javascript->link($jslibraries);
?>
Let’s take these one at a time.
$css = array('blueprint/screen', 'blueprint/ie', 'style');
CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.
Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />
We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
So now:
$css = array('blueprint/screen', 'blueprint/ie', 'style');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
Results in:
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />
Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:
