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.
Breakpoint
Simple example - Sass 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-col...
Simple example - CSS 
body { 
color: #333; 
} 
@media (max-width: 768px) { 
body { 
background-color: #efefef; 
} 
} 
@med...
... so what?
More complex queries 
$bp-sm-screen-and-phones: 'only screen' (max-width 760px), 
max-device-width 900px; 
.rwd-table { 
@...
Resolution queries - Sass 
$hidpi: min-resolution 1.5dppx; 
.sprite-icon { 
background-image: url('images/sprite.png'); 
@...
Resolution queries - CSS 
.sprite-icon { 
background-image: url('images/sprite.png'); 
} 
@media (min-resolution: 143dpi),...
Media query fallbacks 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-col...
Fallback class 
body { 
color: #333; 
} 
@media (max-width: 768px) { 
body { background-color: #efefef; } 
} 
@media (min-...
Multiple-file fallbacks 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-c...
Multiple-file fallbacks 
Style.scss: 
// this sheet includes the queries 
$breakpoint-no-queries: false; 
@import 'mqs'; 
...
Now let's do something fun...
...with IE8 support (single file)
_variables.scss 
_mixins.scss 
_typography.scss 
... 
Mobile.scss 
$breakpoint-no-queries: true; 
$include-mobile-styles: ...
The Sass... 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small, 
'no-query' $include-mobile...
Thanks! 
@RoboAndie
Breakpoint
Breakpoint
Breakpoint
Breakpoint
Upcoming SlideShare
Loading in …5
×

Breakpoint

515 views

Published on

A brief introduction to the Breakpoint Sass plugin.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Breakpoint

  1. 1. Breakpoint
  2. 2. Simple example - Sass $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small) { font-size: 120%; } }
  3. 3. Simple example - CSS body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef; } } @media (min-width: 768px) { body { font-size: 120%; } }
  4. 4. ... so what?
  5. 5. More complex queries $bp-sm-screen-and-phones: 'only screen' (max-width 760px), max-device-width 900px; .rwd-table { @include breakpoint($bp-sm-screen-and-phones) { /* responsive table styles */ } } Compiled: @media only screen and (max-width: 760px), (max-device-width: 900px) { .rwd-table { /* responsive table styles */ } }
  6. 6. Resolution queries - Sass $hidpi: min-resolution 1.5dppx; .sprite-icon { background-image: url('images/sprite.png'); @include breakpoint($hidpi) { background-image: url('images/sprite2x.png'); } }
  7. 7. Resolution queries - CSS .sprite-icon { background-image: url('images/sprite.png'); } @media (min-resolution: 143dpi), (-webkit-min-device-pixel-ratio: 1.48958), (min--moz-device-pixel-ratio: 1.48958) { .sprite-icon { background-image: url('images/sprite2x.png'); } }
  8. 8. Media query fallbacks $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' '.no-mqs') { font-size: 120%; } }
  9. 9. Fallback class body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef; } } @media (min-width: 768px) { body { font-size: 120%; } } .no-mqs body { font-size: 120%; }
  10. 10. Multiple-file fallbacks $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' true) { font-size: 120%; } }
  11. 11. Multiple-file fallbacks Style.scss: // this sheet includes the queries $breakpoint-no-queries: false; @import 'mqs'; Style.css: body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef;} } @media (min-width: 768px) { body { font-size: 120%; } } Oldie.scss: // this sheet excludes the queries $breakpoint-no-queries: true; @import 'mqs'; Oldie.css: body { color: #333; font-size: 120%; }
  12. 12. Now let's do something fun...
  13. 13. ...with IE8 support (single file)
  14. 14. _variables.scss _mixins.scss _typography.scss ... Mobile.scss $breakpoint-no-queries: true; $include-mobile-styles: true; $include-desktop-styles: false; @import //all the partials Desktop.scss $breakpoint-no-queries: true; $include-mobile-styles: false; $include-desktop-styles: true; @import //all the partials Responsive.scss $breakpoint-no-queries: false; $include-mobile-styles: true; $include-desktop-styles: '.no-mqs'; @import //all the partials
  15. 15. The Sass... $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small, 'no-query' $include-mobile-styles) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' $include-desktop-styles) { font-size: 120%; } }
  16. 16. Thanks! @RoboAndie

×