🚀 The fastest way to design and implement your app - Cirrus 0.7.0 is now out!

👋 Hey everyone!

In the middle of the pandemic, I sought to rewrite Cirrus to fix many of the issues and inconsistencies that plagued its previous versions and launched on November of 2020. It was well received and definitely inspired me to keep on going.

This year, I am releasing a new version of Cirrus that focuses on the framework's future. There are often debates on whether component-centric frameworks such as Bootstrap or atomic-classed frameworks such as Tailwind are better for its:

• Learning curve
• Maintainability
• Flexibility
• Ease of use

Cirrus is a framework that takes the best parts of both of these types of frameworks and provides:

• Many pre-built basic components to accelerate your development velocity (e.g. Avatars, Modals, Tabs, etc.). To keep your code clean, all component classes are built following the BEM convention.
• A suite of common utility classes to help tweak and polish your designs when needed. These utility classes are so powerful that you can construct components with them alone.
• Different CDN builds of the framework that can be dropped in at any browser (core, ext, all). Choose one that fits your needs.

With the release of 0.7, much of the framework can now be customized. Since the framework is written entirely in Scss, it can take advantage of all the existing APIs for class generation. The new configuration system in Cirrus allows you to:

• Add/Edit/Delete component styles.
• Add/Edit/Delete utility classes.
• Specify which breakpoints are supported.
• Toggle which classes should have viewport variants (to help save on build size).
• Enable/Disable different parts of the framework.
• And more :)

😵 So what's actually new?

🌞 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.

Check out all colors here.

⚡ 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).

💎 But wait, there's more

Check out all the other changes in the release notes.

😊 Thank You

Before I start blabbering on too much about the technical details, I will end by saying please check out the docs, give it a try on the playground, and let me know your thoughts!

And as always, if you like my work, feel free to follow me on these platforms:

• Blog
• Github
• LinkedIn