Haml 2.0 Released: Friendly Fred

Michael Deering May 26th, 2008
0 Comments

If you were waiting for an excuse to set aside the massive 5 minutes it would take to run through the Haml tutorial 2.0 was just released.

“Haml feels odd for the first 20 minutes, but then after that YOU WILL BE FASTER.”

I can’t say enough about how much more enjoyable working with Haml and Sass in my views and css is over erb templates and raw css files.

There is also a lab to tinker around with but I would suggest converting a few of your views in an existing application to get the full effect.

Tags

CSS Reset: Gold For Code Monkeys

Michael Deering April 29th, 2008
0 Comments

There you are doing the right thing semantically marking-up your new site with div tags, CSS classes and ids. Your presentation is nicely separated from your content. Your feeling pretty good about yourself and your new application. Then ‘it’ happens, you open your site in another browser and suddenly you find yourself a victim of the browsers wars and cross-browser compatibility.

Firefox Eating IE

The CSS Reset technique is something that I tried recently on a clean-slate project with great success. Below is SASS version of the CSS file from the above link.


// public/stylesheets/sass/application.sass
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline

\:focus
  :outline 0

body
  :line-height 1
  :color black
  :background white

ol, ul
  :list-styles none

table
  :border-collapse separate
  :border-spacing 0

caption, th, td
  :text-align left
  :font-weight normal

blockquote:before, blockquote:after, q:before, q:after
  :content "" 

blockquote, q
  quotes: "" ""
The basic idea behind the technique is to normalize all of the tags you are going to use. The technique does have its critics for being over semantic, but for a guy like me who would rather concentrate on APIs and core functionality then learning and hacking around with all of the browsers differences this reset technique is exactly what I was looking for.

I’m not looking for a pixel perfect layout/design, I’m looking to mark-up my layouts and views and move on.

Tags