Bot releases are hidden (Show)
Patch to fix issue when importing Cirrus in a project.
Published by Spiderpig86 10 months ago
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
Published by Spiderpig86 almost 2 years ago
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
Published by Spiderpig86 over 2 years ago
@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>
)
}
Published by Spiderpig86 over 2 years ago
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
Published by Spiderpig86 about 3 years ago
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
Published by Spiderpig86 over 3 years ago
Published by Spiderpig86 over 3 years ago
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
Published by Spiderpig86 almost 4 years ago
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
Published by Spiderpig86 almost 4 years ago
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.Published by Spiderpig86 about 5 years ago
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.
headline
component for larger text displays.btn-link
style.core
and ext
builds, where core
only comes with the essential styles.!important
styles.btn-group
.divider
now with new vertical divider styles.input
now has automatically scaling font sizes.row
now applies display: flex
as intended from before.card-footer
margins and different colors.padding-start
to 0 for ul
inside tab-container
.toast
styles..fluid-container
and .fluid-container .row
..row.wrap
, .row
will automatically wrap content..divider-short
.line-height-auto
from all text elements https://github.com/Spiderpig86/Cirrus/commit/b3587c6377f2bc20afd29b2bd12858da8a5666dc..text-success
and .text-error
and combined it with input-success
and input-error
respectively https://github.com/Spiderpig86/Cirrus/commit/c56d9f1dc63e5f2df8e239ffb59be72094017185.divider-short
https://github.com/Spiderpig86/Cirrus/commit/412a786d32c70392843dec3106622eb0eee3ef6b.content-no-padding
and content-fluid
https://github.com/Spiderpig86/Cirrus/commit/fd0b58ab5983acd8152e0fb15a26e2eedf73d94a..light
to .font-alt
for changing font weights https://github.com/Spiderpig86/Cirrus/commit/f84b2648243c62792176e73c128a497d8c511278.0.5.4
https://github.com/Spiderpig86/Cirrus/commit/330e1c30d7536794c044ae06a038f793ab9498b0.btn-xxlarge
due to lack of usage https://github.com/Spiderpig86/Cirrus/commit/cafa7801ced95921873ecf5d688c37a07f56bdda.--danger
to --error
https://github.com/Spiderpig86/Cirrus/commit/6050e301e2e59700211c21f881b446578ab71ec6.fa
to `fa-wrapper to avoid conflict with FontAwesome https://github.com/Spiderpig86/Cirrus/commit/b83d7a1a2bb4b5a64e8bd2aa09d0538d2415e0fa.btn-accent
https://github.com/Spiderpig86/Cirrus/commit/36058c12add77be48c82a33a5787cd6f4012a8c9.menu-dropdown
to list list-dropown
.fluid-container
and col-fluid
, just use row
and col
respectively..row.expand
to .row.row--nowrap
..divded
class within row
since the divider
class replaces it.Published by Spiderpig86 over 6 years ago
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.
navbar a
now spans the height of the header menu.card-title
now has a more subtle shadow.modal
now have padding of 1rem 3rem
to reduce clustering.modal
(refer to documentation in Components)tooltip
to be component agnostic and added more directions for tooltip display.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
placeholder
tabs-classic
rendering with improved styling and support for glyphs.pad-left
and pad-right
, but will be phased out in 0.5.5.toast
interface.modal-animated--zoom-in
instead of modal-zoom-in
.card-tile
is now tile
.Published by Spiderpig86 about 7 years ago
Major updates to much of the code base with a brand new header system, small touches to make user interface much more consistent, and other utility classes for greater flexibility in design.
.nested-list
since it was not needed anymore)..card-tile
instead of rows and columns and fixed text being covered up..mobile-title .title
and .mobile-title .subtitle
row.flex
in favor of fluid-container.wrap
for flex layouts with wrapping.Published by Spiderpig86 about 7 years ago
This release updates Cirrus substantially with support for many components including updates to animations, buttons, cards, dropdown menus, and all other existing classes as well as many fixes. New additions include card tiles, frames, a new form structure, media content, modal dialogs, placeholders, and toasts.
Please note that updates after this version will involve some breaking changes, especially to the header class. The docs will only show documentation for the new header structure after this version.
Published by Spiderpig86 almost 8 years ago
There are a couple of bumps here and there, but it should be fully usable for a project. Please report any issues in the issues tab!