Breakpoints made simple (well simpler) using SCSS

BREAKPOINTS MADESIMPLE (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’SDESIGNED 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

http://css-tricks.com/naming-media-queries/

http://css-tricks.com/naming-media-queries/



@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

https://github.com/DeloitteDigital/DDBreakpoints




@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 // not included in the static sheet }

@include bp(0, s) { // small and below styles // not included in the static sheet }}

LARGE FIRST



@dkeeghan


@include bp(300, m) { // between 300px and medium breakpoint // not included in the static sheet }

@include bp(m, 2000) { // between medium breakpoint and 2000px }

@include bp(200, 250) { // be as specific as you need // not included in the static sheet }}

MORE COMPLEX



@dkeeghan


@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.jsDD.bp.get(‘s’);DD.bp.get(‘s’, ‘l’);DD.bp.get(0, 500);

// string notation - perfect for passing through from data- attributesDD.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 IE8DD.bp.is(‘s’);DD.bp.is(‘s’, ‘l’);DD.bp.is(0, 500);

// string notation - perfect for passing through from data- attributesDD.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



@dkeeghan



@dkeeghan



@dkeeghan



@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

http://www.deloittedigital.com/au

Date post:	18-Jul-2015
Category:	Internet
Upload:	damian-keeghan
View:	169 times
Download:	2 times

Breakpoints made simple (well simpler) using SCSS

Internet