The Coding Designer's Survival Kit

"Start your project with sensible defaults that help you get straight to the good stuff."

http://codingdesigner.com

When i came to Zivtech and found myself with a team of 12, now about to be 20, i had to find a way. First presentation on learning SASS got the response: "now you want me to learn this? this seems hard." and "Where do the files go."

The survival kit includes:
* parts of HTML5 Boilerplate
* Elements and pages to design for
* Modernizr and Selectivizr
* Lettering.js and other js tools
* Sass/Compass mixins galore— maybe went a little crazy with this.

Requirements:

• Ruby Gems: Sass, Compass, Susy, Fancy Buttons
• Livereload for autorefreshing browsers (for Firefox). If your CSS changes, it automatically reloads just your CSS.

Why:

Photoshop does not ask what to do if this headline wraps. Doing CSS in a Drupal photoshop does.

Fluid layouts and responsive design.

Harder:
* Detailed and elaborate concepts.
* Lots of photo detailes.
* Blue sky or back-to-square-one.

Use as simple a tool as you can, until you need more power.
* Pen and paper.
* Simple wireframes.
* then use Photoshop or, instead, this approach.

Javascript: JQuery UI, Modernizr (to work around the capabilities that don't work in older browsers), Selectivizr, Formalie, PIE (more CSS3 -- all , Respond.js, Dynamic Carousel, Lettering.js, FitText, Geared Scrolling

(I was all with him, but i don't get why all of this is put in up front, and not as you need)

Sass

sass-lang.com

LESS – written in many languages, including JavaScript, which is the most feature-rich one right now.
SASS - only written in Ruby

Sass has variables, nesting, mixins, selector inheritance. Has two equivalent syntaxes: SCSS looks more like CSS. Sass is more compact.

FireSass, Sass debugging in Firefox.