Blueprint CSS framework :Incorporating
What does Blueprint do?
Incorporating Blueprint CSS into your workflow
What does Blueprint do?
Blueprint's core feature set is as follows:
1. It performs a mass reset of browser default styles.
2. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
4. It provides a sensible default print stylesheet.
5. It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.
It's important to understand that all elements are override-able. Blueprint doesn't set out to be a stand-alone stylesheet for your site. Rather, it's a set of base styles you, the designer, can build on top of, override, or nix completely (by adding your own stylesheet(s) in addition to the ones Blueprint provides).
Think of it like this: building a design with CSS is like having a bucket full of melted plastic to work with. Building with Blueprint as your base is like having a set of Legos—but you still also have that melted plastic if you need it.
The grid
Blueprint's crown jewel is its grid-building tools. By default, Blueprint's grids.css file sets up a 950px wide grid of 24 columns, each 30 pixels wide with 10 pixel gutters. This grid is likely to be flexible enough for most of your needs.
However, the grid is fully customizable. If you need more or less columns or a wider or narrower total width, you'll want to use the Blueprint Grid CSS Generator tool. It not only provides a replacement grids.css file, but it also creates a grid.png image file for use as a background image during development—very handy for making sure everything lines up properly. The grid generator is a key piece to the framework, even if it's technically a third-party tool. Without it, Blueprint is limiting and controlling, forcing designers to use a single layout grid. With it, designers have endless freedom.
Incorporating BlueprintCSS into your workflow
If you intend to use Blueprint to build a design, it's best to decide this before you start working in Photoshop (or your design tool of choice). You can retrofit a design with Blueprint HTML and CSS, but it's much simpler to plan it from the beginning.
The designer will want to hit the afore-mentioned grid generator tool to come up with the exact number of columns, gutter size, and total width they're going to use. They should save the exported grid.css. Then, they can set up a Photoshop document with guides replicating this column structure.
At Blue Flavor, the designer may or may not be the same person that ends up building the HTML and CSS templates. When the designer hands off their finished comps to theHTML/CSS template author, he/she should make sure to also include the associated grid.css and let the template author know about the guides in the comp.
Tips, tricks, and best practices
When using Blueprint, it's really important to read all of the included CSS and fully understand what everything does and how it works before you dive in too deeply. If you don't, you're likely to miss really important elements, such as the .border, .colborder, .box, and .hide classes.
Also, don't be fooled by the grid documentation's suggestion to use div elements for all column units. You can apply the .column class to any element. For example, if you're using the default grid and you want a bar across the top of the page that includes your logo on the left and your navigation on the right, you can add class="column span-12" to an h1 and a ul, rather than making unnecessary divs.
Use multiple .container divs to create "rows" in your layout. Your header may be one container, your content may be another, and your footer may be yet another. Or, you may have many more. Don't think can only have one container.
Remember that you don't need to use all of the pieces of Blueprint CSS. For example, if you're not doing a grid-based layout, you may not need grid.css. But, reset.css and typography.css may still be useful to you.
And finally: don't ever edit Blueprint's files! A much better practice is to include your own stylesheet and override Blueprint. Editing Blueprint's CSS files will make upgrading to the latest version of the framework much more difficult. Keep your work separate from the framework.
http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/
http://www.blueprintcss.org/tests/parts/sample.html
Incorporating Blueprint CSS into your workflow
What does Blueprint do?
Blueprint's core feature set is as follows:
1. It performs a mass reset of browser default styles.
2. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
4. It provides a sensible default print stylesheet.
5. It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.
It's important to understand that all elements are override-able. Blueprint doesn't set out to be a stand-alone stylesheet for your site. Rather, it's a set of base styles you, the designer, can build on top of, override, or nix completely (by adding your own stylesheet(s) in addition to the ones Blueprint provides).
Think of it like this: building a design with CSS is like having a bucket full of melted plastic to work with. Building with Blueprint as your base is like having a set of Legos—but you still also have that melted plastic if you need it.
The grid
Blueprint's crown jewel is its grid-building tools. By default, Blueprint's grids.css file sets up a 950px wide grid of 24 columns, each 30 pixels wide with 10 pixel gutters. This grid is likely to be flexible enough for most of your needs.
However, the grid is fully customizable. If you need more or less columns or a wider or narrower total width, you'll want to use the Blueprint Grid CSS Generator tool. It not only provides a replacement grids.css file, but it also creates a grid.png image file for use as a background image during development—very handy for making sure everything lines up properly. The grid generator is a key piece to the framework, even if it's technically a third-party tool. Without it, Blueprint is limiting and controlling, forcing designers to use a single layout grid. With it, designers have endless freedom.
Incorporating BlueprintCSS into your workflow
If you intend to use Blueprint to build a design, it's best to decide this before you start working in Photoshop (or your design tool of choice). You can retrofit a design with Blueprint HTML and CSS, but it's much simpler to plan it from the beginning.
The designer will want to hit the afore-mentioned grid generator tool to come up with the exact number of columns, gutter size, and total width they're going to use. They should save the exported grid.css. Then, they can set up a Photoshop document with guides replicating this column structure.
At Blue Flavor, the designer may or may not be the same person that ends up building the HTML and CSS templates. When the designer hands off their finished comps to theHTML/CSS template author, he/she should make sure to also include the associated grid.css and let the template author know about the guides in the comp.
Tips, tricks, and best practices
When using Blueprint, it's really important to read all of the included CSS and fully understand what everything does and how it works before you dive in too deeply. If you don't, you're likely to miss really important elements, such as the .border, .colborder, .box, and .hide classes.
Also, don't be fooled by the grid documentation's suggestion to use div elements for all column units. You can apply the .column class to any element. For example, if you're using the default grid and you want a bar across the top of the page that includes your logo on the left and your navigation on the right, you can add class="column span-12" to an h1 and a ul, rather than making unnecessary divs.
Use multiple .container divs to create "rows" in your layout. Your header may be one container, your content may be another, and your footer may be yet another. Or, you may have many more. Don't think can only have one container.
Remember that you don't need to use all of the pieces of Blueprint CSS. For example, if you're not doing a grid-based layout, you may not need grid.css. But, reset.css and typography.css may still be useful to you.
And finally: don't ever edit Blueprint's files! A much better practice is to include your own stylesheet and override Blueprint. Editing Blueprint's CSS files will make upgrading to the latest version of the framework much more difficult. Keep your work separate from the framework.
http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/
http://www.blueprintcss.org/tests/parts/sample.html
Comments
Post a Comment
Thanks
Warm regards,
Karthikeyan.T
tkarthikeyan@gmail.com
www.carthworks.com
Call us 09445 2772 06