A pre-made gulp file will be included in CMS’s theme files along with
some SASS files, located in the CSS folder. By using a dedicated gulp
file, this allows us to use SASS whether the client site includes CEF or
not, and no matter what CMS we use. Variables, global classes, and the
core site structure’s styles will be in the main clarity.scss file, and
additional .scss files will be included at the bottom of the
clarity.scss file. Additional pages on the website will have their
styles separated into individual .scss files to help with organization
and maintenance; include an underscore at the front of additional .scss
files. This allows us to easily remove styles as the site grows and
changes, helping avoid orphaned styles.
The SASS file will call bootstrap’s CSS. Bootstrap can be customized
through the _bootstrapVariables.scss file.
// Margin and Padding grid breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: infix-breakpoint($breakpoint, $grid-breakpoints);
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $spacers {
.#{$infix}#{$abbrev}-#{$size} { #{$prop}: $length !important; }
.#{$infix}#{$abbrev}t-#{$size},
.#{$infix}#{$abbrev}y-#{$size} {
#{$prop}-top: $length !important;
}
.#{$infix}#{$abbrev}e-#{$size},
.#{$infix}#{$abbrev}x-#{$size} {
#{$prop}-right: $length !important;
}
.#{$infix}#{$abbrev}b-#{$size},
.#{$infix}#{$abbrev}y-#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$infix}#{$abbrev}s-#{$size},
.#{$infix}#{$abbrev}x-#{$size} {
#{$prop}-left: $length !important;
}
}
}
@each $prop, $abbrev in (min-width: minw, max-width: maxw) {
@each $size, $length in $spacers {
.#{$infix}#{$abbrev}-#{$size} {
#{$prop}: $length;
}
}
}
@each $prop, $abbrev in (min-height: minh, max-height: maxh) {
@each $size, $length in $spacers {
.#{$infix}#{$abbrev}-#{$size} {
#{$prop}: $length;
}
}
}
// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
@each $size, $length in $spacers {
.z-index-#{$size} { z-index: $size; }
@if $size != 0 {
.#{$infix}m-n#{$size} { margin: -$length !important; }
.#{$infix}mt-n#{$size},
.#{$infix}my-n#{$size} {
margin-top: -$length !important;
}
.#{$infix}me-n#{$size},
.#{$infix}mx-n#{$size} {
margin-right: -$length !important;
}
.#{$infix}mb-n#{$size},
.#{$infix}my-n#{$size} {
margin-bottom: -$length !important;
}
.#{$infix}ms-n#{$size},
.#{$infix}mx-n#{$size} {
margin-left: -$length !important;
}
}
}
.#{$infix}m-auto { margin: auto !important; }
.#{$infix}mt-auto,
.#{$infix}my-auto {
margin-top: auto !important;
}
.#{$infix}me-auto,
.#{$infix}mx-auto {
margin-right: auto !important;
}
.#{$infix}mb-auto,
.#{$infix}my-auto {
margin-bottom: auto !important;
}
.#{$infix}ms-auto,
.#{$infix}mx-auto {
margin-left: auto !important;
}
}
}
This Sass code snippet is responsible for generating responsive utility classes for margins and padding at different breakpoints. The code goes through various loops to create a combination of classes for different properties, sizes, and directions.
Here's a breakdown of what the code does:
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
// ...
}
}
$spacers map to create classes for each spacer size.@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $spacers {
.#{$infix}#{$abbrev}-#{$size} { #{$prop}: $length !important; }
// ...
}
}
.#{$infix}#{$abbrev}t-#{$size}, .#{$infix}#{$abbrev}y-#{$size} {
#{$prop}-top: $length !important;
}
// ...
@each $prop, $abbrev in (min-width: minw, max-width: maxw) {
@each $size, $length in $spacers {
.#{$infix}#{$abbrev}-#{$size} {
#{$prop}: $length;
}
}
}
// ...
@each $size, $length in $spacers {
.z-index-#{$size} { z-index: $size; }
@if $size != 0 {
.#{$infix}m-n#{$size} { margin: -$length !important; }
// ...
}
}
.#{$infix}m-auto { margin: auto !important; }
.#{$infix}mt-auto, .#{$infix}my-auto {
margin-top: auto !important;
}
// ...