Sometimes you want to add the font sizes of a heading level element (eg. h2) but don't want to - or can't - add a .h2 class (e.g. when modifying vendor markup).
Previously you might have used @extend .h2; to do this, but this is problematic as css could get unwieldly due to any reference to the .h2 class being included in the generated css.
Now you can simply @include h2(); to apply line height and responsive font-size without the need for a specific class.
This will have the same font-size and line-height as a h3 tag
.is-h3-size {
@include h3(); // Applies h3 font-size and line-height
}
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.
// 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