The following variables are now exposed as CSS custom properties to the :root for easier manipulation of elements. Initial values are still set with SASS variables for backwards-compatibility.
// Element margin and padding - use these where possible instead of $element-margin and $element-padding
--element-margin: #{$element-margin};
--element-padding: #{$element-padding};
// Default styling for anchor links
--link-color: #{$link-color};
--link-color-active: #{$link-color-active};
--link-color-visited: #{$link-color-visited};
// Shortcuts for 500 color shades - iterates for all colors in the $colors map
--color-primary: var(--color-primary-500);
--color-secondary: var(--color-secondary-500);
--card-border-radius: #{$card-border-radius};
--card-border-style: #{$card-border-style};
--card-border-color: #{$card-border-color};
--card-border-width: #{$card-border-width};
--card-padding: #{$card-padding};
--modal-max-width: #{$modal-max-width};
--modal-padding: #{$modal-padding};
--form-input-background: #{$input-background};
--form-input-border-width: #{$border-width};
--form-input-border-style: #{$border-style};
--form-input-border-color: #{$border-color};
--form-input-border-radius: #{$border-radius};
--form-input-placeholder-color: #{$placeholder-color};
--table-border-color: #{$table-border-color};
--table-font-size: #{$table-font-size};
--table-stripe-color: #{$table-stripe-color};
--table-hover-background: #{$table-hover-background};
--table-cell-background: transparent;
--navbar-bg-color: #{$navbar-bg-color};
--navbar-link-color: #{$navbar-link-color};
--navbar-link-bg-color: #{$navbar-link-bg-color};
--navbar-link-hover-color: #{$navbar-link-hover-color};
--navbar-link-hover-bg-color: #{$navbar-link-hover-bg-color};
--navbar-link-hover-weight: #{$navbar-link-hover-weight};
--navbar-link-border: #{$navbar-link-border};
--navbar-text-transform: #{$navbar-text-transform};
--navbar-font-size: #{$navbar-font-size};
--navbar-font-family: #{$navbar-font-family};
--navbar-font-weight: #{$navbar-font-weight};
--navbar-link-padding-x: #{$navbar-link-padding-x};
--navbar-link-padding-y: #{$navbar-link-padding-y};
--navbar-dropdown-width: #{$navbar-dropdown-width};
--navbar-dropdown-anchor: #{$navbar-dropdown-anchors-right-after};
table elements now have smaller font sizes by default with a new SASS / CSS property: $table-font-size / --table-font-size .
Tables can now be modified with colors from the $colors map.
| Color | Example | ||||||
|---|---|---|---|---|---|---|---|
| Primary |
|
||||||
| Mixed |
|
Headings, paragraphs and list items will now have balanced text by default, negating orphans.
This is an example of a paragraph that will also be balanced automatically reducing the chance for orphans to appear in most situations. This should improve the overall aesthetics of text-heavy layouts. Browser support is not currently universal (looking at you, Firefox).
Long email addresses in <a href="mailto:"> links will now hyphenate automatically to prevent overflow issues in small containers.
All .col elements are now CSS Container elements. This allows for more advanced responsive layouts using container queries, as most components are direct children of .col.
In addition, there are new shorthand SASS mixins for container queries:
.parent-container {
container-type: inline-size;
container-name: parent-container;
}
// 1. Applies when the nearest container is >= 400px
.card.container-query-1 {
@include container-above(400px) {
flex-direction: row;
}
}
// 2. Applies when the nearest container is < 400px
.card.container-query-2 {
@include container-below(400px) {
border-color: red;
border-width: 4px;
}
}
// 3. Applies when the nearest container is < 420px and >= 400px
.card.container-query-3 {
@include container-between(400px, 420px) {
background: rgb(116, 190, 255);
}
}
// 4. Applies when the nearest named container is < 400px and >= 800px
.card.container-query-4 {
@include container-between(400px, 800px, "parent-container") {
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
}
}
// 5. Applies when a named container is >= 800px
.card.container-query-5 {
@include container-above(800px, "parent-container") {
font-family: $font-monospace;
}
}
// 6. Applies when the nearest container is >= 400px, only below lg breakpoint
.card.container-query-6 {
@include below(lg) {
@include container-above(400px) {
border-color: red;
border-width: 4px;
}
}
}
#1
Flex:Row when Column Width >= 400px
#2
Red border when Column Width < 400px
#3
Blue Background when Column Width Between 400px and 420px
#4
Box shadow when Parent Container Width Between 400px and 800px
#5
Change typeface when Parent Container Width >= 800px
#6
Red border when Column Width >=400px, only below breakPoints.lg