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) {

Media-Queries v2 (2026, reduced breakpoints)

Migrating from v1? See the full Breakpoint V2 Migration Guide.

Breakpoints:

• s: 0 - 767px
• m: 768 - 1439px
• l: >= 1440px

@include breakpoint-v2(s) { // max: 767px
@include breakpoint-v2(m) { // min: 768px ~ max: 1439px
@include breakpoint-v2(l) { // min: 1440px

@include breakpoint-up-v2(m) { // min: 768px
@include breakpoint-down-v2(m) { // max: 1439px

Optional wrapper for step-by-step migration

Use a wrapper class (default: .gbw-bp-v2) so new components can be enabled only inside specific areas.

.my-component {
  @include breakpoint-v2-scope {
    // base styles
    @include breakpoint-up-v2(m) {
      // styles for >= 768px
    }
  }
}

Root-level alternative:

@include breakpoint-v2-wrap {
  .my-component {
    // styles here
  }
}

You can change or disable the wrapper by overriding $bpV2Scope before importing this package:

$bpV2Scope: null; // disables the wrapper

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

SCSS Vars v2

$bpV2M: 768;
$bpV2L: 1440;
$bpV2Scope: '.gbw-bp-v2';

$bpV2MDownPx: 767px
$bpV2LDownPx: 1439px