The breakup breakpoints in the /programmes responsive rework

programes_breakpoints.scss

/**
 * Generic media query breakpoints, common useful breakpoints.
 *
 * These breakpoints specify the points at which the grid is likely to require
 * reflowing. This allows us to declaratively define grid size transitions by
 * adding multiple classes to an element.
 *
 * These grid sizings are based off the GEL responsive grid and font
 * breakpoints. GEL's grid is 972px wide with 16px padding, giving a total page
 * width of 1008px wide.
 *
 * bp1    | -    | 399  | GEL Grid Group 1
 * bp2    | 400  | 599  | GEL Grid Group 2
 * bp3    | 600  | 1007 | GEL Grid Group 3
 * bp4    | 1008 | -    | GEL Grid Group 4

 * In addition to these styles the bpw prefix is also defined within
 * global_wide.scss which is applied for the media query min-width:600px;
 * (using a media query on the <link> tag) and for old desktop IE versions,
 * which do not support media queries (by including the file in a conditional

 * ---------------------------------------------------------------------------
 * For customising content layouts based on grid sizing the following
 * breakpoints are suggested:
 *
 * bpb1   | 320  | 599  | GEL Smartphone font group
 * bpb2   | 480  | 599  | Landscape smartphones
 * bpw    | 600  | -    | All wide displays
 * bpw1   | 600  | 1007 | Synonym for bp3 for Tablets
 * bpw2   | 770  | 1007 | Landscape 10" tablets
 * bpe    | 1008 | -    | Synonym for bp4 for desktop devices
 *
 *                            0           320    480   600        770      1008
 * [unprefixed]               |----------------------------------------------->
 * bpb1                                   |------------|
 * bpb2                                          |-----|
 * bpw                                                 |---------------------->
 * bpw1                                                |-------------------|
 * bpw2                                                           |--------|
 * bpe                                                                     |-->
 */

@function px-to-em($px, $base-size: 16px) {
    @return $px / $base-size + 0em;
}

/* TODO Document in styleguide */
$breakup-breakpoints: (
    'bp1' '(max-width: #{px-to-em(399px)})',
    'bp2' '(min-width: #{px-to-em(400px)}) and (max-width: #{px-to-em(599px)})',
    'bp3' '(min-width: #{px-to-em(600px)}) and (max-width: #{px-to-em(1007px)})',
    'bp4' '(min-width: #{px-to-em(1008px)})',

    'bpb1' '(min-width: #{px-to-em(320px)}) and (max-width: #{px-to-em(599px)})',
    'bpb2' '(min-width: #{px-to-em(480px)}) and (max-width: #{px-to-em(599px)})',
    'bpw' '(min-width: #{px-to-em(600px)})',
    'bpw1' '(min-width: #{px-to-em(600px)}) and (max-width: #{px-to-em(1007px)})',
    'bpw2' '(min-width: #{px-to-em(770px)}) and (max-width: #{px-to-em(1007px)})',
    'bpe' '(min-width: #{px-to-em(1008px)})'
) !default;