Sweet and Sassy Responsive Design

Mina Markham
Mina MarkhamFront-End Architect at Girl Develop It DFW
sweet & y 
RESPONSIVE DESIGN
@minamarkham
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
not SASS
Ingredients
Flexible Grids 
Flexible Media 
Media Queries
“WHY SHOULD 
I CARE?”
Presentational 
Classes
Media Queries
Conditional 
Classes
Sweet and Sassy Responsive Design
@mixins
Sweet and Sassy Responsive Design
Friendly
Mobile First
$ gem install foundation
Flexible Grids
<nav class="col8">
@include grid-column(2);
.hero-unit { @include grid-column(2); } 
.promo-unit { @include grid-column(4); }
<section class="hero-unit"> 
<aside class="promo-unit">
Flexible Media
max-width: 100%
<img class="show-for-small" 
src="small.jpg" />
Interchange
<img data-interchange="[small.jpg, 
(default)], [small.jpg, (small)], 
[medium.jpg, (medium)]">
<noscript> 
<img src="default.jpg"> 
</noscript>
Media Queries
@media
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
device-in
content-out
Start with the small screen first, 
then expand until it looks like shit. 
Time for a breakpoint! 
– Stephen Hay
Sweet and Sassy Responsive Design
@mixin mq($breakpoint, $query: 
'min-width', $type: 'screen') {…}
@if $no-mqs { 
@if $no-mqs >= $breakpoint 
{ @content; }}
@else { 
@media #{$type} and (#{$query}: 
#{$breakpoint}) { @content; } }
$small: 20em; 
$medium: 48em; 
$large: 90em;
@include mq($large) {…}
usage
.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;}}
@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;}}
@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;}}
“BUT… WHAT ABOUT 
CODE BLOAT?”
…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
But…
Sass::MediaQueryCombiner
.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;}}
@media and screen and (min-width: 20em) { 
.hero-unit {font-size: 2em;} 
.promo-unit {font-size: 1.5em;}}
$ gem install 
sass-media_query_combiner
The Catch
Ruby 1.9.2 
Untested on large-scale 
Rearranges CSS
If your CSS doesn’t look like 
this, you’re doing it wrong.
“But… What about IE?”
This is why we can’t have nice things
$no-mqs: false default! 
$old-ie: false default!
@mixin old-ie { 
@if $old-ie { @content; }}
$no-mqs: 48em 
$old-ie: true
.foobar { 
@include old-ie { ... } }
Baking it Up
.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;}
Quick Demo
Recap
Mixins FTW! 
Dynamic Content 
Modularize Styles
Resources
sass-lang.com
foundation.zurb.com
susy.oddbird.net/
neat.bourbon.io/
thesassway.com
sassmeister.com
Sweet and Sassy Responsive Design
mina.so/sassy-rwd 
thanks! 
@minamarkham
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
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Namespacing
the almighty ampersand
.btn { 
&:hover {…} 
}
.btn:hover {…}
.btn { 
form & {…} 
}
form .btn {…}
&- or &_
.btn 
{ 
&-secondary {…} 
&_secondary {…} 
}
.btn-secondary {…} 
.btn_secondary {…}
nesting
inception rule
< 3 levels deep
.btn 
{ 
&-secondary 
{ 
&-icon {…} 
} 
}
.btn-secondary {…} 
.btn-secondary-icon {…}
@media
@mixin mq($breakpoint, $query: 
'min-width', $type: 'screen') {…}
.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; 
}
.btn {…} 
.btn-large {…} 
! 
<div class=“btn btn-large”>
@extend 
all the things!
.btn {…} 
.btn-large {@extend .btn;} 
! 
<div class=“btn-large”>
%btn {…} 
.btn-large {@extend %btn;} 
! 
<div class=“btn-large”>
don’t @extend 
between modules
mina.so/sassy-starter
Sweet and Sassy Responsive Design
refactor 
all the things!
Sweet and Sassy Responsive Design
refactor 
all the things?
Baby steps
extract components 
create variables 
apply naming conventions 
nest and @extend
mina.so/smacss-menu
Before: 161 lines 
After: 97 lines
1 of 112

Recommended

Semantic Microblogging by
Semantic MicrobloggingSemantic Microblogging
Semantic MicrobloggingBenjamin Nowack
9.5K views41 slides
Kar2ouche parousiasi by
Kar2ouche parousiasiKar2ouche parousiasi
Kar2ouche parousiasiMiltos Miltiadous
213 views5 slides
How to teach writing? - Jeremy Harmer by
How to teach writing? - Jeremy HarmerHow to teach writing? - Jeremy Harmer
How to teach writing? - Jeremy HarmerLaup94
20K views17 slides
Teaching writing by
Teaching writingTeaching writing
Teaching writingElaya Morales
42.3K views43 slides
Teaching Writing to EFL students by
Teaching Writing to EFL studentsTeaching Writing to EFL students
Teaching Writing to EFL studentsaspired
41.1K views29 slides
The specs behind the sex, mobile-friendly layout beyond the desktop by
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
2.4K views86 slides

More Related Content

Similar to Sweet and Sassy Responsive Design

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil by
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
43.3K views51 slides
Responsive Web Design by
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
7.5K views69 slides
Adaptive layouts - standards>next Manchester 23.03.2011 by
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Patrick Lauke
1.2K views41 slides
Design by
DesignDesign
Designrobynurdiansyah
139 views45 slides
Responsive Web Design, get the best out of your designs - JavaScript Open Day... by
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
6.7K views45 slides
MW2011 Grid-based Web Design presentation by
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
1.8K views56 slides

Similar to Sweet and Sassy Responsive Design(20)

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil by jameswillweb
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb43.3K views
Responsive Web Design by Justin Avery
Responsive Web DesignResponsive Web Design
Responsive Web Design
Justin Avery7.5K views
Adaptive layouts - standards>next Manchester 23.03.2011 by Patrick Lauke
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke1.2K views
Responsive Web Design, get the best out of your designs - JavaScript Open Day... by Frédéric Harper
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Frédéric Harper6.7K views
MW2011 Grid-based Web Design presentation by Charlie Moad
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
Charlie Moad1.8K views
Proactive Responsive Design by Nathan Smith
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
Nathan Smith3K views
Developing for Responsive Design - Frederic Welterlin by Razorfish
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
Razorfish989 views
Adobe MAX 2008: HTML/CSS + Fireworks by Nathan Smith
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith2K views
Digibury: Getting your web presence mobile ready - David Walker by Lizzie Hodgson
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
Lizzie Hodgson495 views
Mobile First Responsive Design by Jason Grigsby
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
Jason Grigsby6.4K views
Responsive Web Design in iMIS (NiUG Austin 2015) by Andrea Robertson
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)
Andrea Robertson1K views
Introduction to Responsive Web Design by Shawn Calvert
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Shawn Calvert1.1K views
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25 by Frédéric Harper
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Frédéric Harper700 views
Mobile Monday Presentation: Responsive Web Design by Cantina
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina1.3K views
[CSSDevConf] Adaptive Images in Responsive Web Design 2014 by Christopher Schmitt
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Christopher Schmitt18.8K views
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015... by Frédéric Harper
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Frédéric Harper872 views
Responsive webdesign WordCampNL 2012 by Tom Hermans
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Tom Hermans2.1K views
960 grid psd by Raju Nag
960 grid psd960 grid psd
960 grid psd
Raju Nag1.3K views
Bootstrap 3 training by Vison Sunon
Bootstrap 3 trainingBootstrap 3 training
Bootstrap 3 training
Vison Sunon2.3K views

Recently uploaded

DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...ShapeBlue
46 views29 slides
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...ShapeBlue
54 views15 slides
Kyo - Functional Scala 2023.pdf by
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
434 views92 slides
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院IttrainingIttraining
80 views8 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
96 views7 slides
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...ShapeBlue
77 views12 slides

Recently uploaded(20)

DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by ShapeBlue
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
ShapeBlue46 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue54 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue96 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue77 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue56 views
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue by ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueMigrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
ShapeBlue96 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely56 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue91 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc77 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker50 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue46 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue48 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software344 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue63 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray1080 views

Sweet and Sassy Responsive Design