Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Boilerplate

To implement the CSS and javascript in your project, follow the markup shown in the basic boilerplate example.

Once this has been added to your site you then have access to the wealth of built-in utility, element and component styles as well as the javascript to drive interaction.

CSS

Utility classes

There are a wide selection of utility classes to help you to layout page designs, apply brand colours and use documented visual styles to create a consistent experience.

Element and component classes

These classes are the building blocks of the Design Language’s components. Entire feature sets can be built up from combining these in various ways.

CSS normalisation

Normalize.css is an alternative to CSS resets. The project is the product of 100s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.

The aims of normalize.css are as follows:

  • Preserve useful browser defaults rather than erasing them.
  • Normalize styles for a wide range of HTML elements.
  • Correct bugs and common browser inconsistencies.
  • Improve usability with subtle improvements.

CSS normalisation can be disabled by including the rc-no-norm class on the html element.

Javascript

Built-in interactions

The imported javascript is setup to wait until all DOM elements are loaded, then to query the page for components with interaction. When it finds elements it knows should have interaction, the javascript attaches event handlers and makes the necessary DOM manipulations. This makes using the interactive components in the design language easy to implement as you can just drop the markup in and not worry about the javascript.

Javascript method object usage

If you wish to create some custom interactions or use some of the features from the library or components on your own markup, you can access the javascript methods attached to the global scope. You can explore this using chrome console and type ‘RCDL’ or click on the javascript methods tab at the top of the page.

Configuration based component loading

A new feature that allows you to specify a JS loading configuration array has been created, it’s an optional feature that can be used to enhance the performance of a site using the Design Language. It works by sidestepping the DOM interrogation and instead relies on you telling the system what components it needs to load.

To implement it you just need to write out a javascript array before the main Design Language bundle loads. An example has been created on one of the existing example templates:

Code Example

<script> window.RCDLloadingConfig = ["Accordion", "ToggleGroup", "Carousels", "Forms", "Navigation", "Pagination", "Progress", "IconButtons", "Tags", "Tooltip", "image-zoom", "Modal", "Cards", "Icons", "Lists", "Selects", "Badges", "NumberPicker", "SvgAnimation", "Tables", "Breadcrumbs"] </script>
<script type="text/javascript" src="https://dl.royalcanin.com/8-12-4/royal-canin.min.bundle.js"></script>

Copied!

The easiest way to find out what components are actually on a page is to use the pre-existing RCDL config properties. Run (within the browser console) RCDL.DOMelmReady.loadedObjects on any page and it will output an array of all the components that have been loaded. There are a few items within this list that you don’t need to include in the configuration array as they load by default.

The items that you shouldn’t list in your config array are as follow…

  • css-grid-polyfill
  • font-fallback
  • picture-polyfill
  • object-fit-polyfill
  • orientation-change

If you follow the example correctly, you should see an improvement with initial page load and paint times.

Edge Case

If you have new DOM content loaded in after the initial page load. This will still work as expected. A DOM Mutation Observer will ignore the loading configuration and attempt to load any new on page feature as necessary, despite not being listed in the loading config.

Javascript methods

To disable javascript from an element apply one of the following methods:

You can view which listener has been activated by console logging "RCDL.DOMelmReady.listeners" in a browser. Inside the listeners you can view the selectors used for targeting.

At the heart of Design Language interactions is The RCDL methods object. This contains all the logic, event handlers and DOM manipulation that powers the components.

Disabling javascript on a component basis

Add the data-rc-disable-js attribute to disable all events.

<span class="rc-select">
  <label class="rc-select__label" for="id-single-select">I am interested in</label>
  <select data-js-select="" data-rc-disable-js="" id="id-single-select">
    <option selected="" disabled="" value="">Select an option</option>
    <option disabled="">Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
  </select>
</span>

Copied!

Disabling ALL RCDL event listeners

To disable all even listeners from the RCDL just add rc-no-listeners to the html element.

Disabling javascript on a component basis

Add the data-rc-disable-js attribute with a stringified array of listener names to disable.
Some of the listeners are:

  • selects
  • forms
  • toggle-group
  • carousels
  • datepicker
  • image-galleries
  • parallax
  • progress
  • sliders
  • sticky
  • alerts
  • tooltip
  • svgAnimation
  • modal
  • navigation
  • responsive-video-loader

(For a full list of activated listeners console log "RCDL.DOMelmReady.listeners")

<div data-rc-disable-js="["forms","selects"]"></div>

Copied!

Included vanilla javascript libraries

We’ve included some carefully selected third party vanilla javascript libraries.

Choices.js - Github

A vanilla, lightweight (15kb gzipped), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Pikaday.js - Github

A lightweight javascript date picker.

Tiny-slider.js - Github

Tiny slider for all purposes, inspired by Owl Carousel. Vanilla js and no dependencies.

Tippy.js - Github

Tippy.js is a lightweight, vanilla JS tooltip library powered by Popper.js. View the documentation and demo here.

Nouislider.js - Github

noUiSlider is a lightweight javascript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.

rc_webpack_done event

This event is fired when webpack load all RCDL javascript features. You can use it to call custom methods. Example: call custom select method after webpack is done loading dependencies.'

document.addEventListener('rc_webpack_done', function () {
  let options = {
    shouldSort: true,
    searchEnabled: true,
    itemSelectText: 'Custom'
  };

  RCDL.features.Selects.init('[data-js-custom-select]', null, options);
});

Copied!

rc_breakpoint_change event

This event is fired on window resize (debounced every 300ms). You can use it to check the following object for previous width and current breakpoint values. This is useful for initialising or removing breakpoint specific logic.

document.addEventListener('rc_breakpoint_change', function () {
  // Check against values of the breakpoint object
  RCDL.utilities.breakpoints.values = {
      width: {
        previous: XXXX,
        current: XXXX
      },
      height: {
        previous:XXXX,
        current: XXXX
      }
  };
});

Copied!

RCDL.utilities.modifyClass() method

This method takes a DOM node and toggles a class.

  • @param {String} type – The type of class modifier, accepts add, remove or toggle.
  • @param {Node} target – The targeted DOM node item.
  • @param {String} className – The class to be toggled, added or removed. 

RCDL.utilities.modifyClass('add', target[0], 'hidden');

Copied!

RCDL.utilities.wrap() method

Takes two DOM nodes and wraps one around the other.

  • @param {Node} el – The DOM node item to be wrapped.
  • @param {Node} wrapper – The DOM node item to become the wrapper. 

RCDL.utilities.wrap(node[0], node[1]);

Copied!

RCDL.utilities.triggerResize() method

Triggers a fake page resize. This is sometimes useful to force window redraws or recalculations if you are manipulating elements in the DOM.

RCDL.utilities.triggerResize();

Copied!

RCDL.utilities.hasClass() method

Checks if target DOM node has a class.

RCDL.utilities.hasClass(node[0], 'target-class');

Copied!

More coming soon