Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 Tools in 5 Minutes @ Design+Startup

Beau Smith
July 19, 2012

5 Tools in 5 Minutes @ Design+Startup

A five minute quick talk about the tools I use everyday.

At Square we iterate rapidly and constantly on web interfaces. Thus it's crucial we select and maintain development tools that promote efficiency and quality in our work.

Presented at Design+Startup. Organized by First Round Capital at IDEO SF.
http://designplusstartup.com/

**Apologies, the "style guide" and "xScope" sections have screencast videos which do not translate to speaker deck.

Beau Smith

July 19, 2012
Tweet

More Decks by Beau Smith

Other Decks in Design

Transcript

  1. $msg-width: 500px $msg-padding: 15px $msg-icon-width: image-width("icon-info.png") .flash-message width: $msg-width -

    ($msg-padding * 2) - $msg-icon-width padding-right: $msg-padding + $msg-icon-width padding-left: $msg-padding Embed logic into your style sheets Maths!
  2. Ooooooh, rounded corners… CSS3 .flash-message +border-radius(5px) .flash-message { -moz-border-radius: 5px;

    -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } CSS…
  3. Delightfully simple with Compass Sprites foo-sprite.png .icon-sprite, .icon-error, .icon-info, .icon-success

    { background: url('../images/icon-sa3bc8b9105.png') no-repeat; } .icon-error { background-position: 0 0; height: 19px; width: 20px; } .icon-info { background-position: 0 -19px; height: 21px; width: 20px; } .icon-success { background-position: 0 -40px; height: 21px; width: 20px; }