Prototyping with

Haml & Sass
Prototyping
Prototyping

 • Photoshop mock-ups are an approximation
  of a web page.
Prototyping

 • Photoshop mock-ups are an approximation
  of a web page.
 • Wireframes are boring.
Prototyping

 • Photoshop mock-ups are an approximation
  of a web page.
 • Wireframes are boring.
 • Designers who develo...
Prototyping

 • Photoshop mock-ups are an approximation
  of a web page.
 • Wireframes are boring.
 • Designers who develo...
Haml
Haml

Haml takes your gross, ugly templates and
replaces them with veritable Haiku.
Haml

Haml takes your gross, ugly templates and
replaces them with veritable Haiku.

<div id="content">                   ...
Haml

                                           #content
• Elements always start with %               %h1.big_header My C...
Sass
Sass

Sass is like CSS without the urge to kill.
Sass

Sass is like CSS without the urge to kill.

#content h1.big_header   {           !bright_blue = #00aeff
  font-size:...
Sass

                                         !bright_blue = #00aeff
• No semicolons or brackets
                        ...
Haml & Sass: Best Practices

• Organize your Sass.
• Use classes on <body> to identify pages.
• Use descriptive Class and ...
Haml & Sass: Resources

• Haml: haml-lang.com
• Sass: sass-lang.com
• Staticmatic: staticmatic.rubyforge.org
• TextMate: m...
Upcoming SlideShare
Loading in …5
×

Prototyping With Haml & Sass

2,775 views

Published on

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,775
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • - Photoshop isn&amp;#x2019;t an ideal tool for prototyping
    - Fonts don&amp;#x2019;t look right, it only shows one state forcing you to make many pages - extra work sucks
    - Managing feedback and revisions is a nightmare - editing multiple files for the same change
  • - Wireframes are good for quickly sketching out ideas internally among team members
    - Stakeholders often don&amp;#x2019;t understand wireframes
    - Stakeholders get more excited playing with the real thing
  • - Designers who develop have total control
    - The more people your design goes through, the more it can go wrong - developers don&amp;#x2019;t pay attention to things like margins and grids
    - Prototyping allows developers and copywriters to be involved early in the process - no waiting around for you to get approval
    - Be involved in the entire process - refine and improve your work as things change
  • - Plans are just guesses that take a long time
    - Do a quick design to get you going then dive into code
    - Make changes as feedback is given and new information comes to light
  • Organize - Keep number of stylesheets to a minimum, group sections together, keep properties consistent
    Names - don&amp;#x2019;t use shortforms
    Sematics - describe content, not appearance. HTML - use appropriate tags to describe content, not appearance i.e. &lt;strong&gt; vs &lt;b&gt;
  • Prototyping With Haml & Sass

    1. 1. Prototyping with Haml & Sass
    2. 2. Prototyping
    3. 3. Prototyping • Photoshop mock-ups are an approximation of a web page.
    4. 4. Prototyping • Photoshop mock-ups are an approximation of a web page. • Wireframes are boring.
    5. 5. Prototyping • Photoshop mock-ups are an approximation of a web page. • Wireframes are boring. • Designers who develop have all the power.
    6. 6. Prototyping • Photoshop mock-ups are an approximation of a web page. • Wireframes are boring. • Designers who develop have all the power. • Mock-ups are just guesses.
    7. 7. Haml
    8. 8. Haml Haml takes your gross, ugly templates and replaces them with veritable Haiku.
    9. 9. Haml Haml takes your gross, ugly templates and replaces them with veritable Haiku. <div id="content"> #content <h1 class="big_header">My Cat's Web Page</h1> %h1.big_header My Cat's Web Page <p> %p <img src="/images/mittens.jpg" align="right"/> %img(src="/images/mittens.jpg" align="right") Say hello to Mittens! Say hello to Mittens! </p> #sidebar </div> %h2 Mittens' Favourite Food <div id="sidebar"> %ul <h2>Mittens' Favourite Food</h2> %li Meow Mix <ul> %li Rodents <li>Meow Mix</li> %li Grass <li>Rodents</li> <li>Grass</li> </ul> </div>
    10. 10. Haml #content • Elements always start with % %h1.big_header My Cat's Web Page %p • Classes and IDs use CSS syntax %img(src="/images/mittens.jpg" align="right") Say hello to Mittens! #sidebar • Classes and IDs not used on elements %h2 Mittens' Favourite Food %ul are assumed to be DIVs %li Meow Mix %li Rodents %li Grass • Elements are nested with indentation - no closing tags! • You can use HTML tags • Any line not started with something is just plain text.
    11. 11. Sass
    12. 12. Sass Sass is like CSS without the urge to kill.
    13. 13. Sass Sass is like CSS without the urge to kill. #content h1.big_header { !bright_blue = #00aeff font-size: 1.6em; color: #00aeff; =list_defaults } margin: 0 #content ul.navigation { padding: 0 margin: 0; list-style: none padding: 0; list-style: none; #content } h1.big_header #content ul.navigation li { font-size: 1.6em display: inline; color: = !bright_blue margin-right: 0; ul.navigation } +list_defaults #content ul.navigation li.last { li margin: 0; display: inline } margin-right: 0 &.last margin: 0
    14. 14. Sass !bright_blue = #00aeff • No semicolons or brackets =list_defaults • All properties on one line margin: 0 padding: 0 list-style: none • Nests selectors for scoping #content h1.big_header • Allows use of variables, mixins, and font-size: 1.6em color: = !bright_blue other advanced features for DRY code ul.navigation +list_defaults • Easy syntax for referencing parent li display: inline selectors margin-right: 0 &.last margin: 0 • Support for Sass partials
    15. 15. Haml & Sass: Best Practices • Organize your Sass. • Use classes on <body> to identify pages. • Use descriptive Class and ID names. • Use semantic Classes and HTML. • Donʼt over identify - scope instead. • Hacks are OK. • Start with barebones HTML.
    16. 16. Haml & Sass: Resources • Haml: haml-lang.com • Sass: sass-lang.com • Staticmatic: staticmatic.rubyforge.org • TextMate: macromates.com

    ×