Gamma 6

[Spiderpig86]

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.

With this, there will be some breaking changes when upgrading to 0.7.0, but this release note entry should make the changes painless to do.

There are a ton of things that were added in this new update, but below are a few big ones I want to highlight.

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 "node_modules/cirrus-ui/cirrus-core" as *; // Core build OR
@use "node_modules/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 "node_modules/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
• Flex
  • Wrap
  • Grow/Shrink
• Color Opacity
• Flex/Grid Gap
• Font Size
• Box Shadow
• Border Radius
• Min/Max Height/Width
• Font Weights
• Opacity
• Z-Index

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.

Components

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

• Breadcrumbs
• Progress
• New Animations

Check out the new docs to see all the new features in 0.7.0!

🎉 Features

• Avatars now use currentColor for text. 5ff9035
• Card footer font size increased to font-size-s. 57a2c89
• New xl viewport added to Cirrus. 61e3f03
• New utility classes for opacity.
• New framework colors for black and white. 2334c1a
• Migrate from LibSass to DartSass. fc54c2d
• Add z-index utility classes. a596b6a
• Add absolute positioning utility classes. fb4379a
• New unit testing and CI setup (series of commits).
• Add font size utility classes. d5b8088
• Add flex/grid gap utility classes 98ea940
• Add box shadow utility classes. f7c4862
• Add flex grow/shrink utility classes. 00d2d61
• Add min/max height/width utility classes. 1639ea4
• Add border radius utility classes. b7b3892
• Enable viewport class generation for grid. decb897
• Allow element focus color to be overidden. 1c0b7db
• Add breadcrumb component. 9328a6c
• Add progress component. df19e16
• Add new pulse and ping animations. 5f13215
• Add flags to conditionally generate utility classes. a455e2a
• Add flags to conditionallity generate component styles. 2dbc78d
• Add table-container class to handle overflowing tables with many columns. f0249ed
• Add utility classes for background color opacity. 60c1a33
• Add utility classes for text color opacity. 1176332
• Refactor color usage of buttons to use background and text opacity configs. de0beca
• Tune v2 colors for better vibrancy. 62b2a34
• Add bg-transparent and text-transparent classes. c0fcb18
• Add flex-wrap utility classes. 7875c39
• Add letter-spacing utility classes. 4d6f8a8
• Add font-primary and font-secondary (aka font-alt) classes. 5e67315
• Update CSS reset for Cirrus. 27c905a
• Darken default text color. cea9b3c

🐛 Fixes

• Fixed rendering issues where links with classes u and utb rendered with inconsistent heights. 9a60273
• Remove extra margin and padding from textarea. 65caa20
• Fix bug where smaller viewport classes will override classes with larger viewports for columns. 8e48957
• Change height for fullscreen to min-height: 100vh. 4b6c075
• Fix bug where margin auto classes were not correctly behaving based on viewport. 4616553
• Remove link color override in footer. bbe6d75
• Fix bug where hamburger menu animations where not working. 203ab37
• Fix issue where toggle glyph was not hidden behind the toggle knob. fa7c1bb

💥 Breaking Changes

• The content class will now default to 100% width and adjusts according to xs, sm, md, lg, and xl breakpoints. To get the previous behavior, just include w-80. 61e3f03
• faded class is now deprecated. Use opacity utilities instead. 1e9205d
• New BEM naming style for components with size variants. These classes now use --xs, --sm, --md, --lg, and --xl instead of -xsmall, -small, -large, -xlarge.
  • Avatar 594767a
  • Form Group Label 1549394
  • Button 8f9eca6
  • Tab b71cfbb
  • Space b90b199
  • Form Input 2d2cf49
• Deprecate white. Use text-white instead. 2334c1a
• Deprecate vendor prefixes for button, forms, frames, animations, misc utils, and more. Will not impact most browsers. cf5a24c 9dfac0f
• Deprecated old border radius classes. b7b3892
  • u-round => u-round-xs
  • u-circle => u-round-full
• Rename old pulse animation to pound. 72839d2
• Major refactor of project structure. Should not be breaking unless you import things directly from the framework. 0c0d0ff
  • Introduce new directory structure centered around base, components, and utils
  • New build target files for core and ext
  • Moved animations, grid, and modifiers to be part of core build
• Removed exports of Cirrus v1 colors as CSS variables. f044ce9
• Tab position classes now use BEM. 4dd3b7e
  • tabs-center => tabs--center
  • tabs-right => tabs--right
  • New tabs--left class.
• Deprecate all grid-gap-* classes in favor of u-gap-*. 1aaee51
• All existing width/height, min/max width/height classes will now be suffixed a with a p to indicate percentage. fa76931
  • w-50 => w-50p
  • h-50 => h-50p
  • min-h-50 => min-h-50p
  • min-w-50 => min-w-50p
  • max-h-50 => max-h-50p
  • max-w-50 => max-w-50p

---

This discussion was created from the release Gamma 6.