:cloud: The SCSS framework for the modern web.
Patch to fix issue when importing Cirrus in a project.
Lots of fixes in this one. Big thanks to all the issues submitted by users over the year!
currentColor instead of fixed link color bd9ab44
xs viewport. 31f80f0
normal-case utility class. 81d36aa
vertical-align util classes. ee67b56
btn-close. 4bfb7c0
nav-item children. c706fce
tag__close-btn specifically instead of colored tags #193 0a6c23f
tree-nav--shown to tree-nav--visible to follow new class conventions 37290af
.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
.usquare and .usquare.delay classes due to incompatible color styling 161bf52
btn--disabled class to support diabled state for div and a tags. 8565138
_config.scss to include fg and bg colors. faac886
modal--visible class to replace shown class to display modal dialogs. 2c3c6d7
flex-basis utility classes. 23925ed b070926
accordion component. 5347b9f
25p, 75p and negative versions of absolute util classes. 4fc644d
border-width util classes. 374cc0e
generate-classes-for-viewport should reuse logic from generate-classes-for-viewport-with-map. 37c5f8e
leading-none should have a line height of 1 instead of 0. ee293be
control-themes map inside _config.scss. faac886
_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: ()
),
...
ms vendor prefix for flexbox due to high CSS3 standard adoption. 34c838b
-webkit-tap-highlight-color. eff211e
col where it was shifted 1 level wider than expected in 0.7.0 628a815
@use import would fail due to incorrect import paths for external projects.node_modules.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>
)
}
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.
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.
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.
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.
Utility classes within Cirrus have grown to be quite popular. This update adds utility classes for:
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.
This update wasn't as focused on introducing new components, but it was not forgotten. Some of the new components styles are:
Check out the new docs to see all the new features in 0.7.0!
currentColor for text. 5ff9035
font-size-s. 57a2c89
xl viewport added to Cirrus. 61e3f03
pulse and ping animations. 5f13215
table-container class to handle overflowing tables with many columns. f0249ed
bg-transparent and text-transparent classes. c0fcb18
font-primary and font-secondary (aka font-alt) classes. 5e67315
u and utb rendered with inconsistent heights. 9a60273
fullscreen to min-height: 100vh. 4b6c075
content class will now default to 100% width and adjusts according to xs, sm, md, lg, and xl breakpoints. To get the previous behavior, just include w-80. 61e3f03
faded class is now deprecated. Use opacity utilities instead. 1e9205d
--xs, --sm, --md, --lg, and --xl instead of -xsmall, -small, -large, -xlarge.
white. Use text-white instead. 2334c1a
u-round => u-round-xs
u-circle => u-round-full
pulse animation to pound. 72839d2
tabs-center => tabs--center
tabs-right => tabs--right
tabs--left class.grid-gap-* classes in favor of u-gap-*. 1aaee51
w-50 => w-50p
h-50 => h-50p
min-h-50 => min-h-50p
min-w-50 => min-w-50p
max-h-50 => max-h-50p
max-w-50 => max-w-50p
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.
headline font sizes to have less of a gap from h1. 7d63a17
h1 and h2. 718d676
:root declaration from theme.scss to default.scss to prevent conflicts when importing into Node project. 3def8a2
xsmall, small, etc. to be replaced by common sizing conventions like sm. See breaking changes for more details.xs, sm, and md.p-3-md or m-1-lg is now supported for all viewports xs, sm, md, lg, and xl.btn-group is now -1px instead of -.1rem. 8ec79f7
btn—pilled rendering incorrectly. df408e9
_config.scss. 4835bf4
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).
This update officially adds support for viewport classes for the following utilities:
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
Other refactoring: 0ef030b
font-italic
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
u-hide-overflow to u-overflow-hidden to be consistent with utility class naming conventions. 5774e4b
font-italitc, use <em></em> or <i></i> instead. 0ef030b
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.
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
input-control when the input contains an icon. #47
tile not overflowing correctly in smaller screens. ad43bc2.card UI when certain heights caused by overflowing text content. 8859388
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
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.
u-text-justify for text modification. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831spacing.scss. 79ab81417e6aed2d71a6a4b7db37abe44c6c5498title and subtitle. 4072d5070f5767e6885ac8800b9a04359ba933ebdisplay. edfaf7eda336c4532729a81e54d28f85d91a1605display: static (which is the browser default). 089cd34018f3ff7a7b94b4a7bb274267b8f66c16!important 089cd34018f3ff7a7b94b4a7bb274267b8f66c16btn-circle now dynamically scales with content. ccefd9fb2359fa6ef9720241e248be5ed74bdab9fieldset. 5678de072b65dd0646a5f4c88cee33edff7eef57col-xs-*, col-sm-*, and col-lg-*. 7d3381fabc7aead02deaeef7402e8f6c0106f986code component.:focus selector on input. c53c8dec798db23f60326b94b269389be2eef758form-ext-* classes with outline. c53c8dec798db23f60326b94b269389be2eef7581rem instead of being more varying in sizes across framework. 54a8618d5341debfd6a8e28b6333c4ac8e660b23row. fcf11e810f27a4a1b070bcddf2f3d233da0a0708tag sizing. 2c823afb0c7a193f4cfd4ff729d0722f32c14cddform-groups for buttons. ee175d08c9e220ef8d9ed2e7952ece932b5c8086italics -> font-italics. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831u-this-overlay -> u-overlay..space.x-large -> .space.xlarge 9fa0c1c200eac35da414c32961e0de52483cbb36u-box e20f6a6480a5dc61f0e56ba4fec3570dfae2f831u-fill-width, use w-100 instead. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831level-left and level-right 155dea33ca0324235a9f3018f8f104dbbaf98cf4u-no-padding, use p-0 instead.u-no-margin, use m-0 instead.<space> element is now the space class to by compliant with HTML standards. 0b12d857cdf4801d14a4dc7c33f82fa7512b8402h6 to .footer__title
.footer-list-title changed to .footer__list-title
.list-item changed to .footer__list-item
.footer-fixed changed to .footer--fixed
form-section are deprecated. Use spacing utility classes instead.