Cirrus

#What's New in 0.7.0?

Like Cirrus 0.6.0, 0.7.0 was another large undertaking that brought a large refactor of the entire codebase to prioritize configurability and enhance overall developer experience. This rewrite represents the first step in how Cirrus is repositioning as a component-and-utility-centric SCSS framework.

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.

#A new way to use Cirrus

With previous versions, the only ways to use Cirrus was to either linking the CDN link at the top of your page or importing cirrus-ui into your Node project.

This is fine, but it lacked any sort of customization. The only way to change Cirrus was to clone the project and build your own version locally. Dart Sass has given me immense opportunity to improve Cirrus's usability and fix technical debt and hacks. One of the things it also enabled was directly importing Cirrus into your Sass/Scss project directly.

Not only can you import different pre-configured versions of Cirrus, but also take advantage of all the functions, mixins, constants, etc. that Cirrus comes built with.

// main.scss
@use "cirrus-ui/cirrus-core" as *; // Core build OR
@use "cirrus-ui/src/cirrus-ext" as *; // Extended build

@screen-above($md) {
    .my-class {
        background-color: rgba(#{hex-to-rgb(fill('blue', '600'))}, .25);
    }
}

No more having to build Cirrus separately and then copying and pasting the generated styles to your project. Read more on this here.

#Focus on configurability

One of the things this rewrite aimed to accomplish was configurability. In the past, CSS frameworks were just things we plop into our project and we either accepted styles it gave us or we spent countless hours overriding them to fit our needs. Why should we continue to subject ourselves to that amount of torture?

0.7.0 marks a big step in dynamic class generation. Whether you are building Cirrus locally or you're importing Cirrus directly into your Sass files, you can take advantage of defining a configuration object in both scenarios when you import the framework. Use the configuration object to specify viewports for classes, extend existing component and utility styles, toggle features, and more.

@use "cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        excludes: (
            ABSOLUTES,
        ),
        opacity: null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity: (
                25: .25,
                50: .5,
                75: .75,
            )
        )
    ),
);

Currently most utility classes and components can be customized through here in this release, but I hope to extend this capability a lot more in future updates. Read more on this here.

#Revamped colors

Default colors have been tuned a bit for increased vibrancy and range. Of course, these colors can be customized via the configuration object as well.

#Utils, utils, and more utils

Utility classes within Cirrus have grown to be quite popular. This update adds utility classes for:

  • Letter Spacing — utilities to control letter spacing of an element.
  • Flex Wrap — utiltiies to control how flex items wrap.
  • Flex Grow — utilties to control how flex items grow.
  • Flex Shrink — utilities to control how flex items shrink.
  • Color Opacity — utilities to control color opacity (background and text/border).
  • Flex/Grid Gap — utilities to control gutters between grid and flexbox items.
  • Font Size — utilities for font sizes.
  • Box Shadow — utilities to add box shadows to an element.
  • Border Radius — utilities to control border radius of an element.
  • Min Height — utilities to set min height of an element.
  • Max Height — utilities to set max height of an element.
  • Min Width — utilities to set min width of an element.
  • Max Width — utilities to set max width of an element.
  • Font Weights — utiltiies to control font weight of an element.
  • Opacity — utilities to control the opacity of an element.
  • Z-Index — utilities to control the z-index of an element.

A lot of classes have also seen the introduction of viewport variants. Those can be found in the class specific documentation in the docs page.

<div class="u-z-50 ...">50</div>
<div class="u-z-40 ...">40</div>
<div class="u-z-30 ...">30</div>
<div class="u-z-20 ...">20</div>
<div class="u-z-10 ...">10</div>
<div class="u-z-1 ...">1</div>
<div class="u-z-0 ...">0</div>
<div class="u-z-n1 ...">-1</div>
<div class="u-z-auto ...">auto</div>

#Components

This update wasn't as focused on introducing new components, but it was not forgotten. Some of the new components styles are:

  • Breadcrumbs — a component used to create a sense of hierarchy when navigating a website.
  • Progress — Cirrus comes with styling right out of the box for the progress HTML element.
  • New Animations — new animation classes include pulse (skeleton loaders) and ping (notification).
3 new unopened messages in the last hour.
@johndoe sent "About your PR, it's mostly good but..."

#But wait, there's more

Check out all the other changes in the release notes.