Hey everyone!

Just released 0.6.3 for Cirrus. Check it out!

💎 Cirrus
📝 Documentation

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, 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 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.

🎉 Features

• Update headline font sizes to have less of a gap from h1. 7d63a17
• Update header font sizes for h1 and h2. 718d676
• Move :root declaration from theme.scss to default.scss to prevent conflicts when importing into Node project. 3def8a2
• Rewrite tags 65f4fd9 0cd2358 #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 #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
• Fix UI glitch where button shadow/forms on focus is sometimes overlapped by neighboring buttons. 5a7d18f 0979c27
• Fix btn—pilled rendering incorrectly. df408e9
• Fix bug where feature flags were not correctly used from _config.scss. 4835bf4

💥 Breaking Changes

• Deprecated inclusion of vendor prefix for flex-align. 71a7eb1
• Existing tag size classes have now been updated. 65f4fd9
  • tag—large => tag—lg
  • tag—xlarge => tag-xl

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.