Themeing Haiku with Haml, Sass and Peroxide

Time slot: 
March 9th, 2:15 PM - 3:15 PM
Room: 
Chicago 10
Track: 
Theming
Experience: 
Intermediate

It's time to face a harsh truth, HTML and CSS are messy languages that lead to incomprehensible templates and stylesheets. Thankfully, there is Haml, an elegant templating language, and Sass, a clear and concise styling language to clear away the muck. Using beautiful syntax and sensible tools these languages are assets that no theme developer should be without. This presentation will show how these languages can now be seemlessly used with Drupal through the peroxide theme engine allowing themes to be created with concise markup and clear styles.

This presentation will cover:

  • The syntax of Haml and Sass and show how they can be used to create clearer theme code.
  • Tools such as variables, mixins and nesting in Sass that make stylesheets more clear and concise.
  • How Haml and Sass can be used with Drupal to cut down on the time needed for theme development and maintenance.
  • How the powerful compass CSS framework built into peroxide can greatly speed theme development.

Video at archive.org.

Intended audience: 

This presentation is for both coders and themers that want to learn how Haml and Sass can be used to make comprehensible, maintainable and beautiful themes. This is targeted at people that have some knowlege of Drupal themeing or module development, and that have a good background in HTML and CSS.

Questions answered by this session
Question 1: 
What is Haml and what is it used for? What is Sass and what is it used for?
Question 2: 
What is the syntax of Haml? How does Haml make it easier to make templates?
Question 3: 
What is Sass syntax like? How can the abstractions built into Sass make for shorter and more comprehensible stylesheets?
Question 4: 
What is the peroxide theme engine? How does it allow you to use Haml templates and Sass stylesheets with Drupal?
Question 5: 
What CSS frameworks are built into peroxide? How can these be used to speed up theme development?
Themeing Haiku with Haml, Sass and Peroxide has been selected and voting is closed.

Comments

Am very interested

We've just moved to doing sass (.scss variant) on our themes. I've been watching your github repo with interest.

Drupal strongly needs new theming architecture ideas. I hope this talk gets selected and sass takes off within the Drupal community.

I'll be there!

Edit: Nevermind answered my own question.

Looking forward to this presentation Kyle. I am currently writing a Peroxide theme that has a variable grid (based on 960.gs) where the themer can define the grids width, as well as incorporating Modernizr, HTML5 Boilerplate, and CSS3 PIE.

Hopefully I'll get it done by Chicago, I'd love to chat at Drupalcon about Peroxide.

Diamond Sponsors

 
VPS NET
Palantir.net

Platinum sponsors

 
Trellon
workhabit

Gold Sponsors

 
Microsoft
Drupal Connect
Treehouse Agency
Chapter Three
NorthPoint
HotDrupal.com
Duo