Gamma 6
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
andping
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
andtext-transparent
classes. c0fcb18 - Add flex-wrap utility classes. 7875c39
- Add letter-spacing utility classes. 4d6f8a8
- Add
font-primary
andfont-secondary
(akafont-alt
) classes. 5e67315 - Update CSS reset for Cirrus. 27c905a
- Darken default text color. cea9b3c
π Fixes
- Fixed rendering issues where links with classes
u
andutb
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
tomin-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 to100%
width and adjusts according toxs
,sm
,md
,lg
, andxl
breakpoints. To get the previous behavior, just includew-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
. - Deprecate
white
. Usetext-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 topound
. 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 ofu-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