30 Oct 07:57

Spiderpig86

cc8c2cb

Gamma 7 Latest

Latest

🎉 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

Assets 2

0 Join discussion

01 Apr 05:48

Spiderpig86

0.7.0-patch.1

146eb48

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>
  )
}

Assets 3

0 Join discussion

22 Mar 03:31

Spiderpig86

v0.7.0

256d966

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...

Assets 2

0 Join discussion

09 Oct 19:24

Spiderpig86

0.6.3

222072d

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

Assets 2

0 Join discussion

01 Jul 06:12

Spiderpig86

0.6.2-patch-1

2a45b8f

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

Assets 2

04 Jun 05:15

Spiderpig86

0.6.2

869d03b

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

Assets 2

17 Jan 05:14

Spiderpig86

0.6.1

65f2212

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

Assets 3

02 Nov 01:29

Spiderpig86

v0.6.0

b717c7d

Gamma 2

Cirrus 0.6.0 is a massive step forward towards our official release of version 1.0.0. This update is comprised of an SCSS rewrite, a documentation overhaul, and the addition of many helper classes in the utils file. I've worked very hard on this update and I really hope you all enjoy it! Check out the new documentation here.

🎉 Features

Complete rewrite of framework to use Scss.
Overhauled documentation for better developer experience.
Utility classes updates:
- A lot of new utility classes were added and can be seen in the Utilities section of the documentation.
- Added some text utility classes like u-text-justify for text modification. e20f6a6
- Added utils for positioning elements. 089cd34
Added margin/padding utility classes in spacing.scss. 79ab814
Updated text element margins, increased spacing between title and subtitle. 4072d50
Added our v2 color palette. 7ff010d
More utility classes added for element display. edfaf7e
Links will now have display: static (which is the browser default). 089cd34
Padding/margin classes will now have !important 089cd34
btn-circle now dynamically scales with content. ccefd9f
Improved styles for fieldset. 5678de0
Added column classes with breakpoints, such as col-xs-*, col-sm-*, and col-lg-*. 7d3381f
Face lifted code component.

🐛 Fixes

More consistent theming for :focus selector on input. c53c8de
Added accessibility styles for form-ext-* classes with outline. c53c8de
Fixed issue for button group rounding being inconsistent at certain widths. 43e8499
Made font sizes more normalized around 1rem instead of being more varying in sizes across framework. 54a8618
Fixed issue with header dropdown having incorrect positioning. fcf11e8
Removed side padding for row. fcf11e8
More predictable behavior with button being inline-flex. fcf11e8
Better padding sizes for buttons. 9eb17f7
Fixed incorrect padding for glyphs in forms. 9fa0c1c
Better tag sizing. 2c823af
Mobile devices can now select CSS only dropdown menu. 54f17c3
- For dropdown menus where the toggle button contains the .toggle-hover class, menus will now show correctly on mobile devices without JS. aaa52e4
- Behavior of dropdown menus without the toggle-hover class will remain the same and require JS. aaa52e4
Fixed form-groups for buttons. ee175d0
Many other minor class fixes.

💥 Breaking Changes

Class changes:
- italics -> font-italics. e20f6a6
- u-this-overlay -> u-overlay.
- .space.x-large -> .space.xlarge 9fa0c1c
Deprecations:
- u-box e20f6a6
- u-fill-width, use w-100 instead. e20f6a6
- level-left and level-right 155dea3
- u-no-padding, use p-0 instead.
- u-no-margin, use m-0 instead.
The former <space> element is now the space class to by compliant with HTML standards. 0b12d85
Footer has now been revamped with these changes:
- Footer title changed from h6 to .footer__title
- .footer-list-title changed to .footer__list-title
- .list-item changed to .footer__list-item
- .footer-fixed changed to .footer--fixed
All classes for form-section are deprecated. Use spacing utility classes instead.

Assets 2

26 Aug 21:50

Spiderpig86

0.5.5

9cbb053

Gamma 1

This update consists of more styles and a complete rewrite of some of the classes with modularity in mind. The migration from 0.5.4 to 0.5.5 may take some time since it consists of a lot of class renaming and deprecation of different styles.

Features

Standardized grid points according to the docs to be more consistent across different layouts.
Modularized and added more button styles. Can be seen in here.
Added styled checkboxes, radiobuttons, and toggles over here.
Added new headline component for larger text displays.
Added new classes for different forecolor. Additional Classes.
Added pill styled controls. Pill Forms.
Added bordered pagination.
Added tags.
Updated btn-link style.
Separated bulds into core and ext builds, where core only comes with the essential styles.
Cleaner styling with lower use of !important styles.
Added CSS variables for theme.
Added CSS Grid.
Cleaned up more classes to follow BEM notation.
Fixed up button borders for btn-group.
Updated design for divider now with new vertical divider styles.
Fixed up modal dialogs for modal views.
Glyphs inside input now has automatically scaling font sizes.
row now applies display: flex as intended from before.
#18 Did not adapt for stricter linting, but took away other class name changes.
Updated SVGs within framework to fix this issue.
Updated card-footer margins and different colors.
Updated documentation.
Set padding-start to 0 for ul inside tab-container.
Added classes for button focus states.
Normalized framework styles for classless components (better default styles).
Updated toast styles.
Other misc. updates that involved color changes, sizing changes, etc.

Deprecated

Deprecated .fluid-container and .fluid-container .row.
Removed .row.wrap, .row will automatically wrap content.
Removed .divider-short.

Breaking

Removed line-height-auto from all text elements b3587c6.
Removed .text-success and .text-error and combined it with input-success and input-error respectively c56d9f1.
Removed divider-short 412a786.
Removed content-no-padding and content-fluid fd0b58a.
Changed .light to .font-alt for changing font weights f84b264.
Removed font weight modifiers f84b264.
Removed height for tags f84b264.
Removed older button styles from version 0.5.4 330e1c3.
Removed btn-xxlarge due to lack of usage cafa780.
Updated form color classes from --danger to --error 6050e30.
Changed fa to `fa-wrapper to avoid conflict with FontAwesome b83d7a1.
Removed btn-accent 36058c1.
Renamed menu-dropdown to list list-dropown.
Removed fluid-container and col-fluid, just use row and col respectively.
Renamed .row.expand to .row.row--nowrap.
Removed .divded class within row since the divider class replaces it.

Assets 3

26 May 16:11

Spiderpig86

0.5.4

a1a0707

Beta 3

Major update that polishes many of the new features added in 0.5.3 and finished documentation (below are just the main changes). There are some breaking changes that will be outlined below moving from 0.5.3.

Main Updates

Tab control is no longer cutoff on the right side by other elements.
Updated header styles to be more consistent with expected behavior. navbar a now spans the height of the header menu.
Dark theme added to code blocks along with some font size changes for better readabilities.
Font Awesome glyphs are no longer set to have a height of 100%.
Updated footer to add more balanced padding at the top and bottom
card-title now has a more subtle shadow.
Subsections of modal now have padding of 1rem 3rem to reduce clustering.
More transitions added to modal (refer to documentation in Components)
Redesigned tooltip to be component agnostic and added more directions for tooltip display.
Spacing between title and sub-title now makes sense and removed font size modifier on sub-title
button.animated animations is more subtle.
blockquote font size bumped up to 0.95rem
Removed extra padding at the top for paragraphs that are the first element.
Updated spacing for placeholder
Fixed tabs-classic rendering with improved styling and support for glyphs.
Dynamic spacing added for tab glyphs and buttons (you can still use manual padding like pad-left and pad-right, but will be phased out in 0.5.5.
Improved toast interface.

Breaking Changes

Modal animation selectors now follow BEM conventions, ex: modal-animated--zoom-in instead of modal-zoom-in.
card-tile is now tile.

Assets 2

Releases: Spiderpig86/Cirrus

Gamma 7

🎉 Features

🐛 Fixes

💥 Breaking Changes

Gamma 6 Patch 1

Gamma 6

A new way to use Cirrus

Focus on configurability

Revamped colors

Utils, utils, and more utils

Components

🎉 Features

🐛 Fixes

Gamma 5

🎉 Features

🐛 Fixes

💥 Breaking Changes

Gamma 4 Patch 1

🩹 0.6.2-Patch-1

Gamma 4

🎉 Features

🐛 Fixes

💥 Breaking Changes

Gamma 3

🎉 Features

🐛 Fixes

💥 Breaking Changes

Gamma 2

🎉 Features

🐛 Fixes

💥 Breaking Changes

Gamma 1

Features

Deprecated

Breaking

Beta 3

Main Updates

Breaking Changes