Releases: Spiderpig86/Cirrus
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 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
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 →</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 →</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 →</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 →</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
andping
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
andtext-transparent
classes. c0fcb18 - Add flex-wrap utility classes. 7875c39
- Add letter-spacing utility classes. 4d6f8a8
- Add
font-primary
andfont-secondary
(akafont-alt
) classes. 5e67315 - Update CSS reset for Cirrus. 27c905a
- Darken default text color. cea9b3c
🐛 Fixes
- Fixed rendering issues where links with classes
u
andutb
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
tomin-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 fromh1
. 7d63a17 - Update header font sizes for
h1
andh2
. 718d676 - Move
:root
declaration fromtheme.scss
todefault.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 likesm
. See breaking changes for more details. - Add new tag sizes
xs
,sm
, andmd
. - Fix tag padding.
- Deprecated old sizing classes like
- Add support for viewports for margin and padding classes. 1a6f8aa #68
- This means classes like
p-3-md
orm-1-lg
is now supported for all viewportsxs
,sm
,md
,lg
, andxl
.
- This means classes like
🐛 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
Gamma 4 Patch 1
🩹 0.6.2-Patch-1
- Minor patch that fixes:
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 forsm
,md
,lg
, orxl
, we would need to apply additional modifier classes (see example below). c0e9980-
In this example, here we start with
u-flex
forxs
tosm
. Formd
and above, we will useu-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
💥 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
tou-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, oldxs
-> newsm
, oldsm
-> newmd
, oldmd
-> newlg
, oldlg
-> newxl
. This is to have better consistency with the majority of viewports we see today. d2784b7
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:
- Added margin/padding utility classes in
spacing.scss
. 79ab814 - Updated text element margins, increased spacing between
title
andsubtitle
. 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-*
, andcol-lg-*
. 7d3381f - Face lifted
code
component.
🐛 Fixes
- More consistent theming for
:focus
selector oninput
. 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
- Fixed
form-groups
for buttons. ee175d0 - Many other minor class fixes.
💥 Breaking Changes
- Class changes:
- Deprecations:
- The former
<space>
element is now thespace
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
- Footer title changed from
- All classes for
form-section
are deprecated. Use spacing utility classes instead.
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
andext
builds, wherecore
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 appliesdisplay: 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 forul
insidetab-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 withinput-success
andinput-error
respectively c56d9f1. - Removed
divider-short
412a786. - Removed
content-no-padding
andcontent-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 listlist-dropown
. - Removed
fluid-container
andcol-fluid
, just userow
andcol
respectively. - Renamed
.row.expand
to.row.row--nowrap
. - Removed
.divded
class withinrow
since thedivider
class replaces it.
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 of1rem 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
andsub-title
now makes sense and removed font size modifier onsub-title
button.animated
animations is more subtle.blockquote
font size bumped up to0.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
andpad-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 ofmodal-zoom-in
. card-tile
is nowtile
.