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.

Accordion

• Removed the .is-open modifier on the .accordion__content element. To trigger an open state; the .is-active modifier needs to be applied to a direct parent of the .accordion__content element.

Table

• Removed the .has-scroll helper.
• Added .is-table-container element. Wrapping a table with this class will enable horizontal scrolling.

Dropdown

• Changed the default value of the $dropdown-radius variable to 0.
• Removed the margin override from dropdown buttons.

Bug fixes

• Flex is now only applied to elements with .hero__content who are a direct descendant of the .hero.is-full element.
• Using .is-end and .is-center will only apply to direct descendants of the .card__footer element and not all descendants.
• Span and label styling is only applied to direct descendants of .is-input-group element. This was causing elements such as buttons using icons to display incorrectly.