Designing with Compass – my new best friend with mobile applications

Ruby on Rails has always been marketed as “Webdevelopment that doesn’t hurt”, and a lot of this comes from standing on the shoulders of giants.

One of the more recent pair of shoulders to pop up is Compass. I would say that Compass is a natural development, stemming from Haml and Sass. It has made stylesheet a more natural part of Rails application development.

While a lot of tools exists for creating “html-generated applications”, stylesheets have always been left a bit in the cold. Sass helped a bit by adding variables and partials, but it still didn’t feel like programming.

Compass adds two important things:

  • mixins which enables you to create behaviors that you apply to several css classes.
  • functions which can be used to generate css values based on parameters

To show why this is great, here’s an example of doing grid layout the Right Way(tm) – and The-Way-You-Used-To-Do-It…

Grid layouts is usually coupled with frameworks like Blueprint, 960 and others. One of the problems with this is, that you do not get semantic markup in your HTML. Instead you get all kinds of layout classes. Here’s an simple example of a typical Blueprint HTML layout:

!!!
%head
%body
  .container
    .main.span-18
      ...a lot of content...
    .sideinfo.span-6.last
      ... links etc. in the sidebar...

and in HTML for those of you who have not tried Haml yet (you really should):

<html>
<head></head>
<body>
  
...a lot of content...
... links etc. in the sidebar...
</body> </html>

Why is this bad? Well if you are only developing for traditional computers, you’re fine. But what if you want to use the same webapplication for Android or iOS devices? HTML5 has a nifty feature for stylesheet selection based on the clients screen size:



etc...

This is pretty cool – but then all the span-classes from our Blueprint example suddenly gets out of context.

Now back to why Compass is cool

Compass makes grid-design easy without using anything but your semantic markup. Here’s the same layout done with compass (again in Haml and HTML) – explanations can be found on Compass’ homepage.

!!!
%head
  ...stylesheet inclusion...
%body
  .container
    .main
      ...a lot of content...
    .sideinfo
      ... links etc. in the sidebar...
<html>
<head>  ...stylesheet inclusion...</head>
<body>
  
...a lot of content...
... links etc. in the sidebar...
</body> </html>

IMHO much prettier – and much easier to mould with different stylesheets. Here’s what it takes in Compass using mixins and functions:

@import "compass"

$blueprint_grid_columns: 24;
$blueprint_grid_width: 40px;
@import "blueprint"

.main
  +column(18)

.sideinfo
  +column(6, true)

Now if you have a 320px device (phone) you could switch to a much simpler stylesheet – without worrying about any layout-specific HTML markup.

2 thoughts on Designing with Compass – my new best friend with mobile applications

  1. Every particular person who drives in the state of Pennsylvania is deemed to have provided his/her consent to a single or far more chemical exams of their breath, blood, or urine on a lawful request.

  2. all the time i used to read smaller content which as well clear their motive, and that is also happening with this article which I am reading at this place.

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>