Initialisation

The Design Language is here to help create a consistent brand experience and to get you and your projects up and running as quickly as possible. We provide a collection of ever-evolving tools, and standards as a baseline starting point for new projects or the flexibility to update styles and assets of existing properties. Using the supplied assets and documentation will help you to build fast, robust, and adaptive sites quickly. By registering for release notifications we will always keep you updated with the latest improvements. What’s more, you have now become a part of a global community and we value your input to help us evolve and grow the Design Language. To find out more about contributing click here.

What do you get with the Design Language?

  • Assets that are easily imported from our CDN for global consistency across all Royal Canin digital properties.
  • The ability to quickly update and switch asset versions so you’re always ahead of the game and can test the latest updates.
  • A robust base of lightweight and scalable styles to build from.
  • Pre-built javascript interactions that simply `work` and a selection of flexible abstract methods to help reduce development time.
  • Boilerplate templates to either drop in or aim for with your CMS rendering system.
  • The chance to grow and evolve the Design Language by contributing your own improvements and feedback.
Download the HTML boilerplate

New Project

CSS

A framework optimisation has been made that adds a prefix to any Design Language related class. For new projects this will be out of the box functionality. As of version 8.4.1 a new CDN reference has been updated to:

html
            <link rel="stylesheet" type="text/css"
href="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.styles.prefix.min.css?v=8-5-12">
        

Existing Project

As projects are not always new builds, we’ve supplied various tools to help developers that are working with legacy systems and wish to introduce Design Language into their project.

CSS

The Design Language uses the BEMs naming convention for its selectors. This will help stop Design Language styling impacting on legacy components as well as giving good hints to developers as to what the selector targets are used for.

html
            <link rel="stylesheet" type="text/css"
href="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.styles.min.css?v=8-5-12">
        

Prefixed CSS

A framework optimisation has been made that adds a prefix to any Design Language related class. This is not a breaking change. The non prefixed classes will however be depreciated by version 9.0.0 so it is highly recommended to upgrade as soon as possible. To upgrade projects use the CDN reference.

html
            <link rel="stylesheet" type="text/css"
href="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.styles.prefix.min.css?v=8-5-12">
        

Global Styles

Using BEMs means we can decouple common styles from markup, this enables designers to create visual hierarchies detached from the HTML page semantics.

Some CMSs and WYSIWYGs struggle with adding classes to their markup, to combat this we’ve introduced some classes to add to wrappers when using either WYSIWYGs or groups of elements, which will then inherit the type styles on plain H tags etc.

Setup steps:

  • Ensure you’ve included the CSS style import before your styles in the page head
  • Add the javascript import script tag just before the closing body tag
  • Start including new components

Intentional inheritance and normalization

Excluding baseline styles at a global level

This technique is intended for projects that rely on external libraries or frameworks that may otherwise cause conflicts with Design Language baseline styles.

If low level styles need to be excluded as part of the project, this can be achieved by including the class rc-no-baseline on the html element.

To apply baseline styles at a block level on projects use the rc-no-baseline class on the html element and then on nested block level items use rc-dl-baseline to apply styles to children.

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

WYSIWYG/Rich text class

rc-wysiwyg can be added to a parent wrapper which contains content generated by a WYSIWYG or rich text editor, this will allow the correct styles to cascade.