An Evil Mad Scientist

slinging code today for a better tomorrow.

Saturday, April 26, 2008

SASS Gridification - Part 1

Table of contents for SASS Gridification

  1. SASS Gridification - Part 1
  2. SASS Gridification - Part 2: Blueprint
  3. SASS Blueprint Grid on Github

A common problem faced by many CSS developers is the grid layout. In this example I will be using SASS arithmetic to create grid calculations.

If you just want to see the end result, here are two beautiful 8-column grids generated entirely using SASS arithmetic:

Fixed: 8 columns 100px wide with 10px margins
Fluid: 8 columns 12% wide with 0.5% margins

Also, if you haven’t the foggiest notion what SASS is (”… now there’s a frood who really knows where his towel is.”) you should probably read up on Hampton Catlin’s site about HAML and SASS.

To start things off, I looked around the net for what was already available on the subject. I already knew about Blueprint, though I had never really worked with it, and I learned about the YUI CSS grids toolkit.

Both of these CSS frameworks are very powerful. Personally, I don’t need that much power for this proof of concept, and it probably would have taken more time to adapt one of the frameworks into SASS than it would to program something from the ground up. So instead I just whipped out my text editor and started hacking.

(more…)

[Bloglines] [del.icio.us] [Digg] [Facebook] [Furl] [Google] [MySpace] [Reddit] [Sphinn] [StumbleUpon] [Technorati] [Email] More »
Next in series
posted by Lorin Tackett at 10:20 pm  

Sunday, March 30, 2008

Mix XHTML with HAML

I am a huge fan of HAML for generating templates in Rails.

A feature I was previously unaware of in HAML is that you can mix regular XHTML code in with the HAML code. This is especially useful for inserting an XML prolog to your template layout. I recently saw this exemplified on Robot Has No Heart

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
%html{"xmlns"=>"http://www.w3.org/1999/xhtml", "lang"=>"en"}
  %head
    %title Layout Example
  %body= yield

Cool, huh?

As you may know, adding an XML prolog forces Internet Explorer 6 for Windows into Quirks Mode even though a doctype has been declared, while other browsers remain in Strict Mode. So this can be useful when you need to specify a massively different stylesheet to IE6 in Quirks Mode, while remaining in Strict Mode for your main stylesheet for all other browsers.

Another useful application of this technique is whipping together sites in StaticMatic. Textarea tags give me whitespace headaches in HAML, so now I just write the actual XHTML tag for it. No problems. I use StaticMatic to build page templates that will be ported over to another application. Yes… that’s how much I love HAML.

[Bloglines] [del.icio.us] [Digg] [Facebook] [Furl] [Google] [MySpace] [Reddit] [Sphinn] [StumbleUpon] [Technorati] [Email] More »
posted by Lorin Tackett at 3:51 pm  

Powered by WordPress