Setup

Welcome to the RingoBook design system! This guide will walk you through the process of integrating our design system into your project using our CDN. 🚀

Quick Start: CDN Installation

The fastest way to get started is by linking to our pre-built CSS and JavaScript files directly from the Ringover CDN. This method is perfect for most projects and ensures you’re always using the latest stable version (lts).

1. Add CSS

Place the following <link> tags in the <head> of your HTML file. This includes the core styles, component styles, and the icon font.

<head>
<!-- Themes -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/all.css">

<!-- Icons -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-regular.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-solid.css">

<!-- Design system -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/design-system.css">
</head>

2. Add JavaScript

You can choose between loading the full Global Bundle or specific Standalone Components. The method you choose affects how you register the components.

Option A: Global Bundle (Recommended)

Include the design-system.js file. This gives you access to all components under the RingoUI global namespace.

<body>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>

<script>
  // Access components via the 'RingoUI' namespace
  customElements.define('ro-notification-banner', RingoUI.RoNotificationBanner);
  customElements.define('ro-pagination', RingoUI.RoPagination);
  customElements.define('ro-tabs', RingoUI.RoTabs);
</script>
</body>

Option B: Standalone Components

For optimized loading, you can include only the scripts for the components you are using. Each component script exposes a specific global namespace (e.g., RoTabs, RoPagination).

<body>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/tabs.js"></script>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/pagination.js"></script>

<script>
  // Note the namespace matches the component name (e.g., RoTabs.RoTabs)
  customElements.define('ro-tabs', RoTabs.RoTabs);
  customElements.define('ro-pagination', RoPagination.RoPagination);
</script>
</body>

Advanced Usage

For more granular control over file size and styles, you can load individual CSS layers or specific themes.

Modular CSS Layers

Instead of loading design-system.css (which includes everything), you can load specific layers. This is useful for projects that may not require all utilities or atoms. The layers should be loaded in the following order:

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/tokens.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/reset.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/atoms.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/molecules.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/utilities.css">

Themes

Our design system includes several themes for different applications. To use a specific theme, link to its stylesheet.

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/dashboard.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/webapp.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/meet.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/empower.css">