#Release Notes
Release notes for Cirrus for all versions.
Release notes for Cirrus for all versions.
currentColor
instead of fixed link color bd9ab44xs
viewport. 31f80f0normal-case
utility class. 81d36aavertical-align
util classes. ee67b56btn-close
. 4bfb7c0nav-item
children. c706fcetag__close-btn
specifically instead of colored tags #193 0a6c23ftree-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 161bf52btn--disabled
class to support diabled state for div
and a
tags. 8565138_config.scss
to include fg and bg colors. faac886modal--visible
class to replace shown
class to display modal dialogs. 2c3c6d7flex-basis
utility classes. 23925ed b070926accordion
component. 5347b9f25p
, 75p
and negative versions of absolute util classes. 4fc644dborder-width
util classes. 374cc0egenerate-classes-for-viewport
should reuse logic from generate-classes-for-viewport-with-map
. 37c5f8eleading-none
should have a line height of 1 instead of 0. ee293becontrol-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
. eff211ecol
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
.currentColor
for text. 5ff9035font-size-s
. 57a2c89xl
viewport added to Cirrus. 61e3f03pulse
and ping
animations. 5f13215table-container
class to handle overflowing tables with many columns. f0249edbg-transparent
and text-transparent
classes. c0fcb18font-primary
and font-secondary
(aka font-alt
) classes. 5e67315u
and utb
rendered with inconsistent heights. 9a60273fullscreen
to min-height: 100vh
. 4b6c075content
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
. 61e3f03faded
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. 2334c1au-round
=> u-round-xs
u-circle
=> u-round-full
pulse
animation to pound
. 72839d2tabs-center
=> tabs--center
tabs-right
=> tabs--right
tabs--left
class.grid-gap-*
classes in favor of u-gap-*
. 1aaee51w-[0-100]
=> w-[0-100]p
h-[0-100]
=> h-[0-100]p
min-h-[0-100]
=> min-h-[0-100]p
min-w-[0-100]
=> min-w-[0-100]p
max-h-[0-100]
=> max-h-[0-100]p
max-w-[0-100]
=> max-w-[0-100]p
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
. 7d63a17h1
and h2
. 718d676:root
declaration from theme.scss
to default.scss
to prevent conflicts when importing into Node project. 3def8a2xsmall
, 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
. 8ec79f7btnβpilled
rendering incorrectly. df408e9_config.scss
. 4835bf4Cirrus 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. 5774e4bfont-italitc
, use <em></em>
or <i></i>
instead. 0ef030bCirrus 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. #47tile
not overflowing correctly in smaller screens. ad43bc2.card
UI when certain heights caused by overflowing text content. 8859388xs
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. d2784b7Cirrus 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.
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.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.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
.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.Initial release.