rupture-sass

Simple media queries for SASS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
rupture-sass
4711.0.02 years ago6 years agoMinified + gzip package size for rupture-sass in KB

Readme

Rupture-sass
Simple media queries for SASS (Rupture mixins for SASS)
Write ``scss`` code as follows:
.some-class {
  color: red;
  @include above(32em) {
    color: green;
  }
  @include tablet() {
    color: yellow;
  }
}

Which compiles to:
.some-class {
  color: red;
}
@media only screen and (min-width: 32em) {
  .some-class {
    color: green;
  }
}
@media only screen and (min-width: 400px) and (max-width: 1050px) {
  .some-class {
    color: yellow;
  }
}

Installation

npm install rupture-sass

Use

  • Import package via ``@import`` directive
```scss @import 'nodemodules/rupture-sass/rupture'; // ... `` - If using Webpack as a bundler, with `node-sass`` packge ```scss @import '~rupture-sass/rupture'; // ... ```
  • Download package, and directly include file to project

API Documentation

Customization

Default values

$rupture: (
  mobile-cutoff: 400px,
  desktop-cutoff: 1050px,
  hd-cutoff: 1800px,
  enable-em-breakpoints: false, 
  anti-overlap: false,
  density-queries: 'dppx' 'webkit' 'moz' 'dpi',
  retina-density: 1.5,
  use-device-width: false
);

In order to override any value use ``$rupture: map-merge($rupture, (key: value, ..., keyN: valueN)``
$rupture: map-merge($rupture, (
  mobile-cutoff: 768px,
  desktop-cutoff: 1366px
));

mobile-cutoff (value)

Upper bound where mobile() mixin has an effect and lower bound of the tablet() mixin.

desktop-cutoff (value)

Lower bound where desktop() mixin has an effect and upper bound of the tablet() mixins.

hd-cutoff (value)

Lower bound where hd() mixin starts to have an affect

enable-em-breakpoints (boolean)

Convert pixel values into EM's values:
$rupture: map-merge($rupture, (
  enable-em-breakpoints: true
));
@include below(768px) {/*...*/};
// Compiles to:
// @media only screen and (max-width: 48em) {...}

anti-overlap (boolean | value | list)

Fixes overlaped boundaries of two or more media queries, for example we might have
@media only screen and (max-width: 48em) {/*...*/}
@media only screen and (min-width: 48em) {/*...*/}
in this case, when screen size is exactly ``48em's` or `768px`` two media queries will be applied in one time. In order to prevent this, override the ``anti-overlap`` value
$rupture: map-merge($rupture, (
  anti-overlap: true
));
// Resolves to:
// @media only screen and (max-width: 48em) {/*...*/}
// @media only screen and (min-width: 48.0625em) {/*...*/}
By default adjustement happens with ``+1px` value or `+0.0625em if` `enable-em-breakpoints` is `true` but also specific values, like `1px` or `0.5rem`` might be assigned
anti-overlap: false // default value
anti-overlap: true // enables 1px (or em equivalent) overlap correction globally
anti-overlap: 0px // same as anti-overlap = false
anti-overlap: 1px // same as anti-overlap = true
anti-overlap: -1px // negative offsets decrease the `max-width` arguments
anti-overlap: 0.001em // positive offsets increase the `min-width` arguments
anti-overlap: 1px 0.0625em 0.0625rem // explicit relative values will be used if they are provided instead of calculating them from the font size

density-queries (list)

Set of vendor prefixes for generating vendor specific density media queries. Valid values are 'webkit', 'moz', 'o', 'ratio', 'dpi', and 'dppx' Used in ``density()` and `retina()` mixins as well as when `$density` or `$retina`` specified as parameter
$rupture: map-merge($rupture, (
  density-queries: 'dppx' 'webkit' 'moz' 'dpi',
));
div {
  @include density(2) {/*...*/}
}
Compiles to:
@media only screen and (min-resolution: 2dppx), /* dppx */
only screen and (-webkit_min-device-pixel-ratio: 2), /* webkit */
only screen and (min--moz-device-pixel-ratio: 2), /* moz */
only screen and (min-resolution: 192dpi) { /* dpi */
    div {/*...*/}
}

retina-density (value)

Density value for retina density mixins, by default ``1.5``

use-device-width (boolean)

Toggles ``min-width` and `max-width` media queries to `min-device-width` and `max-device-width``

rasterise-media-queries (boolean)

Supresses all adjustements like ``density` or `retina`` from all media queries. Mostly used to generate fallback styles for legasy browsers
scale (list)
A list of breakpoint bounds for referencing breakpoint span as an index. The idea is taken from breakpoint-slicer
.
$rupture: map-merge($rupture, (
  scale: 0 400px 600px 800px 1050px 1800px
));
In this case, ``0 to 400px` will have index `1`, `400px to 600px` index `2``, an so on... Then you can reference index in mixins, like:
@include at(2) {/*...*/}
// Compiles to:
// @media only screen and (min-width: 400px) and (max-width: 600px) {}

scale-names (list)

A list of string reppresentation for indexes in ``scale`` property
$rupture: map-merge($rupture, (
  scale: 0 400px 600px 800px 1050px 1800px,
  scale-names: 'xs' 's' 'm' 'l' 'xl' 'hd'
));
scale:                 0        400px       600px       800px       1050px      1800px
//                     └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────
//                          1           2           3           4           5           6
scale-names:               'xs'        's'         'm'         'l'         'xl'        'hd'
@include at(s) {/*...*/}
// Compiles to:
// @media only screen and (min-width: 400px) and (max-width: 600px) {}

Mixins

above(value)

Media query kicks in above the specified value, index or scale name

from-width(value)

Alias to ``above()``

from(value)

Alias to ``above()`` using breakpoint-slicer syntax

below(value)

Media query kicks in below the specified value, index or scale name

to-width(value)

Alias to ``below()``

to(value)

Alias to ``below()`` using breakpoint-slicer syntax

between(minVal, maxVal)

Media query takes an affect between ``minVal` and `maxVal`` value, index or scale name

at(value)

Used for specifying media query only at exact index or scale-name
@include at(s) {/*...*/}
// Compiles to:
// @media only screen and (min-width: 400px) and (max-width: 600px) {}
Has no reason with ``px`, `em` or `rem`` values

mobile()

Media query for screens width like mobile, by default from ``0` till `400px`, upper bound could be changed with `mobile-cutoff``

tablet()

Media query for screens width like tablet, by default from ``400px` till `1050px`, lower bound could be changed with `mobile-cutoff` and upper bound with `desktop-cutoff``

desktop()

Media query for desktop like screens, by default from ``1050px` and above, lower bound could be changed with `desktop-cutoff``

hd()

Media query for large screens, by default from ``1800px` and above, lower bound could be changed with `hd-cutoff``

density(number)

Media query for specific device pixel density, possible values ``1.5`, `2` ``scss div { @include density(2) {/.../} }
Compiles to:
```css
@media only screen and (min-resolution: 2dppx), /* dppx */
only screen and (-webkit_min-device-pixel-ratio: 2), /* webkit */
only screen and (min--moz-device-pixel-ratio: 2), /* moz */
only screen and (min-resolution: 192dpi) { /* dpi */
    div {/*...*/}
}

retina()

Add ``density` media queries with `retina-density`, default retina density is `1.5` but migth be changed with `retina-density``

landscape()

Add a media query for screen when the viewport is wider than it is tall or in landscape mode

portrait()

Add a media query for screen when the viewport is taller than it is wide or in portrait mode

hover()

Add media queries for devices with hover over element's ability

touch()

Add media queries for devices with touch only ability

Mixins Arguments

Almost all mixins receive parameters to make media query more specific. Following parameters are: ``$scale-point`, `$anti-overlap`, `$density`, `$orientation`, `$use-device-width`, `$fallback-class`` and can be added to mixin separately.
div {
  @include above(32em, $orientation: portrait, $fallback-class: '.tablet-portrait') {
    color: red;
  }
}
Compiles to:
@media only screen and (min-width: 32em) and (orientation: portrait) {
  div {
    color: red;
  }
}

.tablet-portrait div {
  color: red;
}

Miscellaneous

Inspired by Rupture mixins lib for Stylus

Thanks

elgandoz Honza