CSS and JS

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 visit the javascript methods section.