msc-viewport-helper

Viewport Helper

A css-only helper to show the currently active viewport.

Installation

Install via your preferred package manager.

npm install --save msc-viewport-helper

Create a helper file that includes and renders the viewport helper:

@use '~msc-viewport-helper' as helper;

$viewport-helper-breakpoints: $breakpoints;

@include helper.viewport-helper($breakpoints);

Your Breakpoint map should look like this. And make sure that the breakpoints are sorted by size.

$breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    hg: 1440px,
);

To enable the viewport helper you need to include the created helper file to your compiler settings. You also may want to only do this when not building for production.

{
    entry: {
        main: ['./src/js/main.js', './src/scss/main.scss'].concat(
            isProduction ? [] : ['./src/scss/viewport-helper.scss']
        );
    }
}

Used By

This project is used by the following companies:

• MASSIVE ART

License

MIT