Cirrus CSS 0.8.0 Launched!

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.