Breakpoint Tool

Breakpoint tool includes the iota-breakpoint() mixin that generates media queries easily for you.

Install

Install it through NPM.

npm install --save-dev iotacss-tools-breakpoint

Import it to your main file.

1 @import "<node_modules>/iotacss-tools-breakpoint/tools.breakpoint"

Use it wherever you need it.

1 @include iota-breakpoint($breakpoint-size, $breakpoint-sizes)

Dependencies

Settings.Core

Parameters

Breakpoint mixin accepts two parameters:

$breakpoint-size : Size of the breakpoint you want to use from the $breakpoint-sizes map
$breakpoint-sizes : A Sass map that contains all the breakpoints

If you provide only a $breakpoint-size without a $breakpoint-sizes map, iotaCSS uses the $iota-global-breakpoints map from Settings.Core.

Examples

Using the global default `$iota-global-breakpoints` breakpoints map.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 // settings/_core.scss
$iota-global-breakpoints : (
  xs  : "screen and (min-width: 400px)",
  sm  : "screen and (min-width: 600px)",
  md  : "screen and (min-width: 800px)",
  lg  : "screen and (min-width: 1024px)",
  xl  : "screen and (min-width: 1200px)"
);


// components/_header.scsss
.c-header {
  margin-right: 30px;
  
  @include iota-breakpoint(sm) {
    margin-right: 0;
  }
  
}

Using a custom breakpoints map.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 // settings/_breakpoints.scss
$my-breapoints : (
  xs : "screen and (min-width: 400px)",
  xl : "screen and (min-width: 1200px)"
);


// components/_header.scsss
.c-header {
  margin-right: 30px;
  
  @include iota-breakpoint(xl, $my-breakpoints) {
    margin-right: 0;
  }
  
}