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.

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="" placeholder="">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.

RCDL.ready() method

This method takes a function and executes it when the DOM is ready. This is similar to $(document).ready() but does not require jQuery.
@param {Object} fn – Function object to be executed when ready.

RCDL.ready(myAwesomeFunction());

Copied!

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!

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