SlideShare a Scribd company logo

Haml and Sass guide to beautiful and sensible markup

•
•
G
guest3f6207
BusinessTechnology
1 of 18
Download to read offline
Haml and Sass Your Guide to Beautiful and Sensible Markup
Jason McCay A founding partner of CommonThread jason@commonthread.com
A bit of credit • Created by Hampton Catlin • Installed as RubyGem • More advanced than you think behind the scenes
The Point • Remove the repetitive parts of HTML and CSS • “Markup should be beautiful” • ...and markup should be meaningful.
The Key? • Make white space mean something. • Make every character mean something.
Haml First Let’s create a Haml Haiku
Example • ,[object Object],”title”>My Pictures
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup
Haml and Sass guide to beautiful and sensible markup

Recommended

"Crap to Gold" by Kamran shafi
"Crap to Gold" by Kamran shafi"Crap to Gold" by Kamran shafi
"Crap to Gold" by Kamran shafiFahad Mahmood
 
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascript
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascriptHanoi php day 2008 - 03. dang minh tuan - html, css, javascript
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascriptNguyen Duc Phu
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design WorkshopSuseZ
 
Web Design Bootcamp - Day2
Web Design Bootcamp - Day2Web Design Bootcamp - Day2
Web Design Bootcamp - Day2Aslam Najeebdeen
 
Slide share, website design by captain obvious
Slide share, website design by captain obviousSlide share, website design by captain obvious
Slide share, website design by captain obviousSocius Marketing
 
Frameworks for the web
Frameworks for the webFrameworks for the web
Frameworks for the webnetfuel
 
How To Use Mad Mimi
How To Use Mad MimiHow To Use Mad Mimi
How To Use Mad MimiRonald Rivera
 
презентация
презентацияпрезентация
презентацияkudaselena
 

Recommended

"Crap to Gold" by Kamran shafi
"Crap to Gold" by Kamran shafi"Crap to Gold" by Kamran shafi
"Crap to Gold" by Kamran shafiFahad Mahmood
 
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascript
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascriptHanoi php day 2008 - 03. dang minh tuan - html, css, javascript
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascriptNguyen Duc Phu
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design WorkshopSuseZ
 
Web Design Bootcamp - Day2
Web Design Bootcamp - Day2Web Design Bootcamp - Day2
Web Design Bootcamp - Day2Aslam Najeebdeen
 
Slide share, website design by captain obvious
Slide share, website design by captain obviousSlide share, website design by captain obvious
Slide share, website design by captain obviousSocius Marketing
 
Frameworks for the web
Frameworks for the webFrameworks for the web
Frameworks for the webnetfuel
 
How To Use Mad Mimi
How To Use Mad MimiHow To Use Mad Mimi
How To Use Mad MimiRonald Rivera
 
презентация
презентацияпрезентация
презентацияkudaselena
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753george42__
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSSAndy Budd
 
Haml and Sass Introduction
Haml and Sass IntroductionHaml and Sass Introduction
Haml and Sass IntroductionEthan Gunderson
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSSelliando dias
 
Professional Css
Professional CssProfessional Css
Professional CssSubramanyan Murali
 
Haml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietHaml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietdavidsidlinger
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Web Building Blocks
Web Building BlocksWeb Building Blocks
Web Building Blocksjoegilbert
 
Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29guest519038
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 
Famous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st CenturyFamous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st Centuryrwgiffor
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...Aggregage
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataExhibitors Data
 
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Neil Kimberley
 
Regression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear RegressionRegression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear RegressionRavindra Nath Shukla
 
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLMONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLSeo
 
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...Dave Litwiller
 
Monte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSMMonte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSMRavindra Nath Shukla
 
7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...Paul Menig
 
HONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsHONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsMichael W. Hawkins
 
A DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMANA DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMANIlamathiKannappan
 
Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Roland Driesen
 

More Related Content

Similar to Haml and Sass guide to beautiful and sensible markup

Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753george42__
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSSAndy Budd
 
Haml and Sass Introduction
Haml and Sass IntroductionHaml and Sass Introduction
Haml and Sass IntroductionEthan Gunderson
 
Haml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietHaml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietdavidsidlinger
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Web Building Blocks
Web Building BlocksWeb Building Blocks
Web Building Blocksjoegilbert
 
Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29guest519038
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 

Similar to Haml and Sass guide to beautiful and sensible markup (10)

Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 
Haml and Sass Introduction
Haml and Sass IntroductionHaml and Sass Introduction
Haml and Sass Introduction
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
Professional Css
Professional CssProfessional Css
Professional Css
 
Haml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietHaml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a diet
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Web Building Blocks
Web Building BlocksWeb Building Blocks
Web Building Blocks
 
Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29Unity is Strength / Happy Designer 3 / 2008.03.29
Unity is Strength / Happy Designer 3 / 2008.03.29
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 

Recently uploaded

Famous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st CenturyFamous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st Centuryrwgiffor
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...Aggregage
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataExhibitors Data
 
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Neil Kimberley
 
Regression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear RegressionRegression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear RegressionRavindra Nath Shukla
 
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLMONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLSeo
 
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...Dave Litwiller
 
Monte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSMMonte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSMRavindra Nath Shukla
 
7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...Paul Menig
 
HONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsHONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsMichael W. Hawkins
 
A DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMANA DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMANIlamathiKannappan
 
Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Roland Driesen
 
A305_A2_file_Batkhuu progress report.pdf
A305_A2_file_Batkhuu progress report.pdfA305_A2_file_Batkhuu progress report.pdf
A305_A2_file_Batkhuu progress report.pdftbatkhuu1
 
Call Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine ServiceCall Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine Serviceritikaroy0888
 
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...anilsa9823
 
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...amitlee9823
 
The Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case studyThe Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case studyEthan lee
 
Best Basmati Rice Manufacturers in India
Best Basmati Rice Manufacturers in IndiaBest Basmati Rice Manufacturers in India
Best Basmati Rice Manufacturers in IndiaShree Krishna Exports
 
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...Suhani Kapoor
 

Recently uploaded (20)

Famous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st CenturyFamous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st Century
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
 
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023
 
Regression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear RegressionRegression analysis: Simple Linear Regression Multiple Linear Regression
Regression analysis: Simple Linear Regression Multiple Linear Regression
 
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLMONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
 
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
Enhancing and Restoring Safety & Quality Cultures - Dave Litwiller - May 2024...
 
Monte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSMMonte Carlo simulation : Simulation using MCSM
Monte Carlo simulation : Simulation using MCSM
 
7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...7.pdf This presentation captures many uses and the significance of the number...
7.pdf This presentation captures many uses and the significance of the number...
 
HONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsHONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael Hawkins
 
A DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMANA DAY IN THE LIFE OF A SALESMAN / WOMAN
A DAY IN THE LIFE OF A SALESMAN / WOMAN
 
Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...Boost the utilization of your HCL environment by reevaluating use cases and f...
Boost the utilization of your HCL environment by reevaluating use cases and f...
 
A305_A2_file_Batkhuu progress report.pdf
A305_A2_file_Batkhuu progress report.pdfA305_A2_file_Batkhuu progress report.pdf
A305_A2_file_Batkhuu progress report.pdf
 
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabiunwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
 
Call Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine ServiceCall Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine Service
 
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...
Lucknow 💋 Escorts in Lucknow - 450+ Call Girl Cash Payment 8923113531 Neha Th...
 
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
 
The Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case studyThe Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case study
 
Best Basmati Rice Manufacturers in India
Best Basmati Rice Manufacturers in IndiaBest Basmati Rice Manufacturers in India
Best Basmati Rice Manufacturers in India
 
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...
VIP Call Girls Gandi Maisamma ( Hyderabad ) Phone 8250192130 | ₹5k To 25k Wit...
 

Haml and Sass guide to beautiful and sensible markup