2024-07-11 21:05:34 -04:00
< html >
< head >
< title > Pattern< / title >
< / head >
< body data-prismjs-copy-timeout = "1500" >
< h2 > What is it< / h2 >
2024-07-16 03:57:34 -04:00
< p > Breakpoints enable responsive mobile design.< / p >
2024-07-11 21:05:34 -04:00
< h2 > When to use it< / h2 >
2024-07-16 03:57:34 -04:00
< p > Use breakpoints when designing for different screen sizes. < / p >
< p > The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. < / p >
2024-07-11 21:05:34 -04:00
< h2 > How to use it< / h2 >
2024-07-16 03:57:34 -04:00
< p > This pattern is only available for SCSS breakpoints. The mixin is avai< / p >
2024-07-11 21:05:34 -04:00
< p > When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. < / p >
2024-07-28 15:30:51 -04:00
< tabset id = "breakpoints" >
< div tab = "scss" >
< pre class = "language-sass" > @import "[path-to]/breakpoints";
@include break([breakpoint]) {
// css here
}< / pre >
< pre class = "language-sass" > //- DS2 core (c) 2024 Alexander McIlwraith
2024-07-11 21:05:34 -04:00
//- Licensed under CC BY-SA 4.0
2024-07-28 15:30:51 -04:00
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
2024-07-11 21:05:34 -04:00
@mixin breakpoint-debug {
body::before, body::after {
background-color: #555;
color: white;
content: "bigger than extra large";
display: grid;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;
place-content: center;
// text-align: center;
@include break(-xl) {
content: "extra large";
}
@include break(-lg) {
content: "large";
}
@include break(-md) {
content: "medium";
}
@include break(-sm) {
content: "small";
}
}
}
@mixin break($bps, $points: $grid-breakpoints) {
@each $bp in $bps {
$min: 0;
$max: 0;
@if str-length($bp) == 2 {
// only a single break point was received
$min: map-get($points, $bp);
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
} @else {
@if str-slice($bp, 0, 1) == "-" {
// no lower breakpoint was received
$min: null;
$max: map-get($points, str-slice($bp, 2, 3));
} @else {
$min: map-get($points, unquote(str-slice($bp, 0, 2)));
@if str-length($bp) == 3 {
// no upper break point was received
$max: null;
} @else {
$max: map-get($points, str-slice($bp, 4, 5));
}
}
}
@if $min != null and $max != null {
// Makes the @content apply between the min and max breakpoints
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $min == null {
// Makes the @content apply to the given breakpoint and narrower.
@media (max-width: $max) {
@content;
}
} @else if $max == null {
// Makes the @content apply to the given breakpoint and wider.
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
}< / pre >
2024-07-28 15:30:51 -04:00
< / div >
< / tabset >
2024-07-11 21:05:34 -04:00
< / body >
< / html >
