Breakpoints made simple (well simpler) using SCSS

BREAKPOINTS MADE
SIMPLE (WELL SIMPLER)
USING SCSS
@dkeeghan
#melbcss

BREAKPOINTS MADE SIMPLE
(WELL SIMPLER) USING SCSS
@dkeeghan
HOW DO YOU MAKE A RESPONSIVE
WEBSITE THAT LOOKS LIKE IT’S
DESIGNED FOR ANY DEVICE?

@dkeeghan
CSS only
• Copy paste media queries
• Only 3 breakpoints to keep it simple
• Media queries kept separate - same module in 3x places
Responsive for everyone
• Respond.js - makes media queries work for IE8*
• Everything in percentages
STARTING OUT

@dkeeghan
3 breakpoints are tough to manage
• Separating a modules code into multiple locations in the CSS is messy
• Needed to add additional breakpoints just to fix a small bug
• Fully flexible designs made it very difficult to test/debug/design
IE8 users don’t deserve responsive anyway
• Respond.js - just doesn’t work properly
• IE8 users aren’t expecting responsive anyway
LESSONS LEARNED

@dkeeghan
MANUALLY WRITING MEDIA
QUERIES IS A PAIN - USE SCSS TO
KEEP YOUR SANITY

@dkeeghan
Goal
• Simplify adding media queries for large websites
• Figure out how to optionally support static sites without writing different code
• Create reusable code for all our projects
• Keep breakpoint code together with the module it relates to
• Use ems for dynamic sizing breakpoints based on browser zoom
Why SCSS?
• We already use Middleman which uses SASS/SCSS
• SCSS is formatted like CSS - makes it less scary for clients
SIMPLIFYING BREAKPOINTS

@dkeeghan
Pros
• Inspired by http://css-tricks.com/naming-media-
queries/
• Each media query has a name
• Keep code per module, instead of per breakpoint
• IE Conditional to serve two separate CSS files
• Override the breakpoint mixin for a static stylesheet.
It contains no media queries and ignores unneeded
breakpoints
VERSION 0.0.1
Cons
• Mixin code split across multiple files
• You have to add new IF statements per media query
across two files

@dkeeghan
Additions
• Using default SCSS variables check for responsive
flag
• Mixin is selfcontained in a single file
VERSION 0.0.2
Cons
• Some sites were needing up to 8 breakpoints - or
more
• Sometimes we need to target between two
breakpoints (e.g. medium-large)
• No support for in between breakpoints without
adding a new breakpoint e.g. xmedium?!

@dkeeghan
Additions
• Dynamically generate breakpoints without IF
statements
• Supports named and pixel based breakpoints (and
combination of the two)
• Supports 8 breakpoints from xxs to xxl by default
• Included printer support
• Changed the mixin name to bp to reduce RSI
VERSION 0.1.0
Cons
• Hardcoded IE support for XL and L breakpoints only
• Need to set a static flag if the breakpoint should be
exported to static stylesheets in some situations

@dkeeghan
The breakpoints mixin has been used
on every single responsive website
released by Deloitte Digital in the last
two and a half years.

@dkeeghan
Additions
• Added support for custom properties (e.g. height)
• Automated IE and print stylesheet detection based
on inputted ranges
• Simplified single function call for all types of
breakpoint
• Added dedicated JS library to match (DD.bp)
• Released on GitHub - https://github.com/
DeloitteDigital/DDBreakpoints
VERSION 1.0.0

@dkeeghan
Importing
$IS_RESPONSIVE: true;
@import “dd-breakpoints”;
// your imports here
HOW DO YOU USE IT?

@dkeeghan
Everything comes from a single mixin.
@include bp($min, $max:0, $property:width) {
// styles
}
HOW DO YOU USE IT?

@dkeeghan
.module {
// base styles
@include bp(m) {
// medium styles
}
@include bp(l) {
// large styles
}
@include bp(xl) {
// extra large styles
// not included in the static sheet
}
}
MOBILE FIRST

@dkeeghan
.module {
// desktop styles
@include bp(0, l) {
// large and below styles
}
@include bp(0, m) {
// medium and below styles
}
@include bp(0, s) {
// small and below styles
}
}
LARGE FIRST

@dkeeghan
.module {
// base styles
@include bp(300, m) {
// between 300px and medium breakpoint
}
@include bp(m, 2000) {
// between medium breakpoint and 2000px
}
@include bp(200, 250) {
// be as specific as you need
}
}
MORE COMPLEX

@dkeeghan
.module {
// base styles
@include bp(0, 500, height) {
// between 0 and 500px high
// height breakpoints are never included in the static sheet
}
@include bph(0, 500) {
// exactly the same as above - shortcut
}
@include bp(0, 500, depth) {
// Responsive 3D interfaces in the future???
}
}
NON-WIDTH BREAKPOINTS

@dkeeghan
// flag to detect if to serve responsive or static styles
$IS_RESPONSIVE: true;
// base font size - used to calculate EMs
$FONT_BASE: 16;
// default breakpoint widths
$bp-xxs-min: 359;
$bp-xs-min: 480;
$bp-s-min: 640;
$bp-m-min: 768;
$bp-l-min: 1024;
$bp-xl-min: 1244;
$bp-xxl-min: 1410;
CUSTOMISATION

@dkeeghan
// list of breakpoint names matched to px widths
$bp-list-min: xxs $bp-xxs-min, xs $bp-xs-min, s $bp-s-min //...;
$bp-list-max: xxs $bp-xxs-max, xs $bp-xs-max, s $bp-s-max //...;
// customised - max numbers are the next breakpoints min minus 1px
$bp-list-min: small 359, medium 768, large 1024, xlarge 1244;
$bp-list-max: small 767, medium 1023, large 1243;
CUSTOMISATION

@dkeeghan
// breakpoint range for static stylesheets
// if the breakpoint is outside of this range - don’t include the CSS
$bp-static-min: 0;
$bp-static-max: $bp-xl-max;
// breakpoint range for print stylesheets
// if the breakpoint is outside of this range - use “@media only screen”
$bp-print-min: 0;
$bp-print-max: 550; // printed A4 is around 550px wide
CUSTOMISATION

@dkeeghan
Return the media query as a string
DD.bp.get(min, max=0, property=‘width’);
// perfect for use with enquire.js
DD.bp.get(‘s’);
DD.bp.get(‘s’, ‘l’);
DD.bp.get(0, 500);
// string notation - perfect for passing through from data- attributes
DD.bp.get(‘s,l’);
BREAKPOINTS IN JAVASCRIPT

@dkeeghan
Returns boolean if the page size matches
DD.bp.is(min, max=0, property=‘width’);
// uses window.matchMedia().matches
// need a polyfill for IE8
DD.bp.is(‘s’);
DD.bp.is(‘s’, ‘l’);
DD.bp.is(0, 500);
// string notation - perfect for passing through from data- attributes
DD.bp.is(‘s,l’);
BREAKPOINTS IN JAVASCRIPT

@dkeeghan
WHAT ARE THE
DOWNSIDES
DUPLICATION OF
MEDIA QUERIES
NUMBER OF SELECTORS
CAN GET HUGE
ADDING NEW BP NAMES
STILL SLIGHTLY LIMITED
Your media query is duplicated
each time you use the mixin
Using GZIP will make the overall
effective impact minimal
Old IE (9 and below) can only
handle 4095 selectors per CSS
file
Consider splitting your static
files into logical components
e.g. global/forms/modules
IE10+ supports 65534 selectors
Adding your own custom list of
breakpoints requires a little bit
of SASS knowledge and require
two lists (min and max) to be
managed
Next steps are to use a single
SCSS map instead to calculate
the min/max values

@dkeeghan

@dkeeghan
KEY TAKEAWAYS
• SCSS can help make managing media queries much easier
• Serve multiple CSS files - one to IE8, the other to everyone else
• DDBreakpoints is now on GitHub -
https://github.com/DeloitteDigital/DDBreakpoints

THANK YOU
@dkeeghan
www.deloittedigital.com/au
@DeloitteDigi_AU

Breakpoints made simple (well simpler) using SCSS

More Related Content

What's hot

Similar to Breakpoints made simple (well simpler) using SCSS

Recently uploaded

Breakpoints made simple (well simpler) using SCSS