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

#css #webdev #beginners #showdev

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