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

3 1

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay