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

5 Tools in 5 Minutes @ Design+Startup

15555b729dfdfb05292eb0ef373f9a7a?s=47 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.

15555b729dfdfb05292eb0ef373f9a7a?s=128

Beau Smith

July 19, 2012
Tweet

More Decks by Beau Smith

Other Decks in Design

Transcript

  1. in five 5

  2. None
  3. Beau Smith @beau

  4. None
  5. None
  6. None
  7. None
  8. None
  9. Square card reader Square register pay with Square

  10. None
  11. Public Site Dashboard Signup & Activation Flow Internal (Admin, Risk,

    Metrics)
  12. Square style guide

  13. Square style guide Public Site Style Guide

  14. None
  15. Twitter Bootstrap

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. kippt.com

  24. kippt.com

  25. None
  26. None
  27. $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!
  28. 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…
  29. Delightfully simple with Compass Sprites

  30. Delightfully simple with Compass Sprites error.png info.png success.png foo-sprite.png

  31. 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; }
  32. bit.ly/sass-why

  33. None
  34. None
  35. None
  36. None
  37. Your Code Editor [ ]

  38. None
  39. Introduce me to your top five… @beau #designplusstartup

  40. Introduce me to your top five… @beau #designplusstartup