Skip to content

Gamma 4
Compare
Choose a tag to compare
@Spiderpig86 Spiderpig86 released this 04 Jun 05:15
· 430 commits to master since this release
0.6.2
869d03b

Cirrus 0.6.2 is a minor update that officially introduces viewport variants for utility classes. The viewport behavior is now consistent across all supported utility classes. For example, we can make a div have display: block only for md or higher just by adding the u-block-md class. The main concept here is that we design for the smallest screen width and only apply the modifications for larger widths (more on this later).

🎉 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
Assets 2
Loading