Introduction

This package contains common CSS variables used by the Webpipeline team.

Publish to npm

1. Commit
2. Update the version with npm version patch|minor|major
3. Push changes
4. Publish with npm publish --access public

Installation

pnpm i @mmg-dev/webpipeline-gbw-shared-vars

Regular (Stencil):

@import '~@mmg-dev/webpipeline-gbw-shared-vars';

Vite:

@import '@mmg-dev/webpipeline-gbw-shared-vars';

Stencil:

import { options } from '@mmg-dev/webpipeline-gbw-shared-vars';
console.log(options.res.lg);

Media-Queries: (md = 768px)

@include breakpoint(md) { // min:md ~ max:lg
@include breakpoint-down(md) {
@include breakpoint-up(md) {

SCSS Vars:

$bpSm: 375px;
$bpMd: 768;
$bpLg: 1024;
$bpXl: 1280;
$bpXxl: 1440;
$bpXxxl: 1920;

$bpSmDownPx:  374px
$bpMdDownPx: 767px
$bpLgDownPx:  1023px
$bpXlDownPx:  1279px
$bpXxlDownPx:  1439px
$bpXxxlDownPx:  1919px