v2.0.0
Core changes
-
Removed node-sass package in favor of dart-sass.
-
Added support for CSS variables. Customization of your theme can now be done without using SASS.
-
Added
createColor()function. It takes a color as a parameter and returns a formatted color based on the value of the$color-typevariable. Supported values are 'hsl', 'rgba' and 'hex'. This ensures consistency throughout the framework. -
Added
createHSLColor($color)function. This accepts any CSS color value and returns the HSL equivalent. -
Added
createRGBAColor($color)function. This accepts any CSS color value and returns the RGBA equivalent. -
Added
createHexColor($color)function. This accepts any CSS color value and returns the HEX equivalent. -
Removed a handful of functions from _function.scss. See the deprecations section for a full list.
-
Added
$color-typevariable to _colors.scss. This variable controls the framework wide format for colors to be generated. Supported values are 'hsl', 'rgba' and 'hex'. -
Removed link and disabled from the
$color-palettelist. These colors still exist and can be referenced as per usual. -
Added new secondary color to the color palette.
-
CSS variables added for each color along with a lighter and darker version, a text color and an alert color.
-
Replaced most variables in _general.scss with CSS variables.
-
Added
has-no-transitionhelper to the global helpers. It sets the transition property of an element to none. -
title and subtitle changed to heading and subheading. Variables updated to reflect this change.
-
Added the
is-subheadingmodifier to replace thesubtitlemodifier. -
Controls for background and font color added to the hero__content and hero__footer element. Background color can no longer be set on the hero block.
-
Added a max width control to images within the top__brand element.
-
Various changes to the appearance of certain module elements.
-
Removed
color($key)function. -
Removed
title-size($key)function. -
Removed
has-bg-linkandhas-text-linkmodifiers from the color module. -
Removed the set of
is-*-titlemodifiers from the Typography module. -
Removed the
subtitlemodifier from the Typography module. -
Add CSS variable support to all modules. Refer to the documentation of each module for the list of CSS variables.
New Sass variables
| Variable | Module | Default value |
|---|---|---|
$hero-background-color |
Hero | hsl(0deg, 0%, 100%, 1) |
$hero-color |
Hero | hsl(0deg, 0%, 22%, 1) |
$input-error-background |
Form | hsl(348deg, 100%, 58%, 0.2) |
$input-error-border-color |
Form | hsl(347deg, 100%, 58%, 1) |
$input-error-color |
Form | hsl(0deg, 0%, 22%, 1) |
$input-border-width |
Form | 1px |
$select-loading-speed |
Form | .8s |
$select-loading-width |
Form | 2px |
$select-loading-color |
Form | hsl(32deg, 12%, 82%, 1) |
$top-shadow |
Top (Navbar) | none |
$top-brand-color |
Top (Navbar) | inherit |
$top-brand-max-logo-width |
Top (Navbar) | 200px |
$top-link-background |
Top (Navbar) | hsl(0deg, 0%, 66%, 0.15) |
$top-social-hover-color |
Top (Navbar) | inherit |
$menu-list-background |
Menu | transparent |
$menu-list-hover-background |
Menu | hsl(0deg, 0%, 75%, 0.09) |
$menu-list-hover-color |
Menu | hsl(0deg, 0%, 22%, 1) |
$menu-divider-width |
Menu | 1px |
$menu-divider-color |
Menu | hsl(210deg, 16%, 92%, 1) |
$menu-expandable-border-width |
Menu | 1px |
$menu-expandable-border-color |
Menu | hsl(210deg, 16%, 92%, 1) |
$pagination-border-color |
Pagination | transparent |
$pagination-border-width |
Pagination | 1px |
$pagination-border-radius |
Pagination | 0 |
$pagination-hover-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$pagination-bordered-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$pagination-bordered-border-color |
Pagination | 4px |
$pagination-bordered-active-border-color |
Pagination | hsl(255deg, 73%, 58%, 1) |
$pagination-bordered-active-color |
Pagination | hsl(0deg, 0%, 100%, 1) |
$pagination-bordered-hover-background |
Pagination | hsl(0deg, 0%, 100%, 1) |
$pagination-bordered-hover-border-color |
Pagination | hsl(33, 12%, 72%, 1) |
$pagination-bordered-hover-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$accordion-border-width |
Accordion | 1px |
$accordion-border-color |
Accordion | hsl(0deg, 0%, 90%, 1) |
$accordion-title-background-color |
Accordion | transparent |
$accordion-content-color |
Accordion | hsl(0deg, 0%, 22%, 1) |
$accordion-content-background |
Accordion | hsl(0deg, 0%, 100%, 1) |
$alert-background-color |
Alert | hsl(0deg, 0%, 100%, 1) |
$alert-color |
Alert | hsl(0deg, 0%, 22%, 1) |
$button-hover-background |
Button | hsl(0deg, 0%, 100%, 1) |
$button-hover-color |
Button | hsl(0deg, 0%, 22%, 1) |
$button-rounded-radius |
Button | 6px |
$button-loading-speed |
Button | 0.8s |
$dropdown-color |
Dropdown | hsl(0deg, 0%, 22%, 1) |
$dropdown-border-width |
Dropdown | 1px |
$dropdown-border-color |
Dropdown | hsl(0deg, 0%, 80%, 0.34) |
$dropdown-link-hover-color |
Dropdown | inherit |
$image-thumb-border-width |
Image | 1px |
$image-thumb-border-color |
Image | hsl(33, 12%, 82%, 1) |
$modal-color |
Modal | hsl(0deg, 0%, 22%, 1) |
$table-background-color |
Table | hsl(0deg, 0%, 100%, 1) |
$table-color |
Table | hsl(0deg, 0%, 22%, 1) |
$tab-item-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-item-active-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-item-hover-color |
Tabs | hsl(234deg, 100%, 64%, 1) |
$tab-item-hover-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-content-background |
Tabs | transparent |
$tab-content-color |
Tabs | hsl(0deg, 0%, 22%, 1) |
$secondary |
Colors | #ff5e82 |
$theme-font-color |
Base | hsl(0deg, 0%, 22%, 1) |
$theme-background-color |
Base | hsl(0deg, 0%, 100%, 1) |
Removed Sass variables
| Variable | Module | Replaced with |
|---|---|---|
$select-arrow-height |
Form | - |
$input-border |
Form | $input-border-color$input-border-width |
$top-burger-height |
Top (Navbar) | - |
$menu-list-hover |
Menu | $menu-list-hover-background |
$menu-divider |
Menu | $menu-divider-color$menu-divider-width |
$menu-expandable-border |
Menu | $menu-expandable-border-color$menu-expandable-border-width |
$pagination-border |
Pagination | $pagination-border-color$pagination-border-width |
$pagination-rounded |
Pagination | $pagination-rounded-radius |
$pagination-bordered |
Pagination | $pagination-bordered-border-color |
$pagination-bordered-active |
Pagination | $pagination-bordered-active-background |
$pagination-bordered-hover |
Pagination | $pagination-bordered-hover-border-color |
$accordion-border |
Accordion | $accordion-border-color$accordion-border-width |
$button-border-style |
Button | - |
$button-text-align |
Button | - |
$button-loading-animation |
Button | $button-loading-speed |
$card-border-style |
Card | - |
$dropdown-border |
Dropdown | $dropdown-border-color$dropdown-border-width |
$dropdown-radius |
Dropdown | $dropdown-border-radius |
$dropdown-link-hover |
Dropdown | $dropdown-link-hover-background |
$image-thumb-border |
Image | $image-thumb-border-color$image-thumb-border-width |
$media-border-style |
Media | - |
$tag-border-style |
Tags | - |
$body-font-color |
Base | $theme-font-color |