Breakbeat

The Breakbeat mixin and function allow you to build media queries simply. They are designed to work with Foundation 6, and offer some additional functionality beyond the existing breakpoint() mixin and function provided with Foundation.

It’s usually as simple as this:

@include b('>= large') {}

Capabilities

• Generate media queries for width and height
• Use breakpoint names and values already defined for use within Foundation
• Succinctly specify ranges between named breakpoints
• Scale breakpoint values to target portions of breakpoints
• Automatically filter out meaningless rules, like (min-width: 0)
• Output rules as em (the default) or px

Configuration

Step 1: Begin by setting the media query output type.

$output_em_queries: true; // Outputs px if false

Step 2: Define your breakpoints, using the minimum width value for each range, just as you would for customizing Foundation 6. Breakpoints must be defined in ascending order, and the first value should be 0. (You can define this within your Foundation settings file or after it, as long as it comes before Foundation itself.)

$breakpoints: (
  tiny: 0,
  small: 460px,
  medium: 640px,
  average: 820px,
  large: 1024px,
  xlarge: 1280px,
);

Step 3: Specify which breakpoints get CSS classes. Unlike when using Foundation out of the box, this step is required for Breakbeat to work properly.

$breakpoint_classes: (tiny small medium average large xlarge);

Step 4: Update $grid-column-responsive-gutter and $header-sizes in your Foundation settings to match your breakpoint names. The first breakpoint in each of these maps must match your smallest breakpoint name.

Step 5: Optionally define a separate set of height breakpoints as $height_breakpoints, using the same guidelines as the width breakpoints. Height breakpoints are completely separate from width breakpoints, so their names and values can be the same or totally different, it doesn’t matter.

$height_breakpoints: (
  wee: 0,
  petite: 300px,
  medium: 460px,
);

Step 6: Import your Foundation settings file, then _breakbeat.scss, then Foundation itself.

@import 'settings'; // Foundation settings
@import 'breakbeat';
@import '../path/to/foundation';

Usage

To use the mixin, specify a comparison operator, followed by the target breakpoint.

// Greater than or equal to small
@include breakbeat('>= small') {}

// Output
@media (min-width: 460px) {}

There’s also a handy shortcut:

@include b('>= small') {}

For height media queries, specify the axis as height. (For width media queries, specifying width will work, but it’s not necessary.)

@include b('height >= petite') {}

Function usage

You can use the function to combine Breakbeat with other parameters, such as media type.

@media print and #{b('>= small')} {}

Comparison operators

Breakbeat uses common comparison operators to isolate media queries to a specific range, with one addition:

• >=: greater than or equal to (results in min-width)
• <=: less than or equal to (results in max-width)
• >: greater than (results in min-width, using the next largest breakpoint)
• <: less than (results in max-width, using the next smallest breakpoint)
• =, ==, ===: equal to (results in both min-width and max-width for a single breakpoint)
• ><: between (results in min-width and max-width for multiple breakpoints)
• <>: outside (results in max-width, min-width for one or more breakpoints)

Note that the > and < operators exclude the specified breakpoint. For example, b('>= small') will include the entire small breakpoint within its range, but b('> small') — greater than small — will begin with the bottom end of the next largest breakpoint, excluding small entirely. If the next largest breakpoint is medium, then b('> small') will produce a result identical to b('>= medium').

Between operator

The >< operator takes two breakpoint names as arguments, and includes both of them within the resulting range. In the following example, the entire span of small, medium, and average breakpoints are included in the resulting media query. The next largest breakpoint, large, has a minimum width of 1024px, so the top end of average is the maximum, at 1023px.

// Between small and average, inclusive
@include b('>< small average') {}

// Output
@media (min-width: 460px) and (max-width: 1023px) {}

Outside operator

The <> operator takes one or two breakpoint names as arguments, and excludes them (and the space between) from the resulting range. Using a single breakpoint name excludes just that one breakpoint. In the following example, the range between medium and average breakpoints is excluded from the resulting media query.

// Everything outside of medium through average
@include b('<> medium average') {}

// Output
@media (max-width: 639px), (min-width: 1024px) {}

Height media queries

For height media queries, specify the axis as height before the comparison operator.

@include b('height >= petite') {}

If you store a separate set of height breakpoints as $height_breakpoints, those will be used for all height media queries. If there is no separate set of height breakpoints, Breakbeat will use the same names and values specified in the standard $breakpoints variable.

Scaling ranges

To allow targeting specific portions of breakpoints, Breakbeat accepts a scale argument that modifies the resulting range.

Note that scale does not simply perform multiplication on the initial value of a breakpoint, but rather it controls the deviation from a breakpoint’s initial value with respect to the adjacent breakpoints.

Let’s take a simple example, with some simple breakpoints:

$breakpoints: (
  small: 0,
  medium: 600px,
  large: 800px,
);

Here, the distance covered between small and medium is 600px, whereas the distance covered between medium and large is only 200px.

To target the upper half of small, we scale the range by 0.5:

// Scale up the initial width of small by half of
// the distance to the next largest breakpoint
@include b('= small', 0.5) {}

// Output
@media (min-width: 300px) and (max-width: 599px) {}

The result is that we’ve narrowed the range of the media query to affect only the upper half of the range normally covered by small.

The same technique applied to the medium breakpoint results in a much smaller range, since its distance from the large breakpoint is smaller:

// Scale up the initial width of medium by half of
// the distance to the next largest breakpoint
@include b('= medium', 0.5) {}

// Output
@media (min-width: 700px) and (max-width: 799px) {}

The same scale value applied to the medium breakpoint results in only a 99px range, due to its proximity to the large breakpoint.

scale can be any number, but it is most useful when it’s some floating point value between -1 and 1. Positive values narrow the range toward the top end of a breakpoint, whereas negative values narrow the range toward the bottom end.

// Scale down the maximum width of medium by half of
// the distance to the next smallest breakpoint
@include b('= medium', -0.5) {}

// Output
@media (min-width: 600px) and (max-width: 699px) {}

Naturally, the comparison operator used affects the meaning of the scale value.

// Target the top one-third of medium, and larger
@include b('>= medium', 0.66) {}

// Output
@media (min-width: 732px) {}

There are endless possibilities for quickly tweaking problem areas within specific ranges, without having to create additional breakpoints.

Since scaling controls deviation from the initial value, scaling by 0 does not obliterate the breakpoint through multiplication, but alters it by a factor of 0, just as if the scale argument were omitted. Likewise, scaling by 1 does not multiply the value by 1, but rather offsets the initial value by 100%.

Querial detritus

When using the mixin, media queries are automatically corrected or weeded out if they don’t make any sense. Here are some example nonsensical arguments, and the resulting media queries.

$breakpoints: (
  small: 0,
  medium: 600px,
  large: 800px,
);

@include b('>= small')         // No media query
@include b('<= large')         // No media query
@include b('< small')          // @media (max-width: 599px)
@include b('> large')          // @media (min-width: 800px)
@include b('>< small large')   // No media query
@include b('>< medium large')  // @media (min-width: 600px)

The function produces the same succinct expressions as the mixin, but it cannot filter out unnecessary media queries, since it is used as part of a media query definition. If Breakbeat finds that a function call will result in an unnecessary expression, it will instead return (min-[property]: 0), which is meaningless but error-free.

@media #{b('>= small')}        // @media (min-width: 0)

Breakpoint name interpolation

Since breakpoint names are passed to Breakbeat as part of a quoted string, you can easily use meaningful variable names to identify the purpose of a media query, and enable sweeping changes to transition points.

$mobile_nav: tiny;
$tablet_nav: small;
$desktop_nav: medium;
@include b('>= #{$desktop_nav}') {}