DEV Community

Cover image for Released Cirrus 0.6.1 πŸš€ - A component and utility centric SCSS framework designed for rapid prototyping.
Stanley Lim
Stanley Lim

Posted on

Released Cirrus 0.6.1 πŸš€ - A component and utility centric SCSS framework designed for rapid prototyping.

Hey everyone!

I have never posted about this before, but I have just released a small update to Cirrus which builds on the changes made in 0.6.0.

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.

If you're interested, feel free to check out Cirrus! Documentation

Onto the Updates

πŸŽ‰ Features

  • Added rounded tag groups, added primary color to control themes, updated BEM notation for tag. #49
  • tile now inherits overflow rules. 4a4f276.
  • Using multiple column breakpoint classes will now respond accordingly. For example with the code example below, the div will span 8 columns for large screens and above but will span 4 columns for all screen sizes up to large. This is more in line with the behavior seen in most major frameworks. e6a0fd2

    <div class="col-xs-4 col-lg-8"></div>
    
  • Added BEM compliant class names for card. The old class names will still be supported but will be deprecated in a future release. #51

πŸ› Fixes

  • Removed extra space between label and input-control when the input contains an icon. #47
  • Fixed tile not overflowing correctly in smaller screens. ad43bc2.
  • Fixed inconsistent card UI when certain heights caused by overflowing text content. 8859388

πŸ’₯ Breaking Changes

  • Shifted column sizes down one step: new xs that begins at 0px, old xs -> new sm, old sm -> new md, old md -> new lg, old lg -> new xl. This is to have better consistency with the majority of viewports we see today. d2784b7

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.

Top comments (0)