Cirrus

#Release Notes

Release notes for Cirrus for all versions.

#0.6.3

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

#0.6.2

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

🩹 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
🎉 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

#0.6.1

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

#0.6.0

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.

🎉 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. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831
    • Added utils for positioning elements. 089cd34018f3ff7a7b94b4a7bb274267b8f66c16
  • Added margin/padding utility classes in spacing.scss. 79ab81417e6aed2d71a6a4b7db37abe44c6c5498
  • Updated text element margins, increased spacing between title and subtitle. 4072d5070f5767e6885ac8800b9a04359ba933eb
  • Added our v2 color palette. 7ff010d2c985c766b404757c7869c6c90a3e44f3
  • More utility classes added for element display. edfaf7eda336c4532729a81e54d28f85d91a1605
  • Links will now have display: static (which is the browser default).089cd34018f3ff7a7b94b4a7bb274267b8f66c16
  • Padding/margin classes will now have !important 089cd34018f3ff7a7b94b4a7bb274267b8f66c16
  • btn-circle now dynamically scales with content. ccefd9fb2359fa6ef9720241e248be5ed74bdab9
  • Improved styles for fieldset. 5678de072b65dd0646a5f4c88cee33edff7eef57
  • Added column classes with breakpoints, such as col-xs-*, col-sm-*, and col-lg-*. 7d3381fabc7aead02deaeef7402e8f6c0106f986
  • Face lifted code component.
🐛 Fixes
  • More consistent theming for :focus selector on input. c53c8dec798db23f60326b94b269389be2eef758
  • Added accessibility styles for form-ext-* classes with outline. c53c8dec798db23f60326b94b269389be2eef758
  • Fixed issue for button group rounding being inconsistent at certain widths. 43e84998b7c9c7645d581764609a903509741627
  • Made font sizes more normalized around 1rem instead of being more varying in sizes across framework. 54a8618d5341debfd6a8e28b6333c4ac8e660b23
  • Fixed issue with header dropdown having incorrect positioning. fcf11e810f27a4a1b070bcddf2f3d233da0a0708
  • Removed side padding for row. fcf11e810f27a4a1b070bcddf2f3d233da0a0708
  • More predictable behavior with button being inline-flex. fcf11e810f27a4a1b070bcddf2f3d233da0a0708
  • Better padding sizes for buttons. 9eb17f720b588ca58613be8a11dcbb550bca8297
  • Fixed incorrect padding for glyphs in forms. 9fa0c1c200eac35da414c32961e0de52483cbb36
  • Better tag sizing. 2c823afb0c7a193f4cfd4ff729d0722f32c14cdd
  • Mobile devices can now select CSS only dropdown menu. 54f17c334cdf52db309f0316d8ed7c76c677cefb
    • For dropdown menus where the toggle button contains the .toggle-hover class, menus will now show correctly on mobile devices without JS. aaa52e419c15dad46838429cbc8f7782bc7e7d68
    • Behavior of dropdown menus without the toggle-hover class will remain the same and require JS. aaa52e419c15dad46838429cbc8f7782bc7e7d68
  • Fixed form-groups for buttons. ee175d08c9e220ef8d9ed2e7952ece932b5c8086
  • Many other minor class fixes.
💥 Breaking Changes
  • Class changes:
    • italics -> font-italics. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831
    • u-this-overlay -> u-overlay.
    • .space.x-large -> .space.xlarge 9fa0c1c200eac35da414c32961e0de52483cbb36
  • Deprecations:
    • u-box e20f6a6480a5dc61f0e56ba4fec3570dfae2f831
    • u-fill-width, use w-100 instead. e20f6a6480a5dc61f0e56ba4fec3570dfae2f831
    • level-left and level-right 155dea33ca0324235a9f3018f8f104dbbaf98cf4
    • 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. 0b12d857cdf4801d14a4dc7c33f82fa7512b8402
  • 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.

#0.5.5

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 https://github.com/Spiderpig86/Cirrus/commit/b3587c6377f2bc20afd29b2bd12858da8a5666dc.
  • Removed .text-success and .text-error and combined it with input-success and input-error respectively https://github.com/Spiderpig86/Cirrus/commit/c56d9f1dc63e5f2df8e239ffb59be72094017185.
  • Removed divider-short https://github.com/Spiderpig86/Cirrus/commit/412a786d32c70392843dec3106622eb0eee3ef6b.
  • Removed content-no-padding and content-fluid https://github.com/Spiderpig86/Cirrus/commit/fd0b58ab5983acd8152e0fb15a26e2eedf73d94a.
  • Changed .light to .font-alt for changing font weights https://github.com/Spiderpig86/Cirrus/commit/f84b2648243c62792176e73c128a497d8c511278.
  • Removed font weight modifiers https://github.com/Spiderpig86/Cirrus/commit/f84b2648243c62792176e73c128a497d8c511278.
  • Removed height for tags https://github.com/Spiderpig86/Cirrus/commit/f84b2648243c62792176e73c128a497d8c511278.
  • Removed older button styles from version 0.5.4 https://github.com/Spiderpig86/Cirrus/commit/330e1c30d7536794c044ae06a038f793ab9498b0.
  • Removed btn-xxlarge due to lack of usage https://github.com/Spiderpig86/Cirrus/commit/cafa7801ced95921873ecf5d688c37a07f56bdda.
  • Updated form color classes from --danger to --error https://github.com/Spiderpig86/Cirrus/commit/6050e301e2e59700211c21f881b446578ab71ec6.
  • Changed fa to `fa-wrapper to avoid conflict with FontAwesome https://github.com/Spiderpig86/Cirrus/commit/b83d7a1a2bb4b5a64e8bd2aa09d0538d2415e0fa.
  • Removed btn-accent https://github.com/Spiderpig86/Cirrus/commit/36058c12add77be48c82a33a5787cd6f4012a8c9.
  • 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.

#0.5.4

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.

#0.5.3

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.

🎉 Main Updates
  • Much improved header bar with better support for theming and layouts.
  • Added examples for menu toggles using CSS only and JavaScript/jQuery.
  • Margin fixes to card component.
  • Updates to table styling.
  • More intuitive lists (deprecated .nested-list since it was not needed anymore).
  • Better animation for dropdown lists from buttons.
  • Added tree-navs for navigation menus on the side along with different tree modes, layouts, and more.
  • Updated animated card titles to use .card-tile instead of rows and columns and fixed text being covered up.
  • Deprecated .mobile-title .title and .mobile-title .subtitle
  • Deprecated row.flex in favor of fluid-container.wrap for flex layouts with wrapping.

#0.4.0

Initial release.