Cirrus 0.6.3 Launched 🚀, Cirrus Blocks Coming Soon?
Tags: css, webdev, beginners, showdev
Published: 2021-10-11 16:54:17

Hey everyone!

Just released 0.6.3 for Cirrus. Check it out!

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

## Cirrus Blocks

Building web apps fast can be hard from the start. I know from personal experience, there are many things to consider in addition to what your app will do. For example, web apps are stitched together using **components** like *modals* and *forms*.

And if you do decide to implement your own components, now you have to worry about mobile responsiveness, keyboard accessibility, and other things that distract you from our **idea**.

This is why I am working [Cirrus Blocks](https://github.com/Cirrus-UI/Cirrus-Blocks), a brand new way to quickly prototype your website with pre-built components using Cirrus. It is a collection of **copy** and **pastable** components all free of charge built with Cirrus CSS. That way you can focus on YOUR IDEA.

Cirrus Blocks is also **open to submissions**. So if you have an awesome component to share with the community, feel free to open an issue in the Github page.

## Onto the Updates

Cirrus 0.6.3 mainly focuses on making existing classes more consistent, fixing existing UI bugs, and introducing some new bigger changes like Tags and viewport support for margin/padding.

In the meantime, I have been working quite hard on [Cirrus Blocks](https://github.com/Cirrus-UI/Cirrus-Blocks) which gives developers a faster way to prototype with Cirrus with a large collection of new components built using Cirrus. You can check out the repository [here](https://github.com/Cirrus-UI/Cirrus-Blocks).

### 🎉 Features

- Update `headline` font sizes to have less of a gap from `h1`.  [7d63a17](https://github.com/Spiderpig86/Cirrus/commit/7d63a17aa8edc4e714fa912a8bc88019c7748463)
- Update header font sizes for `h1` and `h2`.  [718d676](https://github.com/Spiderpig86/Cirrus/commit/718d6761d4c26b3efd180776c8dc5badd0418c11)
- Move `:root` declaration from `theme.scss` to `default.scss` to prevent conflicts when importing into Node project. [3def8a2](https://github.com/Spiderpig86/Cirrus/commit/3def8a2363e13749132b2413a20cec8cdb2f7028)
- Rewrite tags [65f4fd9](https://github.com/Spiderpig86/Cirrus/commit/65f4fd9a84752710afb3d94dd0f380406c319a50) [0cd2358](https://github.com/Spiderpig86/Cirrus/commit/0cd23584f2861c76bb0af4d19094d750beb8543f) [#69](https://github.com/Spiderpig86/Cirrus/issues/69)
  - Deprecated old sizing classes like `xsmall`, `small`, etc. to be replaced by common sizing conventions like `sm`. See breaking changes for more details.
  - Add new tag sizes `xs`, `sm`, and `md`.
  - Fix tag padding.
- Add support for viewports for margin and padding classes. [1a6f8aa](https://github.com/Spiderpig86/Cirrus/commit/1a6f8aa0e67ae3f8fa1039fda77ec8148fd1c17b) [#68](https://github.com/Spiderpig86/Cirrus/issues/68)
  - This means classes like `p-3-md` or `m-1-lg` is now supported for all viewports `xs`, `sm`, `md`, `lg`, and `xl`.

### 🐛 Fixes

- Margin between buttons in `btn-group` is now `-1px` instead of `-.1rem`. [8ec79f7](https://github.com/Spiderpig86/Cirrus/commit/8ec79f7811ece2a22165a6032df8148697d31397)
- Fix UI glitch where button shadow/forms on focus is sometimes overlapped by neighboring buttons. [5a7d18f](https://github.com/Spiderpig86/Cirrus/commit/5a7d18fd7198db64fb59ac6b58f6217924a1c81e) [0979c27](https://github.com/Spiderpig86/Cirrus/commit/0979c27114db3347f7bafd6a0e14cdf8186a6bf9)
- Fix `btn—pilled` rendering incorrectly. [df408e9](https://github.com/Spiderpig86/Cirrus/commit/df408e9427283534d0d4ccc4022f206188a8b7b1)
- Fix bug where feature flags were not correctly used from `_config.scss`. [4835bf4](https://github.com/Spiderpig86/Cirrus/commit/4835bf409c459db87d7bfff6da9a2168cca40014)

### 💥 Breaking Changes

- Deprecated inclusion of vendor prefix for `flex-align`. [71a7eb1](https://github.com/Spiderpig86/Cirrus/commit/71a7eb1fee28105be4aa23a9eaa10a1b71272af6)
- Existing tag size classes have now been updated.  [65f4fd9](https://github.com/Spiderpig86/Cirrus/commit/65f4fd9a84752710afb3d94dd0f380406c319a50) 
  - `tag—large` => `tag—lg`
  - `tag—xlarge` => `tag-xl`

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