Released Cirrus 0.6.2 🚀 - Build and Design Your Webapp Faster
Tags: css, webdev, beginners, showdev
Published: 2021-06-04 16:25:23

Hey everyone!

Just released 0.6.2 for Cirrus. Check it out! The focus for this update was to make how classes behave across different viewports more consistent in addition to adding more utility classes.

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

## 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

- This update officially adds support for viewport classes for the following utilities:
  - Clearfix
  - Display
  - Flexbox
  - Position
- Streamline generation of viewport classes for different utilities. These utility classes follow a mobile-first design approach, meaning that something like `u-flex` will allow for all viewports. To change the behavior for `sm`, `md`, `lg`, or `xl`, we would need to apply additional modifier classes (see example below). [c0e9980](https://github.com/Spiderpig86/Cirrus/commit/c0e99800734c3486d7893d8ee6170bbed3e22a08)
  - In this example, here we start with `u-flex` for `xs` to `sm`. For `md` and above, we will use `u-block`.

    ```html
    <div class="u-flex u-block-md">
        <!-- -->
    </div>
    ```

- Classes that apply on buttons such as default button styling, styling buttons in headers, etc. all now use a common selector. [1b6b997](https://github.com/Spiderpig86/Cirrus/commit/1b6b997e239955d792cc0605c61d4a71ef58c0a5)
- New overflow utility classes: [2ac8654](https://github.com/Spiderpig86/Cirrus/commit/2ac8654a80443d7f09af8d18ce615e56b0ec1440)
  - overflow-[auto/hidden/visible/scroll]
  - overflow-x-[auto/hidden/visible/scroll]
  - overflow-y-[auto/hidden/visible/scroll]
- Other refactoring: [0ef030b](https://github.com/Spiderpig86/Cirrus/commit/0ef030b4893c40ff57183e0cecc306aeced4ddb0)
  - Refactored code to extract more hard coded values to variables.
  - Removed usage of prefixed \*-transition properties, not needed according to http://shouldiprefix.com
  - Removed remaining @media declaration in favor of screen-above, screen-below, and screen-between utilities
  - Deprecated `font-italic`
  - Added more group selectors

### 🐛 Fixes

- Removed excess padding on selects which broke the display in form groups. 
[639f52f](https://github.com/Spiderpig86/Cirrus/commit/639f52f2d817247f3dd36759ccd455e2cf0f6e6e) [#59](https://github.com/Spiderpig86/Cirrus/issues/59)

### 💥 Breaking Changes

- Simplified position utility class naming: [9edfab5](https://github.com/Spiderpig86/Cirrus/commit/9edfab5b6c131e18e519e639c8dfbb29dc10707e)
  - `u-position-static` => `u-static`
  - `u-position-fixed` => `u-fixed`
  - `u-position-absolute` => `u-absolute`
  - `u-position-relative` => `u-relative`
  - `u-position-sticky` => `u-sticky`
- Renamed `u-hide-overflow` to `u-overflow-hidden` to be consistent with utility class naming conventions. [5774e4b](https://github.com/Spiderpig86/Cirrus/commit/5774e4bc55f83e13086744b29c4059a582c06621)
- Deprecated `font-italitc`, use `<em></em>` or `<i></i>` instead. [0ef030b](https://github.com/Spiderpig86/Cirrus/commit/0ef030b4893c40ff57183e0cecc306aeced4ddb0)

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