Customization

Override or build your own themes

Sass

You can customize various properties and elements within the framework by using the predefined Sass variables. To get started, you will need to install the OrbitCSS framework and configure a setup for compiling Sass. If you need a quick solution check out the OrbitCSS package.json file which utilizes dart-sass.

Create a custom Sass file to which you will import the OrbitCSS Framework.

// main.scss
@import './node_modules/orbitcss/orbit';
Copy

Add all of your variables above your import statement.

// main.scss
$font-base: 18px;
$body-font-color: $white;

@import './node_modules/orbitcss/orbit';
Copy

Make an additional file for your variables and import that into your custom Sass file for a cleaner setup.

// _variables.scss
$font-base: 18px;
$body-font-color: $white;
Copy

// main.scss
@import 'variables';
@import './node_modules/orbitcss/orbit';
Copy

You can view a complete list of variables on the SASS variables page.

Development

The npm run build command will compile the framework and output a css file along with a minified css file.

npm run build
Copy

The npm run start command will watch for changes to your files and automatically run the build:sass script whenever a change is detected, allowing you to make continuous changes without rebuilding the framework manually.

npm run start
Copy

Check out the build scripts in the OrbitCSS package.json file.

CSS variables

CSS variables provide an alternative and powerful way to build custom themes. Getting started with CSS variables is quick and easy as you only need to include the compiled CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orbitcss/css/orbit.min.css">

<style>
  :root {
    --theme-font-color: #000000;
    --theme-font-size: 16px;
  }
</style>
Copy

Theme wide variables

:root {
  --theme-font-size: 1rem;
  --theme-font-color: hsl(0deg, 0%, 22%, 1);
  --theme-background-color: hsl(0deg, 0%, 100%, 1);
  --theme-body-font-family: Roboto, sans-serif;
  --theme-heading-font-family: Lato, sans-serif;
}
Copy

These variables will be inherited by generic HTML elements.

body {
  --font-weight: 400;
  --line-height: 1.6;
  --font-color: var(--theme-font-color);
  --background-color: var(--theme-background-color);
  --font-family: var(--theme-body-font-family);
  --font-size: var(--theme-font-size);
}
Copy

Horizontal break

hr {
  --background-color: var(--color-light-grey-lighter);
  --height: 0.125rem;
  --margin: 1.25rem 0;
}
Copy

View the CSS variables for each module on their respective pages.