1.
sweet & y
RESPONSIVE DESIGN

2.
@minamarkham

3.
not SASS

4.
Ingredients

5.
Flexible Grids
Flexible Media
Media Queries

6.
“WHY SHOULD
I CARE?”

7.
Presentational
Classes

8.
Media Queries

9.
Conditional
Classes

10.
@mixins

11.
Friendly

12.
Mobile First

13.
$ gem install foundation

14.
Flexible Grids

15.
<nav class="col8">

16.
@include grid-column(2);

17.
.hero-unit { @include grid-column(2); }
.promo-unit { @include grid-column(4); }

18.
<section class="hero-unit">
<aside class="promo-unit">

19.
Flexible Media

20.
max-width: 100%

21.
<img class="show-for-small"
src="small.jpg" />

22.
Interchange

23.
<img data-interchange="[small.jpg,
(default)], [small.jpg, (small)],
[medium.jpg, (medium)]">

24.
<noscript>
<img src="default.jpg">
</noscript>

25.
Media Queries

26.
@media

27.
Every time you see 320px, 480px,
768px, 1024px used as breakpoint
values, a kitten gets its head bitten off
by an angel…or something like that.
– Brad Frost

28.
device-in

29.
content-out

30.
Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
– Stephen Hay

31.
@mixin mq($breakpoint, $query:
'min-width', $type: 'screen') {…}

32.
@if $no-mqs {
@if $no-mqs >= $breakpoint
{ @content; }}

33.
@else {
@media #{$type} and (#{$query}:
#{$breakpoint}) { @content; } }

34.
$small: 20em;
$medium: 48em;
$large: 90em;

35.
@include mq($large) {…}

36.
usage

37.
.hero-unit {
@include mq($small) {font-size: 1.2em;}
@include mq($large) {font-size: 1.5em;}
@include mq(30em) {font-size: 2em;} }
.promo-unit {
@include mq($small) {font-size: 1.5em;}
@include mq($large) {font-size: 2em;}}

38.
@media and screen and (min-width: 20em) {
.hero-unit {font-size: 2em;}}
!
@media and screen and (min-width: 20em) {
.promo-unit {font-size: 1.5em;}}

39.
@media and screen and (min-width: 20em) {
.hero-unit {font-size: 2em;}}
!
@media and screen and (min-width: 20em) {
.promo-unit {font-size: 1.5em;}}

40.
“BUT… WHAT ABOUT
CODE BLOAT?”

41.
…we hashed out whether there were
performance implications of combining
vs scattering Media Queries and came
to the conclusion that the difference,
while ugly, is minimal at worst,
essentially non-existent at best.
– Sam Richard

42.
But…

43.
Sass::MediaQueryCombiner

44.
.hero-unit {
@include mq(20em) {font-size: 2em;}
@include mq(30em) {font-size: 2.5em;}}
.promo-unit {
@include mq(20em) {font-size: 1.5em;}
@include mq(50em) {font-size: 2em;}}

45.
@media and screen and (min-width: 20em) {
.hero-unit {font-size: 2em;}
.promo-unit {font-size: 1.5em;}}

46.
$ gem install
sass-media_query_combiner

47.
The Catch

48.
Ruby 1.9.2
Untested on large-scale
Rearranges CSS

49.
If your CSS doesn’t look like
this, you’re doing it wrong.

50.
“But… What about IE?”

51.
This is why we can’t have nice things

52.
$no-mqs: false default!
$old-ie: false default!

53.
@mixin old-ie {
@if $old-ie { @content; }}

54.
$no-mqs: 48em
$old-ie: true

55.
.foobar {
@include old-ie { ... } }

56.
Baking it Up

57.
.promo-unit {
@include grid-column(4);
@include mq(20em) {font-size: 2em;}
@include mq(30em) {font-size: 2.5em;}
font-size: 1.3em;
margin-top: 1em;
float: left;}

58.
Quick Demo

59.
Recap

60.
Mixins FTW!
Dynamic Content
Modularize Styles

61.
Resources

62.
sass-lang.com

63.
foundation.zurb.com

64.
susy.oddbird.net/

65.
neat.bourbon.io/

66.
thesassway.com

67.
sassmeister.com

68.
mina.so/sassy-rwd
thanks!
@minamarkham

69.
credits & such
7 Habits of Highly Effective Media Queries
http://bradfrostweb.com/blog/post/7-­‐habits-­‐of-­‐highly-­‐effective-­‐media-­‐queries/
Responsive Web Design in Sass: Using Media Queries in Sass 3.2 http://thesassway.com/
intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
Yes, you really can make complex webapps responsive
http://adioso.com/blog/2013/06/responsifying-adioso/
Sass & Media Queries | http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries
Sass Style Guide | http://css-tricks.com/sass-style-guide/
Sass Globbing | https://github.com/chriseppstein/sass-globbing
Sass Media Query Combiner |https://github.com/aaronjensen/sass-­‐media_query_combiner
Media Query Test | http://aaronjensen.github.io/media_query_test/
Media Query Mixin | https://gist.github.com/Snugug/2490750

70.
Namespacing

71.
the almighty ampersand

72.
.btn {
&:hover {…}
}

73.
.btn:hover {…}

74.
.btn {
form & {…}
}

75.
form .btn {…}

76.
&- or &_

77.
.btn
{
&-secondary {…}
&_secondary {…}
}

78.
.btn-secondary {…}
.btn_secondary {…}

79.
nesting

80.
inception rule

81.
< 3 levels deep

82.
.btn
{
&-secondary
{
&-icon {…}
}
}

83.
.btn-secondary {…}
.btn-secondary-icon {…}

84.
@media

85.
@mixin mq($breakpoint, $query:
'min-width', $type: 'screen') {…}

86.
.promo-title {
@include mq(20em) {font-size: 2em;}
@include mq(30em) {font-size: 2.5em;}
@include mq(50em) {font-size: 3em;}
font-size: 1.3em;
margin-top: 1em;
float: left;
}

87.
.btn {…}
.btn-large {…}
!
<div class=“btn btn-large”>

88.
@extend
all the things!

89.
.btn {…}
.btn-large {@extend .btn;}
!
<div class=“btn-large”>

90.
%btn {…}
.btn-large {@extend %btn;}
!
<div class=“btn-large”>

91.
don’t @extend
between modules

92.
mina.so/sassy-starter

93.
refactor
all the things!

94.
refactor
all the things?

95.
Baby steps

96.
extract components
create variables
apply naming conventions
nest and @extend

97.
mina.so/smacss-menu

98.
Before: 161 lines
After: 97 lines