Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Web Design
Working with SASS/Compass and
Zurb Foundation
What is SASS?
SASS is an extension of CSS3, adding
nested rules, variables, mixins,
selector inheritance, and more.
What is Compass?
Compass is a stylesheet authoring
framework that makes your stylesheets
and markup easier to build and ma...
What is Foundation?
The most advanced responsive
front-end framework in the world.
Getting started
gem install sass
gem install compass
gem install zurb-foundation
Getting started
Navigate to your chosen directory in
terminal
compass create <project-name> -r
zurb-foundation --using fou...
Getting started
compass watch
What makes working
with SASS and
Foundation great?
Lots of things
The grid
Nesting
Handling of media queries
Built-in functions(mixins)
The grid
<div class=”row”>
<div class=”large-8 columns”>
8 column content
</div>
<div class=”large-4 columns”>
4 column co...
The grid
<div class=”row”>
<div class=”large-8 small-6 columns”>
8 column content LARGE
6 column content SMALL
</div>
<div...
Nesting
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Nesting
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Nesting
a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}
Nesting
a { color: #ce4dd6; }
a:hover { color: #ffb3ff; }
a:visited { color: #c458cb; }
Media Queries
@media (max-width: 600px) {
insert hundreds of CSS selectors/rules
}
Media Queries
h1{
font-size: 2em;
@media (max-width: 600px) {
font-size: 1.6em;
}
}
Media Queries
$small-screen: emCalc(768);
$medium-screen: emCalc(1280);
$large-screen: emCalc(1440);
Media Queries
$screen: "only screen";
$small: "only screen and (min-width:"#{$small-
screen}")";
$medium: "only screen and...
Media Queries
h1{
font-size: 1em;
@media #{$small}{
font-size: 1.4em;
}
@media #{$medium}{
font-size: 1.6em;
}
@media #{$l...
Functions(mixins)
$pink: #ce4dd6;
a {
color: $pink;
&:hover { color: darken($pink, 10%); }
&:visited { color: darken($pink...
Functions(mixins)
a { color: #ce4dd6; }
a:hover { color: #ba2dc3; }
a:visited { color: #93239a; }
Demo
http://clintrobinson.net
Questions???
Thank You!
Clint Robinson - Advancement and
Community Engagement
clint.robinson@usask.ca
Working with SASS/Compass and Zurb Foundation
Upcoming SlideShare
Loading in …5
×

Working with SASS/Compass and Zurb Foundation

2,724 views

Published on

Published in: Design, Technology
  • Be the first to comment

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

×