The Digital Commons UI Style Guide (Global CSS) contains the common visual language for projects within the digital landscape. It offers a standardised feature-set of styles and static resources for front-end teams to consume that reduces redundancies and promote re-use, consistency and core brand values.
Global CSS is composed of 3 files which need to be added to your site:
Files can be downloaded or imported as dependencies from BAMS AWS:
https://bams-aws.refinitiv.com/artifactory/webapp/#/artifacts/browse/tree/General/default.npm.cloud/digital-commons/@ui-styleguide
main-x.y.z.css
This file has all the styles for every elements and components covered by the Global CSS.
Include the file in the <head> tag of you page.
main.vendor-x.y.z.js
This file has all the 3rd party external libraries required by Global CSS.
Include it in the <head> tag of you page.
main-x.y.z.js
This file has all the code specific to custom Global CSS components (ex: tooltip, modal, dropdown, etc...).
Include it at the bottom of your <body> tag.
<html>
<head>
<!-- your head content goes here -->
<!-- main CSS file -->
<link rel="stylesheet" href="/path/to/your/css/file/main-x.y.z.css">
<!-- vendor JS file -->
<script src="/path/to/your/js/file/main.vendor-x.y.z.js"></script>
</head>
<body>
<!-- your page content goes here -->
<!-- main JS file -->
<script src="/path/to/your/js/file/main-x.y.z.js"></script>
</body>
</html>
Some components (tabs, tooltip, modal, etc...) require javascript in order to function properly. Add the snippet of code below to instantiate (on page load) the components your projects needs.
For elements added dynamically after the initial page load, we use Mutation Observer to check for dynamically injected elements, and instantiate the appropriate plugin code for these elements.
Here's a normal tooltip, loaded in the initial page load
<html>
<head>...</head>
<body>
<!-- insert your content here -->
<p>...</p>
<!-- instantiate plugins -->
<!-- all components are exposed within a single global object: "refinitiv_ui_plugins" -->
<script>
window.refinitiv_ui_plugins.Tooltip();
window.refinitiv_ui_plugins.Modal();
</script>
</body>
</html>
BEM stands for Block, Element and Modifier and is used extensively across this project to create reusable components.
BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
In order to avoid confusion (especially during the migration from legacy code to this library), a prefix is used for almost all classes in this style guide. This will help to differentiate between classes from the style guide and older CSS.
The prefix is: ui-
<!-- "app" component classes are all prefixed with "ui-" -->
<div class="ui-app">
<div class="ui-app__header">...</div>
<div class="ui-app__container">
<div class="ui-app__nav">...</div>
<div class="ui-app__body">...</div>
</div>
</div>
<!-- "button" element prefixed with "ui-" -->
<button class="ui-btn">...</button>
<button class="ui-btn ui-btn--primary">...</button>
All changes done to Global CSS UI Style Guide can be found here:
https://git.sami.int.thomsonreuters.com/digital-commons/ui-styleguide/blob/develop/CHANGELOG.md