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 fordiv
anda
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 replaceshown
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 fromgenerate-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 havingavatar-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
Top comments (0)