There are a plethora of new changes in 0.8.0, especially with class syntax and overall class generation. This update focuses on revamping the whole class generation engine and addressing other issues that existed in 0.7.x.
There are a ton of things that were added in this new update, but below are a few big ones I want to highlight. For a full list, please visit the release notes to learn more.
One of the most confusing things about the previous versions of Cirrus was the syntax used for specifying viewports for applying classes. There were a total of 3 ways of specifying this. Starting with this update, all of these will be unified to a single syntax: [sm|md|lg|xl]:classname. This will be the case for all classes whether it is for columns or utility classes.
Below are the main syntax changes:
col-sm-1 -> sm:col-1 - column classes will all have the viewport modifier prefixed at the front.col-6 -> md:col-6 - all column classes that did not have the modifier class must be prefixed with md: to get the same behavior as before. This is to address the confusing implicit behavior where a class like col-6 would have 50% width for md and above but 100% width for viewports below`md.u-block-md -> md:u-block - for all utility classes, the viewport modifier will be prefixed at the front.Read more on this here.
Pseudo-class modifiers bring you the ability to apply certain classes in Cirrus based on an element's state. For instance, the hover:text-white pseudo-class will cause an element's text color to change to white when hovered.
This can be used to the dynamic behavior Cirrus lacked in the prior versions -- all made possible by the revamps made to Cirrus's class generation engine.
Class generator now supports many more variants (pseudos):
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'dark',
'hover',
'reduce-motion',
'group-hover',
'group-focus',
),
$generate-viewports: true,
$override: '!important'
);.u-text-blue {
color: blue !important;
}
.hover:u-text-blue:hover {
color: blue !important;
}
.group:hover .group-hover:u-text-blue {
color: blue !important;
}
.group:focus .group-focus:u-text-blue {
color: blue !important;
}
@media screen and (min-width: 640px) {
.sm:u-text-blue {
color: blue !important;
}
.sm:hover:u-text-blue:hover {
color: blue !important;
}
...
You can configure which pseudo-class states are supported for each utility class within the configuration. Read more on this here.
Cirrus now documents and exposes the @utility and @utility-with-body mixins for generating your own utility classes. This helps to bridge any gap that exists between your use cases and Cirrus's offerings without having to wait for another update or trying to tinker with the source code itself.
These APIs give you the flexibility to change the class name prefix, class name, delimiters, overrides, pseudo-class variants, styles to apply, etc.
In short, the APIs do the following:
@utility - specify your own utility classes with class name + CSS property pairs.@utility-with-body - similar to @utility, but allows you to specify more custom logic for class generation.Example and explanation of each input param is listed below.
// Use any flavor of Cirrus
@use 'cirrus-ext' as *;
// Custom plugin example
@include utility(
// Defaults to 'u' from config.$utility-prefix in '_config.scss' Can be empty.
$class-prefix: 'custom',
// Defaults to '-' from config.$delimiter in '_config.scss'. Can be empty.
$delimiter: '-',
// Name that comes after the $class-prefix but before $class-value-pair keys.
// For example, this is the "bg" inside the generated class name of "custom-bg-peachpuff" in this example
$base-class-name: 'bg',
// Specify which styles to specify. This tells Cirrus to generate classes for "custom-bg-papayawhip", "custom-bg-peachpuff", etc.
$class-value-pairs: (
papayawhip: (
background-color: papayawhip,
),
peachpuff: (
background-color: peachpuff,
),
salmon: (
background-color: salmon,
),
tomato: (
background-color: tomato,
),
),
// Specify which variants to generate
$variants: (
'hover',
),
// Defaults to '\:' from config.$variant-delimiter in '_config.scss'. Can be empty but not advisable.
$variant-delimiter: '\:',
// Defaults to '!important' from config.$override in '_config.scss'. Can be empty.
$override: '!important'
);
This would generate the following classes:
.custom-bg-papayawhip {}
.hover\:custom-bg-papayawhip:hover {}
.custom-bg-peachpuff {}
.hover\:custom-bg-peachpuff:hover {}
/* Etc. */Read more on this here.
These breaking changes definitely deserve a callout here. Please read carefully.
[sm|md|lg|xl]:classname. This will be the case for all classes whether it is for columns or utility classes.col-sm-1 -> sm:col-1 - column classes will all have the viewport modifier prefixed at the front.col-6 -> md:col-6 - all column classes that did not have the modifier class must be prefixed with md: to get the same behavior as before. This is to address the confusing implicit behavior where a class like col-6 would have 50% width for md and above but 100% width for viewports below md.u-block-md -> md:u-block - for all utility classes, the viewport modifier will be prefixed at the front.margin:1 rem 0; style for p, article, blockquote since it leads to unexpected behaviors for users.modal.small.title and .subtitle classesCheck out all the other changes in the release notes.