slim
🚀 Cirrus 0.7.1 Released - New utility classes, Accordion, and more

🚀 Cirrus 0.7.1 Released - New utility classes, Accordion, and more

Stanley Lim's photo
Stanley Lim
·

3 min read

Table of contents

Hey everyone!

Just released 0.7.1 for Cirrus. Check it out! The focus for this update was to add new utility classes for absolutes, transitions, etc, add the new Accordion component, and more.

💎 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

  • Add configurations for specifying custom font families for primary and secondary fonts. dfaadb1
  • Removed auto-imports for Google fonts for GDPR compliance. dfaadb1
  • Add btn--disabled class to support diabled state for div and a tags. 8565138
  • Button shadows now rely on CSS variables. d9fc6ac
  • New map added to _config.scss to include fg and bg colors. faac886
  • Add new modal--visible class to replace shown class to display modal dialogs. 2c3c6d7
  • Add new flex-basis utility classes. 23925ed b070926
  • Add new blur filter utility classes with viewport variants disabled. f723636
  • Add utility classes for fixed widths based on default sizing system. 21e1b5a
  • Add new utility classes for min/max width using breakpoints. 6a2b469
  • Add accordion component. 5347b9f
  • Add border color and border opacity utility classes. ae26f16
  • Add utility classes for fixed heights based on default sizing system. 7111de8
  • Add Gzipped build option for Cirrus for Gulp. 8ad2051
  • Add utility classes for transition durations. d0814bf
  • Add utility classes for line heights. 6ac14a3
  • Add 25p, 75p and negative versions of absolute util classes. 4fc644d
  • Add absolute values for absolute util classes based on default sizing system (limited to 0-4rem). 1e83295 7dfa71f
  • Add border-width util classes. 374cc0e

🐛 Fixes

  • Fix bug with non-vertically aligned toggle component for different zoom levels. 368a6db
  • Move inline image values to constants. 6b5a999
  • generate-classes-for-viewport should reuse logic from generate-classes-for-viewport-with-map. 37c5f8e
  • Transparent border added to default style for all elements so border util classes will show up. b6e3a9f
  • leading-none should have a line height of 1 instead of 0. ee293be

💥 Breaking Changes

  • Themed button classes now respect changes in control-themes map inside _config.scss. faac886
  • Updated _config.scss to have components (e.g. avatars, tabs, etc.) as top level attributes in the config instead of having avatar-sizes for example.

Before

...
avatar-sizes: (),
breakpoints: (),
button-sizes: (),
...

After

...
avatars: (
    sizes: ()
),
breakpoints: (
    widths: (),
    breakpoint-pairs: ()
),
buttons: (
    sizes: ()
),
...
  • Remove ms vendor prefix for flexbox due to high CSS3 standard adoption. 34c838b
  • Remove prefixes for remaining styles that have > 98% unprefixed adoption according to caniuse. b1d1fb1
  • Remove all remaining CSS prefixes except -webkit-tap-highlight-color. eff211e
  • Fixed viewport classes for col where it was shifted 1 level wider than expected in 0.7.0 628a815

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

cirrusCSSWeb DevelopmentOpen SourceFrontend Development