Breakpoints SCSS Mixin and JavaScript library, used to accelerate and simplify media query development during the development process of responsive pages.

The SCSS and JS also allow for the ability to create static (non-responsive) stylesheets as well by setting a variable allowing backwards support for non responsive browsers (like IE8) easily.

To install via npm, enter the following at the command line:

npm install ddbreakpoints

To install via bower, enter the following at the command line:

bower install ddbreakpoints

Import the SCSS into your own project

@import 'dd-breakpoints';

At the most basic level, everything comes from a single mixin:

@include bp($min, $max:0, $property:width) {
    // your styles here
}

The recommended usage for the mixin is to go mobile first:

.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
    }
}

But if you have to, you can go large first too:

.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
    }
}

You can even use pixel based widths mixed with breakpoint names.

.module {
    // base styles

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

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

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

And you can also check against heights too

.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
    }
}

You can customise a number of options in the SCSS. When doing this, if you're also using the JS library, make sure you update the values to match there as well.

Set these flags early in the document, they can be included after you include the breakpoint scss file, however should be set before any usage of the mixin.

$IS_RESPONSIVE: true; // [boolean] tells the mixin to either export media queries or not
$FONT_BASE: 16; // [number] base font size (in px) of your site

The default breakpoints can be updated simply by editing the following variables. These should be set before the scss mixin is included into the page.

These default values have been chosen because they are the most common screen resolutions that we normally support.

$bp-xxs-min: 359; 
$bp-xs-min: 480; 
$bp-s-min: 640;
$bp-m-min: 768; // iPad portrait
$bp-l-min: 1024; // iPad landscape
$bp-xl-min: 1244; // 1280px screen resolution minus scrollbars
$bp-xxl-min: 1410; // 1440px screen resolution minus scrollbars

You can also completely customise your list by setting the following:

// 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;

You don't need to set a maximum of the highest breakpoint.

There are two main functions for the JS library.

Returns the media query as a string. Perfect for use with enquire.js.

You can pass through the same values as the SCSS, however you can also pass through a single string of comma separated values which can be passed through dynamically like from data- attributes.

DD.bp.get(min /* string || number */, max = 0 /* string || number */, property = 'width' /* string */);

// examples
DD.bp.get('s');
DD.bp.get('s', 'l');
DD.bp.get(0, 500);

// string notation
DD.bp.get('s,l');

There is also a shortcut function for height based media queries

DD.bp.getHeight(min /* string || number */, max = 0 /* string || number */);

Returns a boolean indicating if the current viewport matches the requested media query. This uses window.matchMedia().matches so use a polyfill if you need one.

DD.bp.is(min /* string || number */, max = 0 /* string || number */, property = 'width' /* string */);

// examples
DD.bp.is('s');
DD.bp.is('s', 'l');
DD.bp.is(0, 500);

// string notation
DD.bp.is('s,l');

There is also a shortcut function for height based media queries

DD.bp.isHeight(min /* string || number */, max = 0 /* string || number */);

You can customise the JavaScript library by using the options() method.

DD.bp.options(opts /* object */);

There are three customisable options:

• baseFontSize [number=16] Base font size of your site (browser default is normally 16px) this helps convert pixel widths to relative units for the media queries (using em units)
• isResponsive [boolean=true] Set to false if the site shouldn't get a responsive stylesheet (e.g. IE8 and below)
• breakpoints [Array] Use a custom list of name/pixel width breakpoints instead of the default in an array of { name: 'NAME', px: 000 }

DD.bp.options({
    baseFontSize: 16
    isResponsive: true,
    breakpoints: [
        { name: 'small', px: 400 },
        { name: 'medium', px: 800 },
        { name: 'large', px: 1200 }
    ]
});

Make sure to ensure that the values used here match the values used in the SCSS.

1.0.5 - July 2016

• Migrate GitHub organisation to: DeloitteDigitalAPAC.

1.0.3 & 1.0.4 - September 2015

• Publish on npm.

1.0.2 - March 2015

• Minor bug fix in options function, to allow setting of custom breakpoints.

1.0.1 - Feb 2015

• Update to resolve issue with Bower getting an old tag

1.0.0 - Feb 2015

• Public release
• Documentation
• Cleanup
• Automatic calculation of display logic for non-responsive stylesheets (previously was manual)
• Added height based breakpoints

0.1.1 - July 2014

• Added support for inputting px based integers instead of just breakpoint names (suggested by @conhuynh)

0.1.0 - June 2014

• Large rewrite
• Dynamically generate breakpoints without multiple IF statements
• Updated default number of breakpoints to 8
• Include printer support
• Changed the mixin name to bp to reduce RSI

0.0.2 - August 2013

• Added check for responsive flag.
• Moved static and responsive code into a single mixin

0.0.1 - May 2013

• Initial build. Inspired by http://css-tricks.com/naming-media-queries/

• Got an amazing idea to make the plugin better?
• Found an annoying bug?

Please don't hesitate to raise an issue through GitHub or open a pull request to show off your fancy pants coding skills - we'll really appreciate it!

• @dkeeghan
• @keeganstreet

The Breakpoints SCSS mixin and JavaScript library, which is made up of an SCSS Mixin and some JavaScript. We use this tool to accelerate our development process when creating responsive websites and webapps - it also helps us simplify consistency accross all of our projects.

We were inspired to create DDBreakpoints back in May 2013, as a result of Chris Coyier's CSS-Tricks article: Naming Media Queries.

As we built more responsive websites, our philosophy for creating responsive sites that don't look responsive (i.e. don't use a predictable standard grid) meant that we needed to add more and more breakpoints. While we always took a mobile-first approach, we would regularly find ourselves adding an "and-below" breakpoint for edge cases. This meant that our breakpoints mixin was getting overly large and repetitively complex.

Today, DDBreakpoints is used on almost every responsive project by Deloitte Digital in Australia... and now, it's available for your projects as well!

Part Business. Part Creative. Part Technology. One hundred per cent digital.

Pioneered in Australia, Deloitte Digital is committed to helping clients unlock the business value of emerging technologies. We provide clients with a full suite of digital services, covering digital strategy, user experience, content, creative, engineering and implementation across mobile, web and social media channels.

http://www.deloittedigital.com/au

View License