3-variables edit

wm-breakpoints  edit 

/* scss/3-variables/_wm-breakpoints.scss */

// ==============================================
// BREAKPOINTS
// ==============================================
// STYLE DEVELOPMENT ALWAYS STARTS WITH MOBILE STYLES
// THEN BREAKPOINTS ARE USED TO ADD STYLES FOR WIDER SCREENS
//

// Returns breakpoint media query using values from the $breakpoints map or a custom value.
// can be used anywhere in the css file.
// default parameter is min-width. set "max" as second parameter for max-width.
// usage: @include breakpoint($desktop-to-wide-desktop-breakpoint) { ... css styles ... };
// usage: @include breakpoint(lg) { ... css styles ... };
// usage: @include breakpoint(340px) { ... css styles ... };
// outputs:
// @media (min-width: 1215px) { ... css styles ... }

$breakpoints: (
  3xs: 350px,
  2xs: 530px,
  xs: 600px,
  sm: 700px,
  md: 930px,
  lg: 1024px,
  xl: 1215px,
  2xl: 1680px,
);

$tiny-mobile-to-sm-mobile-breakpoint: 3xs; //350
$youtube-breakpoint: 560px;
$widget-mobile-to-tablet-breakpoint: xs; // 600
$sm-mobile-to-mobile-breakpoint: xs; // 600
$mobile-to-wide-mobile-breakpoint: sm; // 700
$mobile-to-desktop-breakpoint: md; //930
$footer-mobile-to-desktop-breakpoint: 1000px; //footer
$menu-mobile-to-desktop-breakpoint: lg; // menu
$desktop-to-wide-desktop-breakpoint: xl; //1215
$wide-desktop-to-ultrawide-desktop-breakpoint: 2xl; // 1680

// // retrieve breakpoint from map with Sass ie. 'breakpoint(lg)'
// @function breakpoints($value) {
//   @return map-get($breakpoints, $value);
// }

// legacy
// need to update remaining
// Xs: 650
// Sm: 700
// Md: 930
// Lg: 1024
// Xl: 1215
// widget.scss
// 650
// 1216
// Content page
// 674
// 695
// 938
// 1215
// Menu
// 1024px;

 
/* scss/3-variables/_wm-breakpoints.scss */

// ==============================================
// BREAKPOINTS
// ==============================================
// STYLE DEVELOPMENT ALWAYS STARTS WITH MOBILE STYLES
// THEN BREAKPOINTS ARE USED TO ADD STYLES FOR WIDER SCREENS
//

// Returns breakpoint media query using values from the $breakpoints map or a custom value.
// can be used anywhere in the css file.
// default parameter is min-width. set "max" as second parameter for max-width.
// usage: @include breakpoint($desktop-to-wide-desktop-breakpoint) { ... css styles ... };
// usage: @include breakpoint(lg) { ... css styles ... };
// usage: @include breakpoint(340px) { ... css styles ... };
// outputs:
// @media (min-width: 1215px) { ... css styles ... }

$breakpoints: (
  3xs: 350px,
  2xs: 530px,
  xs: 600px,
  sm: 700px,
  md: 930px,
  lg: 1024px,
  xl: 1215px,
  2xl: 1680px,
);

$tiny-mobile-to-sm-mobile-breakpoint: 3xs; //350
$youtube-breakpoint: 560px;
$widget-mobile-to-tablet-breakpoint: xs; // 600
$sm-mobile-to-mobile-breakpoint: xs; // 600
$mobile-to-wide-mobile-breakpoint: sm; // 700
$mobile-to-desktop-breakpoint: md; //930
$footer-mobile-to-desktop-breakpoint: 1000px; //footer
$menu-mobile-to-desktop-breakpoint: lg; // menu
$desktop-to-wide-desktop-breakpoint: xl; //1215
$wide-desktop-to-ultrawide-desktop-breakpoint: 2xl; // 1680

// // retrieve breakpoint from map with Sass ie. 'breakpoint(lg)'
// @function breakpoints($value) {
//   @return map-get($breakpoints, $value);
// }

// legacy
// need to update remaining
// Xs: 650
// Sm: 700
// Md: 930
// Lg: 1024
// Xl: 1215
// widget.scss
// 650
// 1216
// Content page
// 674
// 695
// 938
// 1215
// Menu
// 1024px;
Copy
Edit
<!-- components/3-variables/wm-breakpoints.php --> <pre><code class="language-css"><?php echo outputFile('../scss/3-variables/_wm-breakpoints.scss'); ?> </code></pre> <pre><code class="printableVars"><?php echo outputFile('../scss/3-variables/_wm-breakpoints.scss'); ?> </code></pre>
Cancel
Copy
Copy
Edit
/* scss/3-variables/_wm-breakpoints.scss */ // ============================================== // BREAKPOINTS // ============================================== // STYLE DEVELOPMENT ALWAYS STARTS WITH MOBILE STYLES // THEN BREAKPOINTS ARE USED TO ADD STYLES FOR WIDER SCREENS // // Returns breakpoint media query using values from the $breakpoints map or a custom value. // can be used anywhere in the css file. // default parameter is min-width. set "max" as second parameter for max-width. // usage: @include breakpoint($desktop-to-wide-desktop-breakpoint) { ... css styles ... }; // usage: @include breakpoint(lg) { ... css styles ... }; // usage: @include breakpoint(340px) { ... css styles ... }; // outputs: // @media (min-width: 1215px) { ... css styles ... } $breakpoints: ( 3xs: 350px, 2xs: 530px, xs: 600px, sm: 700px, md: 930px, lg: 1024px, xl: 1215px, 2xl: 1680px, ); $tiny-mobile-to-sm-mobile-breakpoint: 3xs; //350 $youtube-breakpoint: 560px; $widget-mobile-to-tablet-breakpoint: xs; // 600 $sm-mobile-to-mobile-breakpoint: xs; // 600 $mobile-to-wide-mobile-breakpoint: sm; // 700 $mobile-to-desktop-breakpoint: md; //930 $footer-mobile-to-desktop-breakpoint: 1000px; //footer $menu-mobile-to-desktop-breakpoint: lg; // menu $desktop-to-wide-desktop-breakpoint: xl; //1215 $wide-desktop-to-ultrawide-desktop-breakpoint: 2xl; // 1680 // // retrieve breakpoint from map with Sass ie. 'breakpoint(lg)' // @function breakpoints($value) { // @return map-get($breakpoints, $value); // } // legacy // need to update remaining // Xs: 650 // Sm: 700 // Md: 930 // Lg: 1024 // Xl: 1215 // widget.scss // 650 // 1216 // Content page // 674 // 695 // 938 // 1215 // Menu // 1024px;
Cancel