Getting Started - Really Good Software Docs

1

Add Base Styles to your project

HTML
CDN
React

Download base-styles.css and base-styles-custom.css and add them to your codebase.

  <link href="/base-styles.css" rel="stylesheet">
  <link href="/base-styles-custom.css" rel="stylesheet">

Download base-styles-custom.css and add it to your codebase, then use the cdn url for base-styles.

  <link href="https://cdn.base-styles.com/versions/0.0.2.css" rel="stylesheet">
  <link href="/base-styles-custom.css" rel="stylesheet">

2

Set Your Defaults

base-styles-custom.css

  :root {
    --ui-font-family-headers: 'Inter', sans-serif;
    --ui-font-family: 'Inter', sans-serif;
    --ui-color-primary: #0070f3;
    --ui-shared-border-radius: 6px;
    --ui-shared-border-width: 2px;
  }

3

3. Use the classes to compose your UI

  <button class="ui-button"> My Button </button>

4

4.(Optional) Add your own variants

If we don’t have a variant you need, just add your own. See customization for more.

base-styles-custom.css

.ui-button {
  & .--embossed {
    box-shadow: 0 0 0 2px var(--ui-color-primary);
  }
}