Delta I

🎉 Features

• Major rewrite of class generation system.
• New utility mixins to replace old ones:
  • generator.utility -> generator_v2.utility
  • generator.utility-with-body -> generator_v2.utility-with-body
• Class generator now supports class grouping via group:[pseudo] and group-[pseudo] CSS classes. These allow developers to use events on a parent element to affect the styles of child elements.

@include generator_v2.utility(
    $base-class-name: 'text',
    $class-value-pairs: (
        'blue': (
            'color': blue,
        ),
    ),
    $variants: (
        'group-hover'
    ),
    $generate-viewports: true,
    $override: '!important'
);

.group:hover .group-hover\:u-text-blue {
    color: blue !important;
}

...

<div class="group">
    <p>test</p>
    <div class="group-hover:u-text-blue">
        <p>this is blue on hover</p>
        <p>this is also blue on hover</p>
    </div>
</div>

• Class generator now supports many more variants (pseudos):
  • 'responsive',
  • 'dark', 'light',
  • 'reduce-motion',
  • 'first-of-type',
  • 'last-of-type',
  • 'portrait', 'landscape',
  • 'hover', 'group-hover',
  • 'focus', 'group-focus', 'focus-visible', 'focus-within',
  • 'active',
  • 'visited',
  • 'checked',
  • 'disabled'

@include generator_v2.utility(
    $base-class-name: 'text',
    $class-value-pairs: (
        'blue': (
            'color': blue,
        ),
    ),
    $variants: (
        'dark',
        'hover',
        'reduce-motion',
        'group-hover',
        'group-focus',
    ),
    $generate-viewports: true,
    $override: '!important'
);

.u-text-blue {
    color: blue !important;
}

.hover\:u-text-blue:hover {
    color: blue !important;
}

.group:hover .group-hover\:u-text-blue {
    color: blue !important;
}

.group:focus .group-focus\:u-text-blue {
    color: blue !important;
}

@media screen and (min-width: 640px) {
    .sm\:u-text-blue {
        color: blue !important;
    }

    .sm\:hover\:u-text-blue:hover {
        color: blue !important;
    }

...

• Update grid class utilities to support generation with viewports and modifiers b3be15f
• Enable hover pseudo selector for v2 colors 839cd47
• Add custom button behaviors for v1 color classes (only apply on button selectors and add hover behavior) d4a6b6a
• Add cursor util classes 32e0897
• Add tooltip--visible class to show tooltips outside of :hover and :focus 9b77f78
• Add new pseudo-variants config with integration to existing class generation 459dbba

@use "cirrus-ext" with (
    $config: (
        pseudo-variants: (
            CLEARFIX: ('responsive', 'hover', ...),
            FLEX: ('responsive'),
            ...
        ),
    ),
);

🐛 Fixes

• Remove unnecessary forward for cirrus-all build 3dfa6e6
• Migrate to ESM for Gulp, update Gulp deps, update CI to use Node 20 3697dee
• Fix left padding for form-ext inputs 6453943
• Remove inconsistent padding for table header and footer th 3842fce
• Fix incorrect class name and property for italic font util class 6591ca1
• Remove extra letter spacing from all text elements 6cb8f76
• Add missing viewport config entries ea038be
• Add missing grid-row styles grid-rows-, grid-r-, grid-rs-, and grid-re- 1295016
• Fix grid row column style c95fe41
• Link font weight and color adjustments no longer apply on nested input elements a6b5e25
• Remove background color from avatar when there is a child image element 7d4ea82
• Fix text color with a tag and .btn class c1c7fa5
• Remove button shadow on focus for .btn--disabled 867eeff
• Fix broken tab styles, remove remaining hardcoded colors #330 bfa64c6

💥 Breaking Changes

• New viewport syntax across all classes that support different viewports, unifying the fractured viewport system.
  • The main difference from before is now all viewport modifiers will use the same syntax instead of inconsistent system from before. All classes that are meant to apply at a certain viewport size and above will be in the form of [sm|md|lg|xl]:classname. This will be the case for all classes whether it is for columns or utility classes.
  • Below are the main syntax changes:
    • col-sm-1 -> sm:col-1 - column classes will all have the viewport modifier prefixed at the front.
    • col-6 -> md:col-6 - all column classes that did not have the modifier class must be prefixed with md: to get the same behavior as before. This is to address the confusing implicit behavior where a class like col-6 would have 50% width for md and above but 100% width for viewports below md.
    • u-block-md -> md:u-block - for all utility classes, the viewport modifier will be prefixed at the front.
• Deprecated margin:1 rem 0; style for p, article, blockquote since it leads to unexpected behaviors for users 9bcda3a
• Deprecating row.no-space classes 8e802f9
• Update Modal class names for clarity 9da499f
• Deprecated .modal.small 9da499f
• Deprecating placeholder.scss 39e663b
• Deprecated .title and .subtitle classes b07c76d
• Deprecated viewports config in favor of using 'responsive' entry in pseudo-variant config 1f33d83

Gamma 8 Patch 1

Patch to fix issue when importing Cirrus in a project.

🐛 Fixes

• Fix incorrect paths that break imports in utils folder 379a3d0

Gamma 8

Lots of fixes in this one. Big thanks to all the issues submitted by users over the year!

🎉 Features

• Link pseudo elements will now use currentColor instead of fixed link color bd9ab44
• Buttons now completely support color modifier classes (background, text, and border). 5962ca4
• Add px (1px) to default sizing system. 14970c4
• Add 48 and 64 to default sizing system to close the gap with xs viewport. 31f80f0
• Border color util classes will now set button shadow color, taking precedence over bg color classes. 46fcc01
• Add new normal-case utility class. 81d36aa
• Add vertical-align util classes. ee67b56
• Update utility mixin to handle prefers dark/light and reduced motion variants. 4907381
• Add common class name field to utility api, add new function to convert old class map to new class mapping for utility mixin. 3b6d753
• Reorder style generation to minimize minified size with gulp-clean-css. b5dd955
• Add new gap classes for row or column only 5c317e0
• Add new font style classes #192 83463e1
• Move language label for code component to styling for 'pre' #206 2248631
• Add new helper class to toggle tree-nav visibility 623a19d
• Integrate native hover color generation for buttons using bg- modifier classes 7b55b6d
• Add new utility classes for grid auto flow row and column. f0349a1

🐛 Fixes

• Remove margins from label HTML element. 010146f
• Remove margins for btn-close. 4bfb7c0
• Last border of accordion item should be invisible. a95694b
• Add missing button variables to v1 color classes. 8e01988
• Reset cursor of nav-item children. c706fce
• Inline condition for generating classes to avoid conflicting variable names. 50dc1b5
• Fix incorrect viewport being used to apply fill-height styles #163. 7ef825b
• Add left text alignment for list in dropdown menu. 6997266
• Fix horizontal centering for default spinner. 50af674
• All semantic color references to _theme.scss will now use _config.scss for customization #174 d3e0f9a
• Remove duplicate generation of blur util classes c60a237
• Fix grid row support, grid rows will now have a max of 6 74cdab9
• Remove extra padding on anchor tags 9bd4aec
• Move pointer cursor to tag__close-btn specifically instead of colored tags #193 0a6c23f
• Hide overflow for frame component #195 7fd9209
• Restrict transition animation to only box shadow #194 4731e12](4731e12)
• Fix specifier for tree-nav class for small viewports 875a5ce
• Fix issue where range slider does not slide from start to end #217 77582e7
• Fix accordion rendering on Safari #216 ab69a6c
• Set pointer as default cursor for pagination-item a tag #211 d9ea857
• Vertical center spinner fix (#242) 856461d
• Fix bug where list dropdown menu flashes briefly during page load #207 2cbc17a
• Use default browser focus styling for elements that don't have custom styling b164485
• Remove unused focus styling 68eb3a2
• Fix incorrect property used for column gap 81336a8
• Fix bug where webkit default focus styles were applied instead of input, textarea, and select focus styles, refactor forms code cff0e97
• Fix incorrect selector used in commit a95694b 7090712
• Form border styling should respect --border-opacity var if present 95bb80b
• Fix horizontal alignment of loading spinner f093e8f

💥 Breaking Changes

• Rename tree-nav--shown to tree-nav--visible to follow new class conventions 37290af
• Deprecate .menu-item.right, revert to applying list stylings to child link to support nested lists, expand list stylings to child divs and spans first children only #198 889f0fe
• Deprecating .usquare and .usquare.delay classes due to incompatible color styling 161bf52

Gamma 7

🎉 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

Gamma 6 Patch 1

• Fixes issue where importing Cirrus using new @use import would fail due to incorrect import paths for external projects.
• Updated Gulp and unit tests to resolve import paths that reference node_modules.
• Purged unused dependencies and updated remaining dependencies.

Example next.js project attached,

globals.scss

@use "cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        excludes: (
            ABSOLUTES,
        ),
        opacity: null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity: (
                25: .25,
                50: .5,
                75: .75,
            )
        )
    ),
);

html,
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
}

a {
    color: fill('gray', '400');
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>


      <main className={styles.main}>
      <p className="u-opacity-25">Testing</p>
      <p className="u-opacity-75">Testing</p>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

Gamma 6

Like Cirrus 0.6.0, 0.7.0 was another large undertaking that brought a large refactor of the entire codebase to prioritize configurability and enhance overall developer experience. This rewrite represents the first step in how Cirrus is repositioning as a component-and-utility-centric SCSS framework.

With this, there will be some breaking changes when upgrading to 0.7.0, but this release note entry should make the changes painless to do.

There are a ton of things that were added in this new update, but below are a few big ones I want to highlight.

A new way to use Cirrus

With previous versions, the only ways to use Cirrus was to either linking the CDN link at the top of your page or importing cirrus-ui into your Node project.

This is fine, but it lacked any sort of customization. The only way to change Cirrus was to clone the project and build your own version locally. Dart Sass has given me immense opportunity to improve Cirrus's usability and fix technical debt and hacks. One of the things it also enabled was directly importing Cirrus into your Sass/Scss project directly.

Not only can you import different pre-configured versions of Cirrus, but also take advantage of all the functions, mixins, constants, etc. that Cirrus comes built with.

// main.scss
@use "node_modules/cirrus-ui/cirrus-core" as *; // Core build OR
@use "node_modules/cirrus-ui/src/cirrus-ext" as *; // Extended build

@screen-above($md) {
    .my-class {
        background-color: rgba(#{hex-to-rgb(fill('blue', '600'))}, .25);
    }
}

No more having to build Cirrus separately and then copying and pasting the generated styles to your project. Read more on this here.

Focus on configurability

One of the things this rewrite aimed to accomplish was configurability. In the past, CSS frameworks were just things we plop into our project and we either accepted styles it gave us or we spent countless hours overriding them to fit our needs. Why should we continue to subject ourselves to that amount of torture?

0.7.0 marks a big step in dynamic class generation. Whether you are building Cirrus locally or you're importing Cirrus directly into your Sass files, you can take advantage of defining a configuration object in both scenarios when you import the framework. Use the configuration object to specify viewports for classes, extend existing component and utility styles, toggle features, and more.

@use "node_modules/cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        excludes: (
            ABSOLUTES,
        ),
        opacity: null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity: (
                25: .25,
                50: .5,
                75: .75,
            )
        )
    ),
);

Currently most utility classes and components can be customized through here in this release, but I hope to extend this capability a lot more in future updates. Read more on this here.

Revamped colors

Default colors have been tuned a bit for increased vibrancy and range. Of course, these colors can be customized via the configuration object as well.

Utils, utils, and more utils

Utility classes within Cirrus have grown to be quite popular. This update adds utility classes for:

• Letter Spacing
• Flex
  • Wrap
  • Grow/Shrink
• Color Opacity
• Flex/Grid Gap
• Font Size
• Box Shadow
• Border Radius
• Min/Max Height/Width
• Font Weights
• Opacity
• Z-Index

A lot of classes have also seen the introduction of viewport variants. Those can be found in the class specific documentation in the docs page.

Components

This update wasn't as focused on introducing new components, but it was not forgotten. Some of the new components styles are:

• Breadcrumbs
• Progress
• New Animations

Check out the new docs to see all the new features in 0.7.0!

🎉 Features

• Avatars now use currentColor for text. 5ff9035
• Card footer font size increased to font-size-s. 57a2c89
• New xl viewport added to Cirrus. 61e3f03
• New utility classes for opacity.
• New framework colors for black and white. 2334c1a
• Migrate from LibSass to DartSass. fc54c2d
• Add z-index utility classes. a596b6a
• Add absolute positioning utility classes. fb4379a
• New unit testing and CI setup (series of commits).
• Add font size utility classes. d5b8088
• Add flex/grid gap utility classes 98ea940
• Add box shadow utility classes. f7c4862
• Add flex grow/shrink utility classes. 00d2d61
• Add min/max height/width utility classes. 1639ea4
• Add border radius utility classes. b7b3892
• Enable viewport class generation for grid. decb897
• Allow element focus color to be overidden. 1c0b7db
• Add breadcrumb component. 9328a6c
• Add progress component. df19e16
• Add new pulse and ping animations. 5f13215
• Add flags to conditionally generate utility classes. a455e2a
• Add flags to conditionallity generate component styles. 2dbc78d
• Add table-container class to handle overflowing tables with many columns. f0249ed
• Add utility classes for background color opacity. 60c1a33
• Add utility classes for text color opacity. 1176332
• Refactor color usage of buttons to use background and text opacity configs. de0beca
• Tune v2 colors for better vibrancy. 62b2a34
• Add bg-transparent and text-transparent classes. c0fcb18
• Add flex-wrap utility classes. 7875c39
• Add letter-spacing utility classes. 4d6f8a8
• Add font-primary and font-secondary (aka font-alt) classes. 5e67315
• Update CSS reset for Cirrus. 27c905a
• Darken default text color. cea9b3c

🐛 Fixes

• Fixed rendering issues where links with classes u and utb rendered with inconsistent heights. 9a60273
• Remove extra margin and padding from textarea. 65caa20
• Fix bug where smaller viewport classes will override classes with larger viewports for columns. 8e48957
• Change height for fullscreen to min-height: 100vh. 4b6c075
• Fix bug where margin auto classes were not correctly behaving based on viewport. 4616553
• Remove link color override in footer. bbe6d75
• Fix bug where hamburger menu animations where not working. 203ab37
• Fix issue where toggle glyph was not hidden behind the toggle knob. [fa7c1bb](fa7c1bb...

Gamma 5

Cirrus 0.6.3 mainly focuses on making existing classes more consistent, fixing existing UI bugs, and introducing some new bigger changes like Tags and viewport support for margin/padding.

In the mean time, I have been working quite hard on Cirrus Blocks which gives developers a faster way to prototype with Cirrus with a large collection of new components built using Cirrus. You can check out the repository here.

🎉 Features

• Update headline font sizes to have less of a gap from h1. 7d63a17
• Update header font sizes for h1 and h2. 718d676
• Move :root declaration from theme.scss to default.scss to prevent conflicts when importing into Node project. 3def8a2
• Rewrite tags 65f4fd9 0cd2358 #69
  • Deprecated old sizing classes like xsmall, small, etc. to be replaced by common sizing conventions like sm. See breaking changes for more details.
  • Add new tag sizes xs, sm, and md.
  • Fix tag padding.
• Add support for viewports for margin and padding classes. 1a6f8aa #68
  • This means classes like p-3-md or m-1-lg is now supported for all viewports xs, sm, md, lg, and xl.

🐛 Fixes

• Margin between buttons in btn-group is now -1px instead of -.1rem. 8ec79f7
• Fix UI glitch where button shadow/forms on focus is sometimes overlapped by neighboring buttons. 5a7d18f 0979c27
• Fix btn—pilled rendering incorrectly. df408e9
• Fix bug where feature flags were not correctly used from _config.scss. 4835bf4

💥 Breaking Changes

• Deprecated inclusion of vendor prefix for flex-align. 71a7eb1
• Existing tag size classes have now been updated. 65f4fd9
  • tag—large => tag—lg
  • tag—xlarge => tag-xl

Gamma 4 Patch 1

🩹 0.6.2-Patch-1

• Minor patch that fixes:
  • Incorrect version displayed in CDN 8e9bbf4
  • Util class values incorrectly surrounded by quotes for cirrus.css and cirrus-core.css. Note that using these files are not recommended as these are much larger in size and not tested against. Please use the minified version of the files. bbc1549

Gamma 4

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

Gamma 3

Cirrus 0.6.1 is a minor update that addresses a few issues that were found in 0.6.0. It also corrects the column behaviors for xs, sm, etc. viewports to be more aligned with what is expected.

🎉 Features

• Added rounded tag groups, added primary color to control themes, updated BEM notation for tag. #49

• tile now inherits overflow rules. 4a4f276.

• Using multiple column breakpoint classes will now respond accordingly. For example with the code example below, the div will span 8 columns for large screens and above but will span 4 columns for all screen sizes up to large. This is more in line with the behavior seen in most major frameworks. e6a0fd2

  <div class="col-xs-4 col-lg-8"></div>

• Added BEM compliant class names for card. The old class names will still be supported but will be deprecated in a future release. #51

🐛 Fixes

• Removed extra space between label and input-control when the input contains an icon. #47
• Fixed tile not overflowing correctly in smaller screens. ad43bc2.
• Fixed inconsistent card UI when certain heights caused by overflowing text content. 8859388

💥 Breaking Changes

• Shifted column sizes down one step: new xs that begins at 0px, old xs -> new sm, old sm -> new md, old md -> new lg, old lg -> new xl. This is to have better consistency with the majority of viewports we see today. d2784b7