🚀 Cirrus 0.7.2 Released

Hey everyone!

Just released 0.7.2 for Cirrus. Check it out! This release adds fixes to a lot of user requested issues.

What is Cirrus?

Cirrus is a component and utility centric SCSS framework designed for rapid prototyping. I started this project back in late 2016, but never really wrote about it. The main reason why you should use it is if you need to proto-type a project ASAP with many pre-styled component classes. There's a lot of CSS frameworks already out there, but Cirrus comes with my (and those who contributed in the past) take on what a CSS framework should have and a distinct style.

Onto the Updates

🎉 Features

Link pseudo elements will now use currentColor instead of fixed link color bd9ab44
Buttons now completely support color modifier classes (background, text, and border). 5962ca4
Add px (1px) to default sizing system. 14970c4
Add 48 and 64 to default sizing system to close the gap with xs viewport. 31f80f0
Border color util classes will now set button shadow color, taking precedence over bg color classes. 46fcc01
Add new normal-case utility class. 81d36aa
Add vertical-align util classes. ee67b56
Update utility mixin to handle prefers dark/light and reduced motion variants. 4907381
Add common class name field to utility api, add new function to convert old class map to new class mapping for utility mixin. 3b6d753
Reorder style generation to minimize minified size with gulp-clean-css. b5dd955
Add new gap classes for row or column only 5c317e0
Add new font style classes #192 83463e1
Move language label for code component to styling for 'pre' #206 2248631
Add new helper class to toggle tree-nav visibility 623a19d
Integrate native hover color generation for buttons using bg- modifier classes 7b55b6d
Add new utility classes for grid auto flow row and column. f0349a1

🐛 Fixes

Remove margins from label HTML element. 010146f
Remove margins for btn-close. 4bfb7c0
Last border of accordion item should be invisible. a95694b
Add missing button variables to v1 color classes. 8e01988
Reset cursor of nav-item children. c706fce
Inline condition for generating classes to avoid conflicting variable names. 50dc1b5
Fix incorrect viewport being used to apply fill-height styles #163. 7ef825b
Add left text alignment for list in dropdown menu. 6997266
Fix horizontal centering for default spinner. 50af674
All semantic color references to theme.scss will now use config.scss for customization #174 d3e0f9a
Remove duplicate generation of blur util classes c60a237
Fix grid row support, grid rows will now have a max of 6 74cdab9
Remove extra padding on anchor tags 9bd4aec
Move pointer cursor to tag__close-btn specifically instead of colored tags #193 0a6c23f
Hide overflow for frame component #195 7fd9209
Restrict transition animation to only box shadow #194 4731e12
Fix specifier for tree-nav class for small viewports 875a5ce
Fix issue where range slider does not slide from start to end #217 77582e7
Fix accordion rendering on Safari #216 ab69a6c
Set pointer as default cursor for pagination-item a tag #211 d9ea857
Vertical center spinner fix (#242) 856461d
Fix bug where list dropdown menu flashes briefly during page load #207 2cbc17a
Use default browser focus styling for elements that don't have custom styling b164485
Remove unused focus styling 68eb3a2
Fix incorrect property used for column gap 81336a8
Fix bug where webkit default focus styles were applied instead of input, textarea, and select focus styles, refactor forms code cff0e97
Fix incorrect selector used in commit a95694b 7090712
Form border styling should respect --border-opacity var if present 95bb80b
Fix horizontal alignment of loading spinner f093e8f

💥 Breaking Changes

Rename tree-nav--shown to tree-nav--visible to follow new class conventions 37290af
Deprecate .menu-item.right, revert to applying list stylings to child link to support nested lists, expand list stylings to child divs and spans first children only #198 889f0fe
Deprecating .usquare and .usquare.delay classes due to incompatible color styling 161bf52

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.