Getting Started

Introduction

You can start working immediately with Carbon in a simple HTML setup.

The sourcemap is also available in the carbon/dist/ folder.

dist/
 ├─ carbon.css
 └─ carbon.css.map

Simple HTML setup

Download the CSS (alternatively, get the entire dist/) and place it in your project.
Create your first HTML page – e.g. copying the starter example below.
Link to carbon.css and whatever-js.js in the HTML <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carbon</title>
    <link rel="stylesheet" href="/path/to/your/carbon.css">
    <script src="/path/to/your/whatever-js.js" defer></script>
  </head>
  <body>
    
    <h1>Hello world</h1>

  </body>
</html>

Make the paths to your carbon.css and whatever-js.js follow your project’s directory structure to link to your files.

The stylesheet

carbon.css should be production-ready, so you can add to your project and use it as-is.

Utilities

Carbon contains many utility classes. Utility classes do one thing well, such as control a background color or set a margin. There's an extensive range of utilities for layout, decoration, and typography.

Components

Carbon components have been designed and built using a “utility first” approach. This means that first, utility classes have been used to scaffold the component. This helps us with rapid prototyping before final component creation.

We then build bespoke component CSS classes:

Where it makes more sense to apply a CSS cascade that affects nested HTML elements.
For more complex components that require some added features (e.g. for CSS transitions) for visualising their change of state.

Simple components

Here are some simple components (requires only CSS and no JavaScript for functionality):

Components using JS

The JS components examples in these docs use Alpine JS (billed as "jQuery for the modern web"). Our separation of functional, structural and presentational markup and elements should mean any JS framework can be used with Carbon. These JS examples are purely to show how certain widgets behave.

The following are several examples of components that can be powered by JS:

The SCSS library

Carbon is an accessible, flexible SCSS library, preprocessed and minified to CSS.

The SCSS library is clean, modern and minimalist, and highly versatile because of all the utility classes it contains. All the SCSS files are available in the repository.

The library uses Foundation, our design token base. It also contains default variables and various aliases and supports dark mode. You can choose light or dark mode or inherit your operating system's preferences.

For example, here is the Sass map of the semantic colors we use, aliased from the actual colors (orange, red, green, blue, Preventx brand colour):

$ui-color: () !default;
$ui-color: map-merge((
  "notice":          var(--c6-color-notice),
  "negative":        var(--c6-color-negative),
  "positive":        var(--c6-color-positive),
  "informative":     var(--c6-color-informative),
  "primary":         var(--c6-color-brand-main),
), $ui-color);

These names and color codes can be overridden, removed or added to – and the utility classes will all be generated using some each() loops and for() loops.

There are similar Sass maps for named colors, theme colors (controlling page background, text, borders around form fields, etc.), font sizes, media query breakpoint widths, and so on.

Browser support

Carbon should work on all the common modern web browsers such as Chrome, Safari, Edge, Firefox, Opera, and others.

It is not compatible with older browsers such as Internet Explorer 11.

Note: Alpine v.3x also doesn't support IE11.