Breakpoints

loonar-wp/assets/styles/config/

├── colors/
├── layout/
│   ├── _breakpoints.scss
│   └── _grid.scss
├── typography/
└── z-index/

Fixed Layout

_breakpoints.scss

// Create a Sass map, including breakpoint name (as key)
// and the corresponding media query (as value in pixels).
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

// Rarely you might want to use the `max-width` property instead of `min-width`.
// To let loonar know that you want to use the `max-width` breakpoint on the smallest breakpoint,
// you may optionally set the `$initial-breakpoint-name` variable. By default is set to `xs`
$initial-breakpoint-name: 'xs';

Fluid Layout

_breakpoints.scss

// Create a Sass map, including breakpoint name (as key)
// and the corresponding media query (as value in pixels).
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

// Rarely you might want to use the `max-width` property instead of `min-width`.
// To let loonar know that you want to use the `max-width` breakpoint on the smallest breakpoint,
// you may optionally set the `$initial-breakpoint-name` variable. By default is set to `xs`
$initial-breakpoint-name: 'xs';

// Fluid breakpoints is used to tell Loonar, that when the browser's window approach certain
// breakpoint (previously defined in `$breakpoints`), we want to start scaling the layout
// for the width and/or height used on design, so they will match the width and height of
// the design at that breakpoint perfectly.
$fluid-breakpoints: (
  'xs': (360px, 709px), // mobile
  'sm': (1024px, 768px), // tablet
  'xl': (1920px, 1080px), // desktop
);