Released Cirrus 0.6.2 🚀 - Build and Design Your Webapp Faster

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

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

  • In this example, here we start with u-flex for xs to sm. For md and above, we will use u-block.

  <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

• New overflow utility classes: 2ac8654

  • overflow-[auto/hidden/visible/scroll]
  • overflow-x-[auto/hidden/visible/scroll]
  • overflow-y-[auto/hidden/visible/scroll]

• Other refactoring: 0ef030b

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

💥 Breaking Changes

• Simplified position utility class naming: 9edfab5
  • 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
• Deprecated font-italitc, use <em></em> or <i></i> instead. 0ef030b

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.