Working with SASS/Compass and Zurb Foundation

2,050
-1

Published on

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

No Downloads
Views
Total Views
2,050
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Working with SASS/Compass and Zurb Foundation

  1. 1. Responsive Web Design Working with SASS/Compass and Zurb Foundation
  2. 2. What is SASS? SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  3. 3. What is Compass? Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in SASS instead of plain CSS.
  4. 4. What is Foundation? The most advanced responsive front-end framework in the world.
  5. 5. Getting started gem install sass gem install compass gem install zurb-foundation
  6. 6. Getting started Navigate to your chosen directory in terminal compass create <project-name> -r zurb-foundation --using foundation
  7. 7. Getting started compass watch
  8. 8. What makes working with SASS and Foundation great?
  9. 9. Lots of things The grid Nesting Handling of media queries Built-in functions(mixins)
  10. 10. The grid <div class=”row”> <div class=”large-8 columns”> 8 column content </div> <div class=”large-4 columns”> 4 column content </div> </div>
  11. 11. The grid <div class=”row”> <div class=”large-8 small-6 columns”> 8 column content LARGE 6 column content SMALL </div> <div class=”large-4 small-6 columns”> 4 column content LARGE 6 column content SMALL </div> </div>
  12. 12. Nesting li { font: { family: serif; weight: bold; size: 1.2em; } }
  13. 13. Nesting li { font-family: serif; font-weight: bold; font-size: 1.2em; }
  14. 14. Nesting a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; } }
  15. 15. Nesting a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; }
  16. 16. Media Queries @media (max-width: 600px) { insert hundreds of CSS selectors/rules }
  17. 17. Media Queries h1{ font-size: 2em; @media (max-width: 600px) { font-size: 1.6em; } }
  18. 18. Media Queries $small-screen: emCalc(768); $medium-screen: emCalc(1280); $large-screen: emCalc(1440);
  19. 19. Media Queries $screen: "only screen"; $small: "only screen and (min-width:"#{$small- screen}")"; $medium: "only screen and (min-width:"#{$medium- screen}")"; $large: "only screen and (min-width:"#{$large- screen}")"; $landscape: "only screen and (orientation: landscape)"; $portrait: "only screen and (orientation: portrait)";
  20. 20. Media Queries h1{ font-size: 1em; @media #{$small}{ font-size: 1.4em; } @media #{$medium}{ font-size: 1.6em; } @media #{$large}{ font-size: 2em; }
  21. 21. Functions(mixins) $pink: #ce4dd6; a { color: $pink; &:hover { color: darken($pink, 10%); } &:visited { color: darken($pink, 20%); } }
  22. 22. Functions(mixins) a { color: #ce4dd6; } a:hover { color: #ba2dc3; } a:visited { color: #93239a; }
  23. 23. Demo http://clintrobinson.net
  24. 24. Questions???
  25. 25. Thank You! Clint Robinson - Advancement and Community Engagement clint.robinson@usask.ca
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×