v2.0.0

v2.0.0

Core changes

• Removed node-sass package in favor of dart-sass.

• Added support for CSS variables. Customization of your theme can now be done without using SASS.

• Added createColor() function. It takes a color as a parameter and returns a formatted color based on the value of the $color-type variable. Supported values are 'hsl', 'rgba' and 'hex'. This ensures consistency throughout the framework.

• Added createHSLColor($color) function. This accepts any CSS color value and returns the HSL equivalent.

• Added createRGBAColor($color) function. This accepts any CSS color value and returns the RGBA equivalent.

• Added createHexColor($color) function. This accepts any CSS color value and returns the HEX equivalent.

• Removed a handful of functions from _function.scss. See the deprecations section for a full list.

• Added $color-type variable to _colors.scss. This variable controls the framework wide format for colors to be generated. Supported values are 'hsl', 'rgba' and 'hex'.

• Removed link and disabled from the $color-palette list. These colors still exist and can be referenced as per usual.

• Added new secondary color to the color palette.

• CSS variables added for each color along with a lighter and darker version, a text color and an alert color.

• Replaced most variables in _general.scss with CSS variables.

• Added has-no-transition helper to the global helpers. It sets the transition property of an element to none.

• title and subtitle changed to heading and subheading. Variables updated to reflect this change.

• Added the is-subheading modifier to replace the subtitle modifier.

• Controls for background and font color added to the hero__content and hero__footer element. Background color can no longer be set on the hero block.

• Added a max width control to images within the top__brand element.

• Various changes to the appearance of certain module elements.

• Removed color($key) function.

• Removed title-size($key) function.

• Removed has-bg-link and has-text-link modifiers from the color module.

• Removed the set of is-*-title modifiers from the Typography module.

• Removed the subtitle modifier from the Typography module.

• Add CSS variable support to all modules. Refer to the documentation of each module for the list of CSS variables.

New Sass variables

Variable	Module	Default value
$hero-background-color	Hero	hsl(0deg, 0%, 100%, 1)
$hero-color	Hero	hsl(0deg, 0%, 22%, 1)
$input-error-background	Form	hsl(348deg, 100%, 58%, 0.2)
$input-error-border-color	Form	hsl(347deg, 100%, 58%, 1)
$input-error-color	Form	hsl(0deg, 0%, 22%, 1)
$input-border-width	Form	1px
$select-loading-speed	Form	.8s
$select-loading-width	Form	2px
$select-loading-color	Form	hsl(32deg, 12%, 82%, 1)
$top-shadow	Top (Navbar)	none
$top-brand-color	Top (Navbar)	inherit
$top-brand-max-logo-width	Top (Navbar)	200px
$top-link-background	Top (Navbar)	hsl(0deg, 0%, 66%, 0.15)
$top-social-hover-color	Top (Navbar)	inherit
$menu-list-background	Menu	transparent
$menu-list-hover-background	Menu	hsl(0deg, 0%, 75%, 0.09)
$menu-list-hover-color	Menu	hsl(0deg, 0%, 22%, 1)
$menu-divider-width	Menu	1px
$menu-divider-color	Menu	hsl(210deg, 16%, 92%, 1)
$menu-expandable-border-width	Menu	1px
$menu-expandable-border-color	Menu	hsl(210deg, 16%, 92%, 1)
$pagination-border-color	Pagination	transparent
$pagination-border-width	Pagination	1px
$pagination-border-radius	Pagination	0
$pagination-hover-color	Pagination	hsl(0deg, 0%, 22%, 1)
$pagination-bordered-color	Pagination	hsl(0deg, 0%, 22%, 1)
$pagination-bordered-border-color	Pagination	4px
$pagination-bordered-active-border-color	Pagination	hsl(255deg, 73%, 58%, 1)
$pagination-bordered-active-color	Pagination	hsl(0deg, 0%, 100%, 1)
$pagination-bordered-hover-background	Pagination	hsl(0deg, 0%, 100%, 1)
$pagination-bordered-hover-border-color	Pagination	hsl(33, 12%, 72%, 1)
$pagination-bordered-hover-color	Pagination	hsl(0deg, 0%, 22%, 1)
$accordion-border-width	Accordion	1px
$accordion-border-color	Accordion	hsl(0deg, 0%, 90%, 1)
$accordion-title-background-color	Accordion	transparent
$accordion-content-color	Accordion	hsl(0deg, 0%, 22%, 1)
$accordion-content-background	Accordion	hsl(0deg, 0%, 100%, 1)
$alert-background-color	Alert	hsl(0deg, 0%, 100%, 1)
$alert-color	Alert	hsl(0deg, 0%, 22%, 1)
$button-hover-background	Button	hsl(0deg, 0%, 100%, 1)
$button-hover-color	Button	hsl(0deg, 0%, 22%, 1)
$button-rounded-radius	Button	6px
$button-loading-speed	Button	0.8s
$dropdown-color	Dropdown	hsl(0deg, 0%, 22%, 1)
$dropdown-border-width	Dropdown	1px
$dropdown-border-color	Dropdown	hsl(0deg, 0%, 80%, 0.34)
$dropdown-link-hover-color	Dropdown	inherit
$image-thumb-border-width	Image	1px
$image-thumb-border-color	Image	hsl(33, 12%, 82%, 1)
$modal-color	Modal	hsl(0deg, 0%, 22%, 1)
$table-background-color	Table	hs...

v2.0.0-beta.0

v2.0.0-beta.0

Core changes

• Removed node-sass package in favor of dart-sass.
• Added support for CSS variables. Customization of your theme can now be done without using SASS.
• Added createColor() function. It takes a color as a parameter and returns a formatted color based on the value of the $color-type variable. Supported values are 'hsl', 'rgba' and 'hex'. This ensures consistency throughout the framework.
• Added createHSLColor($color) function. This accepts any CSS color value and returns the HSL equivalent.
• Added createRGBAColor($color) function. This accepts any CSS color value and returns the RGBA equivalent.
• Added createHexColor($color) function. This accepts any CSS color value and returns the HEX equivalent.
• Removed a handful of functions from _function.scss. See the deprecations section for a full list.
• Added $color-type variable to _colors.scss. This variable controls the framework wide format for colors to be generated. Supported values are 'hsl', 'rgba' and 'hex'.
• Removed link and disabled from the $color-palette list. These colors still exist and can be referenced as per usual.
• CSS variables added for each color along with a lighter and darker version, a text color and an alert color.
• Replaced most variables in _general.scss with CSS variables.
• Added has-no-transition helper to the global helpers. It sets the transition property of an element to none.
• Add CSS variable support to typography module.
• Add CSS variable support to Container module.
• Add CSS variable support to Grid module.
• Replaced $hero-padding variable with CSS variable equivalent.
• Add CSS variable support to Section module.
• Add CSS variable support to Form module.
• Add CSS variable support to the Breadcrumb module.
• Add CSS variable support to the Menu module.
• Add CSS variable support to the Pagination module.
• Add CSS variable support to the Top module.
• Add CSS variable for all modules in the Elements section.

v1.1.1

v1.1.1

Notes

Forgot to update version number in compiled css. This is a trivial patch - but it needs to be done. See change log for v1.1.0 (the actual update) below.

v1.1.0

Notes

Apologies for the necessary deprecations.

Improvements

• Items within a list using the is-inline-list modifier will now wrap.
• Added a top-margin of 0.3rem to dt elements that are preceded by a dd element. This adds a little more breathing room.
• Removed the _form.scss module. This should have been removed version 1.0.
• Removed bottom-margin from heading tags when used in a top__brand element.
• Removed the redundant form/form.scss file.
• Removed absolute positioning from the top__burger element when the is-mobile-responsive modifier is active.
• Added 'square' to the $image-square-sizes list and removed the $image-square-size variable.
• Changed the default value of $tab-border-radius to 0. Previous value was 6px.
• Added is-loading modifier to the is-select container.
• New form variable $select-loading-animation with value spinner .8s linear infinite.
• New form variable $select-loading-width with value 2px.
• New form variable $select-loading-color with value $light-grey.

Bug fixes

• Tab list item padding was being applied to the li element instead of the a element. All content within a tab list item must be placed within the a element.
• The is-flex-start grid modifier is now using the align-items CSS property instead of align-content.
• Menu list item padding was being applied to the li element instead of the a element. All content within a menu list item must be placed within the a element.
• Removed the on hover underline for a elements in pagination list items.
• Pagination list item padding was being applied to the li element instead of the a element. All content within a pagination list item must be placed within the a element.
• The is-active modifier now works on top__burger elements that do not have the has-animate modifier.
• The top__burger element now appears vertically centered within the top bar.
• The is-mobile-response.is-open modifier did not work on top elements with containers. This has been corrected.
• Active list items within the is-expandable list now use the correct background color.
• Button addon groups where taking up 100% width when nested within a button group. These have been corrected to auto width.
• Tag groups and addons now have 100% width.

Deprecations

• The tabs__title element will be removed this patch. Please use a regular list item or create your own title element.
• The tabs__item element will be removed this patch. To create a tabs list item you only need a regular li element within a list that contains the tabs__list class.
• The has-borders modifier in the tabs module has been replaced with has-border.
• The $tab-bar-color variable will be removed and replaced with $tab-border-color. The default value remains the same.
• The $tab-bar-width variable will be removed and replaced with $tab-border-width. The default value remains the same.
• The menu__slidedown element will be removed this patch. Please use the is-expandable modifier instead.
• The $menu-slidedown-border variable will be removed this patch and replaced with $menu-expandable-border. The default value remains the same.
• The $menu-slidedown-margin variable will be removed this patch and replaced with $menu-expandable-margin. The default value remains the same.
• The $menu-slidedown-padding-left variable will be removed this patch and replaced with $menu-expandable-padding-left. The default value remains the same.
• The $menu-slidedown-item-padding variable will be removed this patch and replaced with $menu-expandable-item-padding. The default value remains the same.
• The $image-square-size variable has been removed. You can edit this value with the $image-square-sizes variable instead.

v1.1.0

v1.1.0

Notes

Apologies for the necessary deprecations.

Improvements

• Items within a list using the is-inline-list modifier will now wrap.
• Added a top-margin of 0.3rem to dt elements that are preceded by a dd element. This adds a little more breathing room.
• Removed the _form.scss module. This should have been removed version 1.0.
• Removed bottom-margin from heading tags when used in a top__brand element.
• Removed the redundant form/form.scss file.
• Removed absolute positioning from the top__burger element when the is-mobile-responsive modifier is active.
• Added 'square' to the $image-square-sizes list and removed the $image-square-size variable.
• Changed the default value of $tab-border-radius to 0. Previous value was 6px.
• Added is-loading modifier to the is-select container.
• New form variable $select-loading-animation with value spinner .8s linear infinite.
• New form variable $select-loading-width with value 2px.
• New form variable $select-loading-color with value $light-grey.

Bug fixes

• Tab list item padding was being applied to the li element instead of the a element. All content within a tab list item must be placed within the a element.
• The is-flex-start grid modifier is now using the align-items CSS property instead of align-content.
• Menu list item padding was being applied to the li element instead of the a element. All content within a menu list item must be placed within the a element.
• Removed the on hover underline for a elements in pagination list items.
• Pagination list item padding was being applied to the li element instead of the a element. All content within a pagination list item must be placed within the a element.
• The is-active modifier now works on top__burger elements that do not have the has-animate modifier.
• The top__burger element now appears vertically centered within the top bar.
• The is-mobile-response.is-open modifier did not work on top elements with containers. This has been corrected.
• Active list items within the is-expandable list now use the correct background color.
• Button addon groups where taking up 100% width when nested within a button group. These have been corrected to auto width.
• Tag groups and addons now have 100% width.

Deprecations

• The tabs__title element will be removed this patch. Please use a regular list item or create your own title element.
• The tabs__item element will be removed this patch. To create a tabs list item you only need a regular li element within a list that contains the tabs__list class.
• The has-borders modifier in the tabs module has been replaced with has-border.
• The $tab-bar-color variable will be removed and replaced with $tab-border-color. The default value remains the same.
• The $tab-bar-width variable will be removed and replaced with $tab-border-width. The default value remains the same.
• The menu__slidedown element will be removed this patch. Please use the is-expandable modifier instead.
• The $menu-slidedown-border variable will be removed this patch and replaced with $menu-expandable-border. The default value remains the same.
• The $menu-slidedown-margin variable will be removed this patch and replaced with $menu-expandable-margin. The default value remains the same.
• The $menu-slidedown-padding-left variable will be removed this patch and replaced with $menu-expandable-padding-left. The default value remains the same.
• The $menu-slidedown-item-padding variable will be removed this patch and replaced with $menu-expandable-item-padding. The default value remains the same.
• The $image-square-size variable has been removed. You can edit this value with the $image-square-sizes variable instead.

v1.0.1

v1.0.1

Improvements

• Add $input-background-color variable. Use this to override the default $white background color on form elements.
• Add $input-color variable. Use this to override the default inherit text color on form elements.

Bug fixes

• Corrected .top__links li element not applying by removing rogue comma.
• The $top-link-hover-decoration variable now applies to any nested link elements.
• .top__burger now sits in the top right corner when the .is-mobile-responsive modifier is being used.

v1.0

v1.0.0

Core changes

• Reorganised structure of the scss folder. Helpers have been moved into the base folder as these are all part of OrbitCSS's base core.
• /helpers/general.scss can now be found at /base/helpers.scss.
• An include all file has been added for each folder allowing developers to include the entire contents instead of each single file.
• The switch and slider elements have been separated into two modules independently from the general form module.
• The media module has been moved to the elements directory.
• /navigation/navbar has been renamed to /navigation/top.
• .has-start, .has-centered and .has-end helpers have been added to the OrbitCSS global helpers. These will align child flex content using the CSS justify-content property.
• Core functions and mixins moved to their own file at /base/functions.scss.
• The .has-padding-only-sides global helper has been removed. Replace existing implementations with class="has-no-padding-top has-no-padding-bottom".
• New mixin element-color has been added. Read more about how to use it in the OrbitCSS documentation.

Typography

• .has-centered and .has-end helpers have been removed from the ul.is-inline-list helper. As these are now global helpers, any previous use will function as normal and no changes are required.
• All link elements now implement text-decoration: underline; on hover state. Previously this was controlled via use of the .is-hover-underline helper.
• Removed the .is-hover-underline helper.

Form

• Form module has been split up unto three modules for the general form content, switch and slider.
• The .is-small helper for the switch module has been removed. If you still require this class you can copy the code from a previous version of OrbitCSS.
• The .upload element has been removed. This should have never existed and predates initial OrbitCSS releases. Use the .is-file-input element class instead.

Grid

• .has-centered and .has-end helpers have been removed from the grid element. As these are now global helpers any previous use will function as normal and no changes are required.

Breadcrumb

• .has-centered and .has-end helpers have been removed from the breadcrumb element. As this previously applied to the child ul element you will now have to add these helpers directly to the ul element. For example replace:

<nav class="breadcrumb has-centered">
	<ul>...</ul>
</nav>

WITH

<nav class="breadcrumb">
	<ul class="has-centered">...</ul>
</nav>

Top

• Module renamed from navbar to top.
• .has-centered and .has-end helpers have been removed from the top element. As this previously applied to the child .container element (only when one was present) you will now have to add these helpers directly to the .container element. For example replace:

<nav class="top has-centered">
	<div class="container">...</div>
</nav>

WITH

<nav class="top">
	<div class="container has-centered">...</div>
</nav>

• Added $top-link-hover-decoration variable. Allows you to add underline styling to top links.
• Added $top-link-hover-color variable. Allows you to set a text color for links in the hover state.
• Added $top-link-active-background variable. Allows you to set a background color for links that are in the active state via the is-active helper.
• Moved the .is-active helper up to the li element instead of the actual a element. This allows for active styling to be applied to list items that are not actually links.
• Removed the .is-even helper due to lack of browser support for justify-content: space-evenly.
• Remove the .is-neat helper. It's use case was too specific.
• Previously all ul elements would be hidden on small view ports. This is no longer the case and all elements are visible without the use of the .is-mobile-responsive helper.
• Added $top-social-padding variable. This is applied directly to the .top__social element.
• Overhauled the .is-mobile-responsive helper. All .top__links and .top__social elements will stack neatly when on small view port. Content can be triggered by adding .is-open to the .top element.
• The .top__burger element has been overhauled. Only one span is required within the element:

<div class="top__burger">
	<span></span>
</div>

• Added $top-burger-padding variable. This is applied directly to the .top__burger element.
• Removed the $top-burger-bar-width variable.
• Added $top-burger-bar-gap variable. This defines the spacing between each of the bars in the burger.
• Removed .top__links--mobile modifier.
• Added the .top__buttons element. This will provide clean styling for buttons in the nav bar.
• Added $top-button-padding variable. This is applied directly to the .top__buttons element.

Pagination

• .has-centered and .has-end helpers have been removed from the pagination element. As these are now global helpers any previous use will function as normal and no changes are required.
• Padding now applies to the li element instead of the nested link element.

Alert

• The alert-color mixin has been removed. Any implementation of it should now make use of the global element-color mixin.
• The $alert-radius has been updated to 0. This removes rounded corners on the alert element by default.

Button

• The button-color mixin has been removed. Any implementation of it should now make use of the global element-color mixin.
• .has-centered and .has-end helpers have been removed from the .is-button-group and .is-addon-group elements. As these are now global helpers any previous use will function as normal and no changes are required.

Card

• The .has-no-padding helper has been removed from the card element. As this previously removed the padding from the child header, content and footer you will have to add .has-no-padding to each of these elements individually.
• Removed the .card--modal modifier. Card elements can now just be placed directly in the modal.
• Removed the .is-rounded helper class and changed the default value of the $card-radius variable to 0.

Modal

• The $modal-overlay-background variable can now be overridden.
• Removed the .card--modal modifier. Card elements can now just be placed directly in the modal.
• Removed the .has-padding helper from the .modal__content element. Padding is now set as the default and can be overridden with the global .has-no-padding helper.
• Set the default value of the $modal-radius variable to 0.

Tabs

• .has-centered and .has-end helpers have been removed from the tabs element. As this previously applied to the child .tabs__list element you will now have to add these helpers directly to the .tabs__list element. For example replace:

<div class="tabs has-centered">
	<ul class="tabs__list">...</ul>
</div>

WITH

<div class="tabs">
	<ul class="tabs__list has-centered">...</ul>
</div>

• Remove the .has-rounded-borders helper from the .tabs__item element. Border radius can now be controlled with the $tab-border-radius variable.
• Added the $tab-border-radius variable with a default value of 0. This variable can be used to control the border radius of the tab list items.

Tags

• The tag-color mixin has been removed. Any implementation of it should now make use of the global element-color mixin.
• .has-centered and .has-end helpers have been removed from the .is-tag-group and .is-addon-group elements. As these are now global helpers any previous use will function as normal and no changes are required.

Menu

• The .link__list a styling has been moved to the li element. This allows for list items that do not have links. The exception is .menu__slidedown elements. The styling will isntead be inherited by the first child.
• Remove the 100% width and no margin default that was applied to all buttons within a menu.
• Removed the .is-open modifier on the slide down menu. To trigger an open state; only the .is-active modifier needs to be applied to the parent item.
• Restructure to prevent nested content inheriting the properties of the core menu elements.

Section

• Added 1rem left & right padding to all 3 section sizes.

Ac...

v0.4.4

0.4.4

Bug fixes

• Corrected bottom margin when using multiple subtitles after a title element.
• Dropdown element arrow now calculating EMs based on font base size.
• Removed the margin on ul elements using the .is-inline-list helper.
• Using the .is-rounded and .is-thumbnail helpers together now forces the rounded border radius.
• Avoid .has-text-muted being overriden by adding !important.

Improvements

• Added .has-centered and .has-end alignment helpers for the ul element.
• Added .has-no-padding-left and .has-no-padding-right general helper classes.
• Added pointer cursor to the burger menu.
• Changed the structure of the .button--close element to support color inheritance.

Variable changes

Variable	From	To
$button-cross-width	2px	1px
$button-cross-color	$white	inherit

Deprecations

• $button-cross-height variable.

v0.4.3

0.4.3

Bug fixes

• $dropdown-radius now actually changes the border radius for a dropdown element.
• $tag-addon-radius now controls the border radius for tags in addon groups.
• $slider-track-height now correctly sets the height for the sliderTrack() mixin.
• Remove redundant $top-burger-bar-width variable from the navbar module.
• $subtitle-color now editable.
• Burger menu now has the correct width when .is-active helper is active.
• Labels and spans in input groups now resize correctly when the $font-base variable is changed.
• Switches now resize correctly when the $font-base variable is changed.
• Corrected padding on the dropdown element when the .has-arrow is active and the $font-base variable has been changed.
• Corrected positioning of select element's arrow when the $font-base variable has been changed.

Improvements

• Removed margin-right from any button using the .is-full helper in a button group.
• Added the $label-font-size and $label-line-height variables for form label customization.

Variable changes

Variable	From	To
$label-font-size		calculateRem(16)
$label-line-height		1.6

Notes

• The .is-small helper for the switch element will be removed in version 0.5.0. The small version of the switch does not benefit the framework and is too specific.

v0.4.2

0.4.2

Improvements

• Move the a element into typography.scss.

Bug fixes

• Fix .has-link-inherit not applying to deeper nested links.
• Correct typo in changelog for v0.4.1.

v.0.4.1

0.4.1

Improvements

• Add .is-active helper to button element.
• Add .is-flex-start helper to the grid element.
• Add .has-link-inherit helper to force child link elements to inherit the text color of the parent.
• Add .is-hover-underline helper.
• New variable $list-item-padding to set the padding on li elements in ordered and unordered lists.
• Add .is-inline-list helper to the unordered list element.
• Set burger bar color based on border color instead of background color.

Bug fixes

• Make $card-header-color variable overridable.
• Fix border display on focus state for form elements within an input group.
• Fix variable height bug for form elements within an input group in Chrome.
• Nested unordered lists no longer inherit the list-style-type styling of a parent unordered list with the .has-no-list-style helper.

Deprecations

• $top-burger-bar-width variable.

Variable changes

Variable	From	To
$list-item-padding		0
$top-burger-bar-height	2px	1px
$top-burger-color	$white	inherit