-
Notifications
You must be signed in to change notification settings - Fork 7
Example 01
This tutorial is aimed at website developers who already knows SASS (Syntactically Awesome Stylesheets). You don't need any knowledge of compass or blueprint but you should have compass installed on your computer. To install compass, follow the (very short) install procedure on the compass website.
So let's begin! Create a new project:
# compass create 01 --using blueprint
This command tells compass to create a new project into the new directory "01". (See Compass Command Line Documentation - Blueprint Framework)
If everything goes well, compass should output each and every files created. Let's take a look at the structure :
directory 01/
directory 01/images/
directory 01/sass/
directory 01/sass/partials/
directory 01/stylesheets/
create 01/config.rb
create 01/sass/screen.scss
create 01/sass/partials/_base.scss
create 01/sass/print.scss
create 01/sass/ie.scss
create 01/images/grid.png
create 01/stylesheets/ie.css
create 01/stylesheets/print.css
create 01/stylesheets/screen.css
This is the default project layout for every new compass project. The purpose of the images and stylesheets folders are obvious but the sass folder and the config.rb file should be new to you.
The sass folder contains all your styles which are compiled by compass into the stylesheets folder. This magic happens with this command :
# compass watch 01
This command tells compass to watch the project directory "01". When a file in 01/sass is modified, it will be automatically compiled into the stylesheets direcotry.
Compass didn't generate any HTML page because it's only a style framework. It is completely unobtrusive for your HTML. In fact, you can use any html backend (haml, erb, php, jsp) it doesn't matter.
Create index.html containing the following :
<!DOCTYPE>
<html>
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
</body>
</html>
Note the three "link" elements, this is how you integrate compass into your HTML. Note the href is an absolute path, it begin with a "/". Set the path according to your web server's specification. If you're not in the root directory, you should remove the first "/" in the href of each link elements.
Let's add some content :
<!DOCTYPE>
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</header>
<section id="lipsum-1">
<p>Cras elementum tortor in arcu tincidunt ut rhoncus quam posuere.</p>
</section>
<section id="lipsum-2">
<p>Duis vel tellus tellus, non condimentum ligula. Proin sagittis dignissim turpis, vitae semper dui tristique non.</p>
</section>
<section id="lipsum-3">
<p>Morbi sed lacus elit, sed bibendum massa. Donec venenatis posuere eros vitae sollicitudin.</p>
</section>
<footer>
<p>Curabitur cursus nisi et odio interdum vulputate. Etiam vestibulum hendrerit nunc tincidunt fringilla.</p>
</footer>
</div>
</body>
</html>
The header, section and footer elements are new HTML5 elements to add some semantic the our page. You could have use any container of your choice (div, section, header, footer, etc.) the layout will reside in our style. This is not a mistake, the layout will be done completely with compass (and blueprint).
Our style needs a grid with 24 columns. To do so, we will later include blueprint which as a wonderfull grid system but now, we will declare some default variables for our style.
Open 01/sass/partials/_base.scss and clear all it's content. Add this :
$blueprint-grid-columns: 24;
When you import a compass partial into your main style, there are often default values you can override. The base partial is the best place to put them. In our example, the number of columns for our layout is overrided to 24. (Note : The default value of the blueprint-grid-columns is actually 24, I voluntarily redeclare it to show the uses, and the best practices, of the base partial). (See Best practices)
First we need some imports.
Open 01/sass/screen.scss and add :
@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
First we import the reset and then the base partial with our default variables and the last import is the blueprint css framework (compass version). (See Blueprint Reset - Blueprint Module)
Here's the rest of this stylesheet :
body {
@include blueprint-typography(true);
@include blueprint-debug;
#container {
@include container;
@include showgrid();
}
header, footer {
@include column($blueprint-grid-columns);
}
#lipsum-1, #lipsum-2, #lipsum-3 {
@include column($blueprint-grid-columns/3);
}
#lipsum-3 {
@include last;
}
}
The first include is typography because the reset remove all style from our HTML. With the typography includes, you will get nice fonts and style for your typography with minimal effort. (See Blueprint Typogrpahy - Blueprint Debug - Blueprint Grid)
Remember that you can override all the blueprint's attribute in your _base.scss partial like this :
$blueprint-font-family "Helvetica Neue", Arial, Helvetica, sans-serif
$blueprint-fixed-font-family "andale mono", "lucida console", monospace
$blueprint-font-size 12px
The next include is the blueprint debug. For our website sample, I wished to show you the grid. Notice de showgrid() include in the #container element. This will show 24 beautiful columns behind our HTML page.
The #container element include the "container" style which will center our website and will have a default size of 950px.
The header and the footer use the variable we defined because they take a full row each. On the other hand, the lipsum-1/2/3 elements will get the third of a row ($blueprint-grid-columns / 3).
The last element of a row should include "last". This is a little hack because the element can be rendered on the other row on some browsers.
That's it, you should have this example running without any trouble. You have achieve a presentation-free HTML with the compass framework and the help of blueprint.
For any suggestion about this tutorial, you can send a pm to me. For questions about compass, blueprint or sass, I refer you to their website.
Compass: http://compass-style.org
Blueprint: http://blueprintcss.org/
Sass: http://sass-lang.com