Wednesday 17 March 2010

Rails - Day 6 - Blueprint, Compass, SASS and HAML

Rails  - Day 1 - The RubyGem Love Story
Rails -  Day 10 - Testing Rails Controllers
Rails -  Day 13 -ActiveRecord Relationships Part II
Rails - Day 15 - Rails Forms Part II
In the last post I talked about rails migrations and how schema modifications are made through the rails workflow and how rails takes care of the lowlevel SQL.

After the last post, we have in theory seeded our ever so simple database thanks to a combination of rake and rails.  

We are now going to move onto some UI with an introductory piece on a few of the tools we are going to use to create our views.

I am going to introduce a few exciting things I have discovered in Rails which you might be able to use in a greenfield .NET project.  I am going to introduce them and then bring them together with a trivial example.  The first owes nothing to rails and is a new craze that is sweeping the design landscape and is that of the CSS Grid Framework

CSS Grid Frameworks

Layout grids are an old concept used in print publishing long before the Web.  They are essentially a lattice that divides horizontal and vertical space in consistent units where, text, headlines, images and just about any visible HTML element can be placed.  

Below is an example of a grid layout and how we might begin to think about our web pages in a printing style that pre-dates the web.  We start to think about anchoring UI elements to specific coordinates of a grid:



As I hope you can see on the image above, we carve up our content into regions and then place html elements within these regions. I will explain later how we can position our elements at these specific coordinates but it is a thrilling concept for a CSS heretic like myself.  CSS to me has, until recently, been a matter of thrashing and guess work for most of the time.  When I first started to use a CSS framework, it was a complete revelation that I could actually precisely position my html elements anywhere on a page. 

After some diligent research, it seemed that blueprint was the most feature rich and active framework out there.  Feature rich by my estimation anyway.

I had been looking into CSS frameworks about the same time as I started getting into rails and I rightly assumed that rails would have grasped this concept and come up with its own unique slant on how to harness this emerging technology.

A little research turned up Chris Eppstein's Compass gem.  This is a very nice meta-framework, which can be used with rails and comes in a nicely packaged gem and also has blueprint support.  I excitedly progressed further.

It turned out that compass uses something I had never heard of before named Sass to provide the power of frameworks like BluePrint. Sass it seems is rarely mentioned in the same breath without the view engine HAML.

I will now offer a brief introduction to HAML, SASS and Compass.

HAML and SASS

These two tools take the verbosity out of HTML and CSS. 

HAML - XHTML Abstraction Markup Language uses a variation of the convention over configuration to substantially reduce the amount of text in a view, by using indentation to demarcate blocks. And since div is the most commonly used element, you don't need to type it at all except when there's no ID or class assigned to it. A simple example is

01%h1 This is the title
02 
03    .some_class Some free text
04     
05    .someother_class
06        .userclass
07            .username.label Name
08            .userage.label Age
09             
10        for user in users
11            .username= user.username
12            .userage= user.age

The above generates the following HTML:

01<h1>This is the title</h1>
02 
03<div class="some_class">Some free text</div>
04<div class="someother_class">
05    <div class="userclass">
06            <div class="username label">Name</div>
07            <div class="userage label">Age</div>
08            <div class="username">Bill</div>
09            <div class="userage">35</div>
10            <div class="username">Viv</div>
11            <div class="userage">32</div>
12            <div class="username">Chris</div>
13            <div class="userage">28</div>
14    </div>
15

SASS - Syntactically Awesome StyleSheets offers similar simplification for CSS and adds the use of multiple types of variables, directly as constants and through mixins.  Mixins enable you to define reusable groups of CSS attributes and then include them inline.  As in HAML, indentation is used to represent content and inclusion.

By content I mean attributes and the corresponding value and inclusion that a selector is effective only when used as a child of the previously specified selector:

01!heavy = bold // a simple variable
02=heavy_label    // a mixin
03    :font
04        :weight !heavy
05        :size 126%
06    :text-decoration underline
07 
08.some_class
09    +heavy_label
10    :color #0000bb
11     
12.label
13    +heavy_label


This SASS gets this CSS:

01.some_class {
02    font-weightbold;
03    font-size126%;
04    text-decorationunderline
05    color#0000bb;}
06     
07 .label {
08    font-weightbold;
09    font-size126%;
10    text-decorationunderline}

Compass

Compass takes the CSS supplied Blueprint and other supported frameworks and transforms them into SASS files;  HAML comes with utilities to Convert SASS to CSS, HAML to HTML and vice versa.  There are also some other command line utilities, all invoked through the compass executable.  For rails projects, compass automatically updates the compiled CSS files whenever you change the SASS.

In this post we have introduced the blueprint CSS framework, HAML, SASS and last but by no means least Compass.

In the next post we will create our first view.





4 comments:

  1. Impressive!!! this software is really amazing!!! mainly because contained old systems that works perfectly.

    ReplyDelete
  2. nice!!!! super chill

    ReplyDelete
  3. Interesting stuff, keep it up. This is an interesting blog post here.... Keep posting such an awesome blog post here.... I would like to thank you for sharing your experience and the time it took to post!

    ReplyDelete