A Closer Look At the Blueprint CSS Framework

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we'll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework. 1. What is Blueprint CSS? If you are like me, as in more of a developer than a designer, then you are familiar with the process of starting a new project and not knowing what to do with your CSS. Now, even if you are a rockstar designer who already has all this CSS stuff figured out, or if you aren't worried about how your layout will change over time because you are working from a PSD template or something, that doesn't mean that there is nothing to learn here. Spend your time innovating, not replicating. 2. reset.css This file sets sensible defaults across all browsers. No. 3. 4. The head of the document 5.

Compass Core Framework Source on Github The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions. This file can be imported using: @import "compass" Imports CSS3 – Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes. Non Imported Modules You can import these yourself if you want to use them.Layout – Page layout module.

Compass Help Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. If you're not familiar with Sass, you can take a look at these simple tutorials to get caught up. An introduction to Compass from Lorin Tackett on Vimeo. Installing Compass Compass is a tool that runs on the command line. gem install compass This will install Compass and Sass too. compass version Manual Setup compass create /path/to/project cd /path/to/project compass watch Now you can edit the *.scss files in the sass directory with the text editor of your choice. the compass watch process will automatically compile your them into css in the stylesheets directory whenever they change. Manual setup using the Blueprint Framework When starting a project from scratch: compass create /path/to/project --using blueprint When installing into an existing project: cd /path/to/project compass install blueprint Rails Setup compass init rails /path/to/myrailsproject

Blueprint Grid Source on Github The blueprint grid. This file can be imported using: @import "blueprint/grid" Examples Two Column Layout A semantic two-column layout Imports Clearfix – Mixins for clearfixing. Configurable Variables help $blueprint-grid-columns24 The number of columns in the grid. $blueprint-grid-width30px The width of a column $blueprint-grid-margin10px The amount of margin between columns Constants $blueprint-grid-outer-width$blueprint-grid-width + $blueprint-grid-margin The width of a column including the margin. $blueprint-container-size$blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin The width of the container. Functions view source span($n) Return the width in pixels of $n columns. Mixins view source blueprint-grid Generates presentational class names that you can use in your html to layout your pages. Note: Best practices discourage using this mixin, but it is provided to support legacy websites and to test the sass port against blueprint's example pages. view source last

Blueprint Module Source on Github The blueprint module is a simple way of importing all of the most commonly used blueprint modules. In addition, it provides a single mixin, +blueprint, that can be used to generate the blueprint css styles. Installing To create a project using blueprint: compass create my_project --using blueprint To add blueprint to an existing compass project: compass install blueprint To add blueprint and compass to a Rails project: compass init rails --using blueprint Alternate Project Layouts For any of the above commands you could have also selected the blueprint/basic or blueprint/semantic patterns. compass create my_project --using blueprint/semantic This file can be imported using: @import "blueprint" Imports Mixins view source blueprint($nested) Usage examples: As a top-level mixin, apply to any page that includes the stylesheet: Scoped by a presentational class: Scoped by semantic selectors: