🚀 Cirrus 0.8.0 launched!

#webdev #css #showdev #frontend

Cirrus 0.8.0! Lots of under the hood changes that have been in the works for quite a long time, but very excited it is finally out. This is a very crucial step before resuming work on Cirrus Blocks.

Docs
Github

🎉 Features

Major rewrite of class generation system.
New utility mixins to replace old ones:
- generator.utility -> generator_v2.utility
- generator.utility-with-body -> generator_v2.utility-with-body
Class generator now supports class grouping via group:[pseudo] and group-[pseudo] CSS classes. These allow developers to use events on a parent element to affect the styles of child elements.

@include generator_v2.utility(
    $base-class-name: 'text',
    $class-value-pairs: (
        'blue': (
            'color': blue,
        ),
    ),
    $variants: (
        'group-hover'
    ),
    $generate-viewports: true,
    $override: '!important'
);

.group:hover .group-hover\:u-text-blue {
    color: blue !important;
}

...

<div class="group">
    <p>test</p>
    <div class="group-hover:u-text-blue">
        <p>this is blue on hover</p>
        <p>this is also blue on hover</p>
    </div>
</div>

Class generator now supports many more variants (pseudos):
- 'responsive',
- 'dark', 'light',
- 'reduce-motion',
- 'first-of-type',
- 'last-of-type',
- 'portrait', 'landscape',
- 'hover', 'group-hover',
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
- 'active',
- 'visited',
- 'checked',
- 'disabled'

@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;
    }

...

Update grid class utilities to support generation with viewports and modifiers b3be15f
Enable hover pseudo selector for v2 colors 839cd47
Add custom button behaviors for v1 color classes (only apply on button selectors and add hover behavior) d4a6b6a
Add cursor util classes 32e0897
Add tooltip--visible class to show tooltips outside of :hover and :focus 9b77f78
Add new pseudo-variants config with integration to existing class generation 459dbba

@use "cirrus-ext" with (
    $config: (
        pseudo-variants: (
            CLEARFIX: ('responsive', 'hover', ...),
            FLEX: ('responsive'),
            ...
        ),
    ),
);

🐛 Fixes

Remove unnecessary forward for cirrus-all build 3dfa6e6
Migrate to ESM for Gulp, update Gulp deps, update CI to use Node 20 3697dee
Fix left padding for form-ext inputs 6453943
Remove inconsistent padding for table header and footer th 3842fce
Fix incorrect class name and property for italic font util class 6591ca1
Remove extra letter spacing from all text elements 6cb8f76
Add missing viewport config entries ea038be
Add missing grid-row styles grid-rows-, grid-r-, grid-rs-, and grid-re- 1295016
Fix grid row column style c95fe41
Link font weight and color adjustments no longer apply on nested input elements a6b5e25
Remove background color from avatar when there is a child image element 7d4ea82
Fix text color with a tag and .btn class c1c7fa5
Remove button shadow on focus for .btn--disabled 867eeff
Fix broken tab styles, remove remaining hardcoded colors #330 bfa64c6

💥 Breaking Changes

New viewport syntax across all classes that support different viewports, unifying the fractured viewport system.
- The main difference from before is now all viewport modifiers will use the same syntax instead of inconsistent system from before. All classes that are meant to apply at a certain viewport size and above will be in the form of [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.
Deprecated margin:1 rem 0; style for p, article, blockquote since it leads to unexpected behaviors for users 9bcda3a
Deprecating row.no-space classes 8e802f9
Update Modal class names for clarity 9da499f
Deprecated .modal.small 9da499f
Deprecating placeholder.scss 39e663b
Deprecated .title and .subtitle classes b07c76d
Deprecated viewports config in favor of using 'responsive' entry in pseudo-variant config 1f33d83

Thanks for reading!

💎 Thank you for taking the time to check out this post. For more content like this, head over to my actual blog. Feel free to reach out to me on LinkedIn and follow me on Github.