Haml Presentation
-
Upload
guest3f6207 -
Category
Business
-
view
2.273 -
download
2
Transcript of Haml Presentation
![Page 1: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/1.jpg)
Haml and SassYour Guide to Beautiful and Sensible Markup
![Page 2: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/2.jpg)
Jason McCayA founding partner of CommonThread
![Page 3: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/3.jpg)
A bit of credit
• Created by Hampton Catlin
• Installed as RubyGem
• More advanced than you think behind the scenes
![Page 4: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/4.jpg)
The Point
• Remove the repetitive parts of HTML and CSS
• “Markup should be beautiful”
• ...and markup should be meaningful.
![Page 5: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/5.jpg)
The Key?
• Make white space mean something.
• Make every character mean something.
![Page 6: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/6.jpg)
Haml FirstLet’s create a Haml Haiku
![Page 7: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/7.jpg)
Example
• <h1 class=”title”>My Pictures</h1>
• %h1.title My Pictures
![Page 8: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/8.jpg)
Divs are Implied
• <div class=”container”>Text</div>
• .container
• Can you imagine the characters you could cut from your front-end code right now??!?!
![Page 9: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/9.jpg)
Heading to Textmate
![Page 10: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/10.jpg)
Interesting Features
• Filters (plain, HTML, redcloth, textile, javascript)
• Blocks are implied by indentation
• XHTML Helpers
![Page 11: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/11.jpg)
Okay, now to SassSimplify your CSS at no additional charge
![Page 12: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/12.jpg)
No real change to the attributes
![Page 13: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/13.jpg)
Beauty is in the nesting of the CSS rules
![Page 14: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/14.jpg)
Back to Textmate
![Page 15: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/15.jpg)
Final Notes on SassFeel the complexity leave your CSS
![Page 16: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/16.jpg)
Interesting Features
• Arithmetic
• Silent vs. Loud Comments
• Various Output Styles
![Page 17: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/17.jpg)
Thanks!
![Page 18: Haml Presentation](https://reader033.fdocuments.us/reader033/viewer/2022052619/55620a60d8b42acb1e8b46c2/html5/thumbnails/18.jpg)