Changelog

All notable changes to Royal Canin Design Language will be documented on this page.

v8.5.6

Bug fixes

Input label

Input labels will now never wrap onto a second line.

Interactive image icons

Fix bugs with non-clickable icons on interactive images.

Mobile navigation issues.

Border colours have been corrected on mobile navigation, and nested list items now appear in the correct position.

Extra small icons

Bug with xs icons taking up to much space has been fixed.

404 page animation

Animation on 404 page was improved to look more realistic.

Card titles

Bug that was causing overwriting header styles on cards in carousel was fixed.

Features

New utility class for button + styled link

New utility class for wrapping button and styled link in one row.

Updated prototypes

The form prototype has improved markup for better input alignment.

v8.5.5

This release includes updated prototypes, additional classes to create updated layout for filters. There have also been additional bug fixes.

Bug fixes

Inline inputs

There is now a utility class for inline inputs, this has fixed the issue where inputs couldn’t be aligned properly to the bottom of a row in a form.

Tabs with single items

Where there is a tab component with only one item, interactivity has been removed but the visual aspects have been retained. There is also now in example in the tabs page.

Interactive image wrapper

Interactive image responsiveness has been improved.

Content in modals

Padding on mobile added to content in modals to ensure there is a gap between the text and edge of screen.

Password fields

Issue where password and confirm password fields hang the browsers has been fixed.

Checkbox lists

Styling has been added to stop checkbox lists moving around when accordion is closed.

Filter primary buttons

Primary buttons on the filter mobile modal are now full width.

Tag icon animation

Issue where the tag icon animation can be seen when loading a page has been fixed.

Card carousel

Issue where card carousels load six cards regardless of device size has now been fixed.

Cards stacked

Cards are now stacked on mobile view.

Icons on card sizing

Card icon button sizing has been updated.

IE11 header logo issue

Fixed bug where logo was being inserted at the start of the page rather than inline.

Accordion animation on close event

Fixed bug where accordion items didn’t have smooth animation on closing.

Header logo animation

Fixed bug where logo wasn’t animating properly on scrolling back to the top.

Prototypes

Contact us

Contact us prototype has been updated with new types of input.

Additional

Additional prototypes added and now listed clearly so that they can be easily found. New prototypes include: Hub Home, Background Types and Loader.

Features

New spacing utility classes

New utility classes for setting paddings and margins on specific breakpoints have been added.

Other

New footer

A new footer has been added to the Design Language site.

Filters

Filters now have an updated layout after a UX review that requires additional classes.

v8.5.4

This release includes bug fixes, including an extension of match height rules. Also additional prototypes and documentation.

Bug fixes

Match Heights

Match height rules have been extended to cover cards with links and an example of this use case has been added.

Royal Canin Header Logo

The issue in IE11 where the header logo was being inserted at the start of the page rather than inline has now been fixed.

Alerts Layout

A close button has been included on alerts. The developer should now add modifier class to rc-alert, this ensures consistency with the UI kit.

Password field prefix

Rc prefix has been added to ‘toggle visibility label’ in password field, to ensure proper styling.

Card stacking on mobile view

Card layout is now stacked on mobile view.

Documentation

Drop-down

An example of a drop-down select where the input is narrower than the options within has now been added.

Enhancements

Disabled input

Design of disabled input has been changed, to ensure that active state of input will draw more attention than disabled one.

Accordion

Accordion inner paddings and placement of bottom border has been changed.

Prototypes

New prototypes

Additional prototypes have been added.

v8.5.3

This release includes a new switch button with the ability to change its icon and text when clicked, this makes the button’s current state clearly visible to the user. There is also a new utility class specifically for icons, developers can use this to define icons sizes and quickly make them proportional to headers. Additionally, there have also been a number of minor bug fixes.

Bug fixes

Loader

Loader is now fixed to the centre of the viewport rather than absolute positioning which meant it was sometimes out of the viewport

Elements

Background and content elements will now always be positioned on the z axis correctly.

Interactive Button Pulse

This has now been centered and is animating correctly.

Breadcrumb Hover State

The issue where the underline spans out too far when hovering over a chevron has now been fixed.

Navigation Links Hover State

The issue where previously visited navigation links didn’t change color when hovering, has now been fixed.

Layout Container Misalignment

The issue where layout container nested in content block was misaligned, has now been fixed.

Card carousel match heights

Rc-match-heights on rc-carousel--cards is now fixed.

Card Carousel Header

The issue where card carousel header was hidden on mobile view, has now been fixed.

Documentation

Layout Container

Documentation has now been added for container layouts with 6 columns.

New Features

Switching Icon/ Text Button

A new button has been added which changes the button’s icon/ text when clicked. This allows for clearer visual feedback of the button’s current state.

Hyperlink Brand Colour

Brand colour for hyperlinks has now been added to the loop generating utility classes for texts, this ensures consistency.

Enhancements

Nested Layout Containers

A new utility class has been added for nested layout so that the margin/ padding can now be collapsed at the mobile breakpoint.

Utility Class For Icons

A new utility class has been added for icons which defines their size and can be used to ensure they are the same size as relevant headers.

Input utility classes

The top margin on rc-input has been omitted and replaced with a utility class which can be used to toggle the space depending on whether the input has a label or not. The bottom margin is now only added when there is input validation.

v8.5.2

This release mainly includes minor bug fixes, a new icon for attachments & improved support for tablets.

New

Attachment icon

There is now a paperclip icon available in the icon set.

Bug fixes

Card layouts

The last card in a group will now not exceed the width of the other cards

Layout containers

Layout containers will now align properly when using nested columns. Also "rc-single-column" and "rc-one-column" have now been combined and "rc-one-column" should be used going forward for the sake of consistency. This has been changed in the following markup:

  • Content block
  • Layout container
  • Prototypes

Filter component

The filter component classname has been updated to avoid clashing with an existing icon of the same name.

Breakpoint adjustments

Tablets in portrait mode will now adopt mobile styling where there is limited space for better clarity of content.

Match heights

The utility class ‘rc-match-heights’ can now be added to card carousel

Input

The maximum input width has been increased from 300px to 320px

Centered tabs

A bug where the first tab was not accessible when using centered tabs has been fixed

Stop/ Start Button

Button from testing has been removed and documentation added about what should be used instead.

Card Carousels

The correct padding styles have now been applied so that linked card carousels match standard cards in carousels and an example can now be seen on the portal.

Spacing Around Icons In Lists

Extra padding added to the right of icons on icon lists so that large icons now have space between them and the text.

Navigation Links

Styling updated so that navigation links always retain the same style.

rc-match-heights

“rc-match-heights” has been extended when “rc-card” is wrapped in an “a” tag.

Text Box Layout

Styling added to prevent content overflow on carousels and an example added to show where the new styling takes place.

Wrapping On Footer Button

Boilerplate updated to use a navigation element with an unordered list and a selector has been added so that when a button (with an icon) drops to the next line in the footer it now lines up with the previous row.

Progress Loader

The issue where the progress loader loads indefinitely when it’s hidden/ unhidden has now been fixed.

Double Width Class

The portal has been updated with a new prefix class to fix the issue with “.double-width” class.

Utility Classes

Input full width and tab centre utility classes have been added.

v8.5.1

This release includes an example prototype for various template pages, saving time for developers and making implementation quicker. The release has also been largely focused on bug fixes and supporting the UAT release of The Global Hub project.

Documentation

Filter Component and Examples

An example of a product filter component has now been included on the Design Language portal to ensure consistency.

Bug fixes

Button label

Styles have been updated to ensure a smooth transition on buttons in the carousel. This will solve the problem where the button label has been moving rather than transitioning when you hover the mouse over it.

Stop/ Start Button

Button from testing has been removed and documentation added about what should be used instead.

Card Carousels

The correct padding styles have now been applied so that linked card carousels match standard cards in carousels and an example can now be seen on the portal.

Spacing Around Icons In Lists

Extra padding added to the right of icons on icon lists so that large icons now have space between them and the text.

Navigation Links

Styling updated so that navigation links always retain the same style.

rc-match-heights

“rc-match-heights” has been extended when “rc-card” is wrapped in an “a” tag.

Text Box Layout

Styling added to prevent content overflow on carousels and an example added to show where the new styling takes place.

Wrapping On Footer Button

Boilerplate updated to use a navigation element with an unordered list and a selector has been added so that when a button (with an icon) drops to the next line in the footer it now lines up with the previous row.

Progress Loader

The issue where the progress loader loads indefinitely when it’s hidden/ unhidden has now been fixed.

Double Width Class

The portal has been updated with a new prefix class to fix the issue with “.double-width” class.

Utility Classes

Input full width and tab centre utility classes have been added.

v8.5.0

This release includes a new page called “animations” where developers can choose to add a subtle fade in effect to components, as and how they please. This is an enhancement to user experience, creating an overall smoother and less jarring experience. Additionally, developers using rich text editors/ WYSIWYG can now make the most of Royal Canin styling. A class has been created which developers can use to apply Royal Canin styling to everything within a container. Various bugs have also been fixed and documentation updated.

Framework

Advanced sprite generation mechanism

We now have the ability to add separate sprite sheets and generate them in the various brand colours.

Feature Enhancements

Icons

A set of icons have been produced for key facts on breeds.

Animation

Two new classes that developers can use to produce a subtle fade in effect.

WYSIWYG/rich editor classes

Class created which developers can apply to make everything within a container within Royal Canin styling.

IE11 match height fallback

We now have a js fallback for matching heights on layout container cards in ie11.

Bug fixes

Loading component causing too many requests

A data attribute has been added to the loading component, this will check against the logo function to ensure there aren’t multiple requests for the remote SVG file.

Carousel Header

Padding applied to the header container so that the header isn’t clipped when the view-all link isn’t rendered

Text Alignment

Rc--text--left is now set to left.

Footer

Padding has been added to align margins.

Card Images

Aspect-ratio mixin has now been removed from the card styling, this means that images can now be supplied by the CMS in the correct aspect ratios.

Submit button on microform

Padding has been added for negative margins. This has fixed the issue where the submit button on microform was out of the container on iPhones.

Placeholder Consistency

Baseline typeface enforced on input placeholders.

Progress Bar

Z-index reduced so that it is below the the search overlay, therefore progress bar isn’t visible when conducting a site search.

Grid Container

When an item is deleted in a layout container, the other items in the container will no longer change the size.

“movementSetting” Function

Issue where the function “movementSetting” was being used without the property to be transitioned has been fixed.

Breakpoint

Breakpoint 800px updated to 768px in JS-files to ensure switch from mobile menu to desktop happens at the right size and is synchronised with CSS.

Documentation

Utility Class: Royal Canin Font

How to manually re-apply the approved Royal Canin font to an element.

Layout

Documentation on layout container and spacers.

v8.4.3

This release includes performance enhancements that have resulted in a performance score jump of 18 points. Time to interactivity has also been almost halved meaning an all-round faster and more efficient experience. Additionally, customisable options for Choices.js external library are now available to give developers more control over individual use cases of selects. This is particularly useful for situations where a translation is required. Various bugs have also been fixed.

Framework

Crucial inline CSS

Added to hide elements before CSS is loaded and to stop the flickering of items that should be hidden.

Feature Enhancements

Layout container

Updated with responsive breakpoints and a fixed column class which now means cards within a grid cannot expand in width and becoming too large on the page

Customisable option for choices.js library

The ability to turn on and off alphabetical order and to dynamically update selects using options from the library

Bug fixes

Mobile carousel in the Design Language HTML boilerplate

Padding, previous and next buttons have now been removed and the responsiveness checked

Card carousel

Fixed issue on carousel where plain markup wouldn’t dynamically alter the number of cards in the container based on screen site

Webpacks chunk loader

Function namespaced to stop collisions when multiple instances of Webpack are present

Matched height

Fixed the issue in Internet Explorer 11 where the flexbox properties didn’t respect a container opposite if it had no set width

Page to page navigation

Fixed notable bug from release 8.4.0 that was visible when navigating from page to page

Breakpoint

Breakpoint 800px updated to 768px in JS-files to ensure switch from mobile menu to desktop happens at the right size and is synchronised with CSS.

v8.4.2

This release includes fixes to minor js and css issues related to the recent prefixed classes released in version 8.4.1. Also some minor fixes and changes identified across elements and components.

Framework

rc- prefix bugs

Some minor js conflict issues fixed across the new prefixed classes, when using the updated new project cdn asset reference.

New CSS class: clear padding

New global layout class .rc-padding--none to clear padding on a component.

New CSS class: align start

New global layout class .content-block__wrapper > .layout-container.start to align components to the start particularly for multi column horizontal layouts.

New CSS class: align end

New global layout class .content-block__wrapper > .layout-container.start to align components to the end particularly for multi column horizontal layouts.

New CSS class: links in accordion

New class .rc-list__header--content which allows list links to be included in accordion.

New CSS class: full width

New global class .rc-full-width.

Feature enhancements

Progress bars

Documentation updated to explain setup for latest progress bar elements.

Buttons on mobile

Removed full width modifier on buttons.

Bug fixes

List with headers

Fixed issue where list with headers was randomly broken to multiple lines.

Chevron icons

Fixed js prefix issue where chevron icons where showing incorrect icons and not rotating in accordions.

Header bar logo in safari

Fixed issue on logo svg animation with elastic scroll feature in safari browser.

Tooltips

Fixed issue on tooltips loading incorrectly and dark background. This now includes prefix and backwards compatible classes.

Tabs scrollbar

Fixed issue where scroll bar appeared over tabs so the user could not select a tab.

Carousel pager on mobile

Fixed multiple issues with pager dots on mobile view for carousel incl. Too many pagers and overlapping buttons.

Website updates

rc-prefixes updated

All code markup across developer.royalcanin.com now updated to use only the .rc- prefixed classes.

v8.4.1

This release adds further documentation and addresses a number of bugs noticed across components

Framework

rc-prefix documentation

Updated documentation on initialisation page to include guides on setting up new/existing projects using our prefixed CSS

Bug fixes

Search icon alignment

Search icon is now aligned with input field text on mobile

Button font weight

Fix that only button type one and two should take on a bolder font weight

Carousel hero A 2

Reversed content carousel now stacks vertically on mobile

Layout modifier

Layout modifier reverse-layout-mobile now set to align horizontally on iPad

Search

Fixed bug breaking showing the search box

Carousels

Remove navigation arrows on mobile to increase visible content

v8.4.0

This release builds further upon recent framework updates to enable better integration compatibility. Including a new namespaced CSS class for every selector to help avoid conflicts when working with other frameworks/libraries. New features including data tables, filter tags, loader and maps. Minor bugs and enhancements.

Framework

Prepended CSS classes

All classes were prepended with .rc- to avoid framework conflicts from dependent third party plugins. All existing non-preended classes remain supported in this update and will be depreciated slowly over time. A new cdn reference will be provided in a coming release for a lightweight version of the Design Language that includes only the prepended classes.

New features

Data tables

Data tables added as per design spec. Providing default, selectable rows and sortable columns.

Maps

Examples for maps presented as per design spec and basic assets for map implementation provided.

Loader

Loader with two versions, infinite and progressive provided for long page/data loading times.

Filter tags

Tags for filter menus and selection options with dismiss button.

Enhancements

Anchor tag for card type A

Anchor tag added to card type A to enable clickable card area and retain styling of internal links.

Page scroll progress

New classes allow background images to be set to left, right half column.

Bug fixes

Card outline

Fixed issue with missing outline and spacing on mobile card layouts.

Modal markup

Issue fixed with modal markup showing on page load for main menu overlay.

Website updates

Footer accordion

Removed standalone example and markup for dark accordion as is only to be used in context of footer component.

v8.3.0

Framework updates that enable more flexibility for implementation for our integration partners. Particularly reliant on API and third party services in their projects. A selection of new features including sliders, progress indicators and interactive images with animated hotspot buttons.

Framework

Baseline styling

Ability to exclude baseline styles at a global level, exclude low level styles and/or apply baseline styles at a block level on projects. Supporting basic, advanced and hybrid implementation.

Javascript event handlers

Added javascript data attributes to unbind events handlers from styles. Primarily to support integrations that must rely on conflicting frameworks due to API services.

New features

Progress indicators

A selection of progress indicators including options for including markers and tooltips markers.

Page scroll progress

Progress bar iteration which indicates to a user how far down the page they have scrolled. Primarily intended for long read articles.

Sliders

A selection of sliders including single section, snap to selection, throttle range and a visual grade selector.

Animated action button

A CSS pulsating effect added to the existing action button to help draw user attention. Primarily used as markers on images and including a tooltip on click for further content.

Interactive images

Image component where animated action buttons can be positioned absolutely using percentage coordinate values.

Pagination

Includes first and last page detection and jumps to last page in set if a user types a higher number.

Breadcrumb

Includes deep navigation and short link breadcrumb options.

Large icon list

Ability to add a list with large icons

Enhancements

Pager

Updated to include max 3 bullet nav dots and be consistent with design standards.

Background image utility classes

New classes allow background images to be set to left, right half column.

Bug fixes

Body line height

Issue fixed where body line height spacing was skewed on certain integrations.

Video wrapper

Issue fixed with full width wrapper for video showing black space on parent wrapper.

v8.2.0

Introduction of CSS grids that will support presentation of multiple rows in situations such as product library pages. New features responsive carousel wrappers for content blocks and cards that include new content transitions. Updates to breakpoints and max widths and some minor bug fixes.

New features

css grids

Introduction of CSS grids that will support situation like multiple rows of cards in a product library page

Carousel wrapper for content block

Introduction of a new carousel wrapper containing new css content transitions.

Carousel wrapper for cards

Introduction of a new responsive carousel wrapper for cards.

Enhancements

Breakpoint classes

Updated breakpoints: .max-width--lg [max-width: 1100px;] .max-width--xl [max-width: 1450px;] .max-width--xxl [max-width: 1800px;]. Md breakpoint also updated from 800px to 768px.

Bug fixes

Accordion

Issue fixed where accordion tab could not be closed once open.

Buttons hierarchy

Issue fixed with padding between button group hierarchy.

v8.1.1

This release contains a number of critical bug fixes mainly across legacy IE browsers. All fixes are functional and visually aligned with UI design in IE11. Some IE10 fixes will be functional but not visually compliant with UI design. It is noted that some IE9 issues are still present. It is advised to get in touch with us if there are significant compliance requirements for IE9 on your project.

Framework Optimisations

webpack modernizr plugin

Modernizr webpack plugin integrated to enable css classes helpers for older browsers.

Bug fixes

javascript error in IE

Resolved issue with a rogue polyfill that wasn't being activated correctly in IE. Affected various issues including known logged issues; dropdown select options not activating and search dialogue not opening in header bar. Resulting issues previously included unhandled promise rejection TypeError:Object doesn't support this action, and occurrence where the word const being used instead of var.

Flexbox for layout container

Flexbox shorthand updated on layout container to support older browsers.

Flexbox for button group

Fallback to text input on IE. Note that IE also does not support out of the box numerical validation for this component.

Tabs colouring

User-agent overriding button text colour, explicitly defined to define and inherit text colour ref than inheriting from the body.

Header logo

Header logo appearing in black on IE fixed by setting SVG fill in CSS.

SVG JS animation

Issue fixed where SVG animation js was inserting the svg in the incorrect place in the DOM. e.g. Logo in the main menu modal was added before HTML tag.

Header bar transition

Issue fixed with header bar transition on scroll not working in IE.

Image gallery options

Fixed issue where providing insufficient options breaks the slider starting with the reference to the dom node containing the gallery.

Picture elements

IE11 issue with picture elements not working as expected, fixed with picture polyfill.

Language picker modal

Fixed issue where hash character was added to the url when opening language picker.

Language picker

Fixed issue with Africa continent appearing in ‘brand1’ red, incorrect round image size and spacing inconsistency with design asset.

Browser standard scroll bars (IE)

Vertical and horizontal scrollbars hidden on IE after 3 seconds hover. Relevant to image galleries, language picker and horizontal image tabs.

SCSS duplicate spacing and margin values

Duplicate property in SCSS generator removed that was creating redundant property/values for spacer and margin.

List item icons

List item icons sitting outside of list - fixed with relative positioning on container.

Global text align centre

Following function removed due to alignment issues; if body has class of no-flexbox layout container inherits class of text-align:center.

Number picker

Fallback to text input on IE. Note that IE also does not support out of the box numerical validation for this component. Also note that inline label active state for Number picker element only does not currently work in IE on v8.1.1

Date input

Fallback fix on datepicker form element in IE and safari.

v8.1.0

Minor update with numerous bug fixes to support implementation. N.B. additional IE bug fixes will be delivered in the next release. Some minor updates to support first time Installation for contributors. Minor updates to existing features.

Bug fixes

Ie issues

Two column stacked. Various IE browser issues fixed specifically in relation to assets in the header bar, main logo and HTML template.

Gulp post-build script error

Gulp cli global is now advised to be installed globally via documentation rather than using the post build script.

Inline alerts z-index issue

Now sits under dropdowns etc.

Checkbox & radio button

Fixed filled icon alignment if text label of checkbox or radio is too long and Android + Opera radio button display issue fixed.

Button group spacing

Buttons add spacing between buttons when in a button group. When there are more is more than one button in a button group add spacing between each.

Feature updates

Breakpoints updated

Breakpoints updated to 600, 768, 1100, 1800 and utilities documentation updated to reflect true supported breakpoints.

Round images sizes updated

Large, medium, small and extra small round images sizes have been updated and cascaded across relevant components.

Image tabs

Media round image elements updated and cascaded to image tabs sizes for design consistency.

Button text update

Updated all text weights from 300 to 500 for design consistency

Solution updates

.gitkeep file

Add git keep for missing empty output folder

v8.0.0

Updates, bug fixes and documentation that make setup and contribution to the core solution clearer and simpler for developers. This update includes common global components such as header, footer and main menu. We also completed a host of framework and JS optimisations that include implementing webpack and Babel, building linting and refining gulp tasks.

Breaking Changes

Spacing

Standardised spacers with specific sizes are now available for use in all projects. These have been implemented across all elements and components and therefore imply many breaking changes across this release. All previous spacer classes have now been deprecated. Classes for sizes have also been updated to the two letter suffixes; sm, md, lg, xl etc.

List styles

Documentation of available list styles added to the website. Including navigation list styles.

Media

Media assets page has been updated with many various media and responsive media types. This also includes options to hide images at resolutions lower than 600px or higher than 1500px by replacing it with a 1x1px transparent gif.

Alerts

Alert styles visually updated for consistency with optional functionality to present static or close for default, success, error and warning messages. Flexibility for visual icons and close icons to be added or removed from alerts. Optional functionality to keep static or close the alert if required. Alerts now available using Tertiary colour palette to signal various `types` of alert such as warnings, success and errors. Full-width alert also defined which can be positioned to sit outside of a container and can be used for full-width notifications.

Header

Header now fully integrated into HTML boilerplate for clarity and ease of setup. Some minor bug fixes included. List styles have also been updated and old list style consolidated and depreciated. Header includes a recommended max of 3 icons that are flexible and replaceable. There is also a presented option for tooltip hover over account and basket for ecommerce type functionality.

Footer

Minor footer updates since previous release included minor updated styles, back to top link. Also added to global HTML boilerplate. Spacing also updated.

Main menu

Responsive main menu component updated to comply with latest Royal Canin design standards. Fully responsive anatomy to ensure both a clean simple desktop experience and a rich enhanced mobile experience. Also seen in action on the HTML template.

Country selector

Country selector updated for better flexibility and to comply with latest Royal Canin design standards. Presented as a standalone component and also seen in action from the footer component and HTML template.

Tabs

Tabs updated to include image tabs and a horizontal container for slide and swipe functionality, particularly for touch screen users. Animation included to give visual cue to users when tab options exceed screen width. Gradient fade also included for visual experience and smoothness. Component implemented on Country selector as an example on cont + container (see tabs and country select page). Tabs have also been altered to reduce the amount of sizes available from 5 to 2 (Large and Small). Spacing and colours are now more consistent and spacing rules between tabs is defined.

Content blocks

Content block available media types have been updated. Content block group wrapper can now be used that reduces unnecessary excess padding between grouped content by removing guttering and spacer between two or more stacked content blocks.

Cards

Cards component structure has been updated with many recommended additional layout options defined. Two different card types now exist to support multiple types of projects.

Breakpoint utilities

Breakpoint utility classes documented for clarity.

New features

HTML template

A complete HTML starting boilerplate is now available that includes the following recommended standard for Design Language components; header navigation bar, main menu, footer, country selector, cookie banner, global Google Tag Manager script.

Cookie banner

Cookie banner updated and deployed to comply with latest Mars GDPR standards. Also seen in action on the HTML template.

Accordion

Standalone accordion component added for collapsing contained content and also used in the footer component.

Updates

Icon

Cross icon sizes updated for visual consistency across size options and use in components.

Website updates

Initialisation

Documentation for developers updated to include additional guidance on initialisation including a download of the HTML template.

v7.0.0

Updates, bug fixes and documentation that make setup and contribution to the core solution clearer and simpler for developers. This update includes common global components such as header, footer and main menu. We also completed a host of framework and JS optimisations that include implementing webpack and Babel, building linting and refining gulp tasks.

Breaking Changes

Footer

Refinement of a fully responsive global footer component. Compliant with Mars GDPR the footer is to be used as a starting point or complete solution for all Royal Canin web properties.

Header

Overhaul of the global header component with consideration of primary links and icons placement. Particular consideration has been made to support ecommerce type solutions. The header is fully responsive however is currently in beta phase and can be tested for feedback on various markets.

Lists

Added new navigation list style, removed ‘--standard’ modifier from class name.

Icons

New performance focused classes have been introduced. We now split the classes being used by rc-icon utility class, icon name and the colour to be used i.e rc-icon vet iconography

New Features

Main menu

The main menu component is a full screen overlay template as designed for the Royal Canin global corporate website. Includes ability for primary and secondary level navigation on desktop and tablet and a push navigation experience down to mobile.

New button styles

New button styles for large and smaller country flag icons and social links.

Badge

Badge element created to help indicate notifications, updates or quantities added. Can be used alongside a basket icon to indicate the quantities of a basket for example. Positioning and various zero, single digit and multi digit badges defined.

Minor updates/bug fixes

Tooltips

Tooltips have had box-shadows removed and now have more emphasis through the use of Interface as a border. Arrow positions of the tooltips now correctly defined.

Modal

Full screen overlay modal added.

Icon sprite

We have refactored the way we generate the SVG sprites for better performance. Icon classes are now a lot clearer.

Bug Fixes

Modal

Page scrolling fixed so modal content can be larger than full height.

Tabs

The bugs behind the inconsistent behaviour with the tabs has now been resolved.

Optimisations

Webpack

We can now add non-blocking javascript asynchronously on-demand without impacting performance. This opens the door to various opportunities like checking for browser compatibility and using polyfils when needed without bloating the loaded scripts.

Non latin typeface support

A system to detect non-latin characters and dynamically import Roboto typeface. This new feature can easily be extended to cover any change of character sets and languages.

Babel

With the introduction of Babel, developers can now write modern clean javascript risk free with the final output being complied back to older more compatible versions.

Javascript & SCSS linting

Linting rule sets for both project have been vastly improved to ensure any work applied will be to the highest standard.

Website updates

Contributor documentation

The contribution section has been rewritten so that developers wishing to contribute are now able to get up and running quickly.

v6.0.0

A major version update that includes an overhaul of foundation elements; namely buttons and forms. These design and functional updates help to underpin our consistent visual identity whilst making these elements more robust and flexible for implementation, with clear new rules on aspects such as usage, interactivity and hierarchy.

Breaking Changes

Buttons

An overhaul of all button elements including styling, states, functionality as well as rules on hierarchy that help to support visual flow and create a unified consistent brand identity.

Forms

A complete overhaul of all form elements including a slicker simplified styling, alert states and functionality.

New Features

Interactive Icons

Icons now have an interactive class which allows them to display a hover state within icon buttons.

Warning colour

We have added a warning colour under the tertiary pallet to support UX for form implementation and alert messages. The error colour has been updated as not to clash with the Brand1 colour.

Minor updates/bug fixes

Icon colours

Update to ensure that default icons inherit the Iconography colour class.

v5.1.0

A refinement on version 5 with the addition of some new hyperlink styles.

Breaking Changes

Hyperlinks

A complete overhaul of a better branded link styling with a new external link style coupled with an icon for links that generate new pages and lead to external sites; also a CTA link style for use underneath paragraph text or where additional visual attention is required.

Typography

Complete overhaul to typography styling with some additional modifier classes provided for interactive titles and the removal of legacy bold and uppercase typeface and styles.

Minor updates/bug fixes

Layout container

Removed padding from single column container to enable full width display.

v5.0.0

With the growing need for visual elements we've added various multimedia elements.

Breaking Changes

Colour naming conventions

We've had an overhaul of how we name our colours. They're now a lot more logical and abstract.

New Features

Content Blocks

Content blocks make up a large proportion of many consumer facing websites. They are one of the most powerful assets we have to create a consistent visual style to landing pages, campaigns and content. This is why we have taken the time to carefully define and develop a collection of ready to use variations of content blocks for use across Royal Canin digital projects.

404 template

Usual page not found but with a nice animated svg image.

Media elements

We've added an array of new media elements. Including items like the element for true responsive image and parallax media elements for when a page needs a bit of extra flare.

Responsive typography

Headings now grow/shrink depending on the device/screen sizes.

Design Language tips/alerts

We've now added tip and alerts across the Design Language to highlight important information.

v4.0.0

On our quest for design system utopia we are extremely happy to announce the release of a brand new website. The new site design makes it easier to get started in design and development projects, and to find exactly what you are looking for.

Breaking Changes

Vertical Navigation

The vertical navigation component has been removed

New Features

New Website

New layout and navigation structure

v3.1.0

This release is all about improving our documentation. We have included a new section on implementation which we hope will clear up how to get your project up and running.

New Features

Implementation Pages

A whole section dedicated to helping you get up and running with the Design Language. Including a downloadable HTML boilerplate.

Readme Documentation in the Project Repository

Our readme file for developers has been updated with improved instructions.

General Layout Improvements

We are working on incremental layout improvements to the portal, the most notable in this release is the removal of the grey background.

Minor Updates/Bug fixes

Slider Bug Fixes

The slider element has been improved and had some mobile bugs fixed.

Form Element Bug Fixes for Firefox/Safari

Form elements are now showing properly in latest Firefox and Safari.

Bug Fixed on Tabs Element

Fixed bug where tabs were toggling on double click.

v3.0.0

Following the recent v2.0.0 update, in this release we give you another boat load of code optimisations on our journey to the land of implementation utopia. A 16 pixel icon set is now also a thing of beauty for design and development. We banished some bugs on responsive typography to the past amongst some other ghosts, ghouls and demons. And finally, whilst we can’t help you find love, we can give you a long lost search feature to help you find what you are looking for.

Breaking Changes

Form Elements Update

The "rc-" prefix has been removed from form input classes in order to be consistent with the rest of Design Language. Form elements now also follow BEM class naming convention.

New Features

Small 16x16px Icon Set

There is a new iconset designed and optimised at 16x16px.

Search Feature

A search feature has been implemented to make it easier to find what you need.

Copy Code to Clipboard

All code snippets can now be copied instantly via a button.

Minor Updates/Bug fixes

Responsive Typography

Type scaling has been improved across mobile devices.

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo