🚀 Cirrus 0.7.2 Released
Tags: css, showdev, webdev, frontend
Published: 2023-12-30 17:21:39

Hey everyone!

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

💎 [Cirrus](https://github.com/Spiderpig86/Cirrus/)
📝 [Documentation](https://cirrus-ui.com/)

## 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](https://github.com/Spiderpig86/Cirrus/commit/bd9ab44b93dd5dd0c6f5aa08b84eb12611c4399a)
- Buttons now completely support color modifier classes (background, text, and border). [5962ca4](https://github.com/Spiderpig86/Cirrus/commit/5962ca4d02028f57b39b15eb70c3e9b33125ad14)
- Add px (1px) to default sizing system. [14970c4](https://github.com/Spiderpig86/Cirrus/commit/14970c42a0aac517635fa01a4e7e4e461de95eb9)
- Add 48 and 64 to default sizing system to close the gap with `xs` viewport. [31f80f0](https://github.com/Spiderpig86/Cirrus/commit/31f80f0b7ef73f372573959dad30c1d1ccc66a45)
- Border color util classes will now set button shadow color, taking precedence over bg color classes. [46fcc01](https://github.com/Spiderpig86/Cirrus/commit/46fcc01a58312e1d9566bfe9c704e1e073c42b04)
- Add new `normal-case` utility class. [81d36aa](https://github.com/Spiderpig86/Cirrus/commit/81d36aa3c2a90adf140813920307b6fd4e1188af)
- Add `vertical-align` util classes. [ee67b56](https://github.com/Spiderpig86/Cirrus/commit/ee67b56eb92509cfdb3bef7372f2fbe42b91c80c)
- Update utility mixin to handle prefers dark/light and reduced motion variants. [4907381](https://github.com/Spiderpig86/Cirrus/commit/49073812ae3efb1e2689e68fc8c5789a45717c66)
- Add common class name field to utility api, add new function to convert old class map to new class mapping for utility mixin. [3b6d753](https://github.com/Spiderpig86/Cirrus/commit/3b6d75341fa362fb4ace8f7ecfa6ecca5fc69fb2)
- Reorder style generation to minimize minified size with gulp-clean-css. [b5dd955](https://github.com/Spiderpig86/Cirrus/commit/b5dd955eef5fd4bfc978d8d9e87eb07d1a59fc74)
- Add new gap classes for row or column only [5c317e0](https://github.com/Spiderpig86/Cirrus/commit/5c317e09ea8ec60231d69495c1659277b7ba8648)
- Add new font style classes [#192](https://github.com/Spiderpig86/Cirrus/issues/192) [83463e1](https://github.com/Spiderpig86/Cirrus/commit/83463e12d184ab91fc0856339c976396a5489116)
- Move language label for code component to styling for 'pre' [#206 ](https://github.com/Spiderpig86/Cirrus/issues/206) [2248631](https://github.com/Spiderpig86/Cirrus/commit/22486311ec3cecbb7fca8ee012ed89b440cea932)
- Add new helper class to toggle tree-nav visibility [623a19d](https://github.com/Spiderpig86/Cirrus/commit/623a19d8d71f8c3fc9095c8ee14dfdf30f6e074d)
- Integrate native hover color generation for buttons using bg- modifier classes [7b55b6d](https://github.com/Spiderpig86/Cirrus/commit/7b55b6ddbba6bc316af676656612682c21974375)
- Add new utility classes for grid auto flow row and column. [f0349a1](https://github.com/Spiderpig86/Cirrus/commit/f0349a180189e61dcac0f29e9fa49e1aca8ea9e9)

### 🐛 Fixes

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

### 💥 Breaking Changes
- Rename `tree-nav--shown` to `tree-nav--visible` to follow new class conventions [37290af](https://github.com/Spiderpig86/Cirrus/commit/37290afa9f320deffaaf551abd75c5db53794ee7)
- 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](https://github.com/Spiderpig86/Cirrus/issues/198) [889f0fe](https://github.com/Spiderpig86/Cirrus/commit/889f0fec8f0ac1aa6532bbd08cfb09bbdbb93be4)
- Deprecating `.usquare` and `.usquare.delay` classes due to incompatible color styling [161bf52](https://github.com/Spiderpig86/Cirrus/commit/161bf52e8eb3bdc898f55545ec8c311c57364af4)

## 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](https://blog.stanleylim.me/). Feel free to reach out to me on [LinkedIn](https://www.linkedin.com/in/serbis/) and follow me on [Github](https://github.com/Spiderpig86).