User login

The Coding Designer's Survival Kit


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

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.


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


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

Fluid layouts and responsive design.

* 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)


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.


Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.