🚀 Cirrus 0.7.1 Released - New utility classes, Accordion, and more
Tags: css, webdev, beginners, showdev
Published: 2022-10-31 19:39:43

Hey everyone!

Just released 0.7.1 for Cirrus. Check it out! The focus for this update was to add new utility classes for absolutes, transitions, etc, add the new Accordion component, and more.

💎 [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

- Add configurations for specifying custom font families for primary and secondary fonts. [dfaadb1](https://github.com/Spiderpig86/Cirrus/commit/dfaadb19914e92612f0f775ec13d4efc6c7ac7dc)
- Removed auto-imports for Google fonts for GDPR compliance. [dfaadb1](https://github.com/Spiderpig86/Cirrus/commit/dfaadb19914e92612f0f775ec13d4efc6c7ac7dc)
- Add `btn--disabled` class to support diabled state for `div` and `a` tags. [8565138](https://github.com/Spiderpig86/Cirrus/commit/85651388cfe90219a8d51c4cef94f47c1ac68eba)
- Button shadows now rely on CSS variables. [d9fc6ac](https://github.com/Spiderpig86/Cirrus/commit/d9fc6ac98c892b711ddd070b4a8db50887973e0e)
- New map added to `_config.scss` to include fg and bg colors. [faac886](https://github.com/Spiderpig86/Cirrus/commit/faac886ecb62c2bcbdb7e937b8a7c9430925a558)
- Add new `modal--visible` class to replace `shown` class to display modal dialogs. [2c3c6d7](https://github.com/Spiderpig86/Cirrus/commit/2c3c6d7ab93a6c18c40dbc4ca140ed1d66c55b9c)
- Add new `flex-basis` utility classes. [23925ed](https://github.com/Spiderpig86/Cirrus/commit/23925ed3c62795bbff22f4c692b6f1ae86c2846d) [b070926](https://github.com/Spiderpig86/Cirrus/commit/b070926d3d8e73f0f94fb80b3d35da2463d7d16a)
- Add new blur filter utility classes with viewport variants disabled. [f723636](https://github.com/Spiderpig86/Cirrus/commit/f723636792ab2978e66570c11f1ca62fff78e2cf)
- Add utility classes for fixed widths based on default sizing system. [21e1b5a](https://github.com/Spiderpig86/Cirrus/commit/21e1b5a69f03a96888931c252b5be950c4007571)
- Add new utility classes for min/max width using breakpoints. [6a2b469](https://github.com/Spiderpig86/Cirrus/commit/6a2b469c97c4068c8d5dddd66e095d498fcd836e)
- Add `accordion` component. [5347b9f](https://github.com/Spiderpig86/Cirrus/commit/5347b9f61b7ba1671c2a63f2566b6c9f8a443b83)
- Add border color and border opacity utility classes. [ae26f16](https://github.com/Spiderpig86/Cirrus/commit/ae26f16cbb0a022f9c00c659ea56c233426f7755)
- Add utility classes for fixed heights based on default sizing system. [7111de8](https://github.com/Spiderpig86/Cirrus/commit/7111de8a52f054c1d6dd00823c15739aca0b34bd)
- Add Gzipped build option for Cirrus for Gulp. [8ad2051](https://github.com/Spiderpig86/Cirrus/commit/8ad20517dfa10161ef36ee10ee0a0626b878510d)
- Add utility classes for transition durations. [d0814bf](https://github.com/Spiderpig86/Cirrus/commit/d0814bf5fe8670d3d597711feb040a753e9c2873)
- Add utility classes for line heights. [6ac14a3](https://github.com/Spiderpig86/Cirrus/commit/6ac14a31548425ec7f3b3fc49ecef68a70cebc71)
- Add `25p`, `75p` and negative versions of absolute util classes. [4fc644d](https://github.com/Spiderpig86/Cirrus/commit/4fc644dd7f7d6bb6cd94c389b39ee231b14ab760) 
- Add absolute values for absolute util classes based on default sizing system (limited to 0-4rem). [1e83295](https://github.com/Spiderpig86/Cirrus/commit/1e83295b2fefcfbae0e8a53334c5614b10c05cd9) [7dfa71f](https://github.com/Spiderpig86/Cirrus/commit/7dfa71f2809367a3cfb4f19de3f5bd2af0126b95)
- Add `border-width` util classes. [374cc0e](https://github.com/Spiderpig86/Cirrus/commit/374cc0ec05e757d189cd67298cb91db8eff8ff53)

### 🐛 Fixes

- Fix bug with non-vertically aligned toggle component for different zoom levels. [368a6db](https://github.com/Spiderpig86/Cirrus/commit/368a6dbbc6a38043843f1031a63125bbc865fa58)
- Move inline image values to constants. [6b5a999](https://github.com/Spiderpig86/Cirrus/commit/6b5a99961f986abcbbe52e2e4825cd4089fe8970)
- `generate-classes-for-viewport` should reuse logic from `generate-classes-for-viewport-with-map`. [37c5f8e](https://github.com/Spiderpig86/Cirrus/commit/37c5f8e09bd80e6f48315d8fc7aa365507faa438)
- Transparent border added to default style for all elements so border util classes will show up. [b6e3a9f](https://github.com/Spiderpig86/Cirrus/commit/b6e3a9fc359b00528b3bcb008068ea8346225ead)
- `leading-none` should have a line height of 1 instead of 0. [ee293be](https://github.com/Spiderpig86/Cirrus/commit/ee293bea11df97cf2c02e0541748bb2dcba2ee25)

### 💥 Breaking Changes

- Themed button classes now respect changes in `control-themes` map inside `_config.scss`. [faac886](https://github.com/Spiderpig86/Cirrus/commit/faac886ecb62c2bcbdb7e937b8a7c9430925a558)
- Updated `_config.scss` to have components (e.g. avatars, tabs, etc.) as top level attributes in the config instead of having `avatar-sizes` for example.

*Before*
```scss
...
avatar-sizes: (),
breakpoints: (),
button-sizes: (),
...
```

*After*

```scss
...
avatars: (
    sizes: ()
),
breakpoints: (
    widths: (),
    breakpoint-pairs: ()
),
buttons: (
    sizes: ()
),
...
```

- Remove `ms` vendor prefix for flexbox due to high CSS3 standard adoption. [34c838b](https://github.com/Spiderpig86/Cirrus/commit/34c838b9ab87302947cd38b2a9869f361bce786e)
- Remove prefixes for remaining styles that have > 98% unprefixed adoption according to caniuse. [b1d1fb1](https://github.com/Spiderpig86/Cirrus/commit/b1d1fb140ad875f6acb1dc09578ac132cff0b4fc)
- Remove all remaining CSS prefixes except `-webkit-tap-highlight-color`. [eff211e](https://github.com/Spiderpig86/Cirrus/commit/eff211e6b008f0cb3289d51eb338913e0ffaa8a3)
- **Fixed viewport classes for `col` where it was shifted 1 level wider than expected in 0.7.0** [628a815](https://github.com/Spiderpig86/Cirrus/commit/628a815832e195b048bd71da250e225853a1ef85)

## Thanks for reading!
:gem: 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