Customization

Override or build your own themes

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 OrbitCSS' package.json file which utilizes node-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

Global variables

These variables are used throughout the entire OrbitCSS framework.

Variable Type Default Value
$font-base units 16
$body-font-family font-family 'Roboto', sans-serif
$body-font-color color $black
$body-font-size units 1rem
$body-font-weight unitless 400
$body-line-height unitless 1.6
$hr-color color #f5f5f
$hr-height units 2px
$hr-margin margin 20px 0
$small-max units 767px
$medium units 768px
$large units 922px
$x-large units 1200px

Color palette

The color variables make up the OrbitCSS default color palette.

The $custom-palette variable can extend the existing palette without having to redeclare all of the palettes' default values.

$custom-palette : (
  orange: #e28945
);
Copy
Variable Type Default Value
$primary color #6e45e2
$warning color #ffdd57
$info color #bfd9fe
$danger color #ff2b56
$success color #00e3ae
$black color #393939
$dark color #304352
$night color #4e4376
$white color #ffffff
$light color #eef1f5
$light-grey color #d7d2cc
$dark-grey color #616161
$link color #495aff
$disabled color #f7f7f7
$muted color lighten($dark-grey, 35%)
$custom-palette map (empty)
$color-palette map (
primary: $primary,
warning: $warning,
info: $info,
danger: $danger,
success: $success,
black: $black,
dark: $dark,
night: $night,
white: $white,
light: $light,
light-grey: $light-grey,
dark-grey: $dark-grey,
link: $link,
disabled: $disabled
)

Typography

Variable Type Default Value
$title-font-family font-family Lato, sans-serif
$title-font-weight unitless 600
$title-line-height unitless 1.4
title-margin-bottom units 0.45rem
$subtitle-margin-bottom units 1rem
$subtitle-margin-top units -0.4rem
$subtitle-font-weight unitless 400
$subtitle-line-height unitless $title-line-height
$subtitle-color color #838383
$list-style-type list-style-type disc
$list-margin-left units 1.25rem
$list-margin-top units 1rem
$list-item-padding padding 0
$blockquote-border-left border 1px solid #d6d6d6
$blockquote-color color $black
$blockquote-margin margin 1rem 0 0
$blockquote-padding padding 0.5rem 0 0.5rem 1.25rem
$cite-font-size units 0.8125rem
$cite-color color $black
$abbr-border-bottom border 1px dotted $black
$title-size map (
h1: 2.875rem,
h2: 2.5rem,
h3: 1.875rem,
h4: 1.5rem,
h5: 1.25rem,
h6: 1rem
)

Layout

Variable Type Default Value
$container-padding padding 20px
$container-max-width units 1200px
$section-padding padding 6rem 1rem
$section-padding-small padding 3rem 1rem
$section-padding-large padding 12rem 1rem
$col-padding units 0.625rem
$col-margin-top units 0.5rem
$col-margin-bottom units 0.5rem
$max-cols integer 12
$grid-sizes list 'one-quarter' 25%, 'half' 50%, 'three-quarters' 75%, 'one-third' 33.333333%, 'two-thirds' 66.666666%, 'full' 100%, 'one-fifth' 20%, 'two-fifths' 40%, 'three-fifths' 60%, 'four-fifths' 80%
$hero-padding padding 4rem 1.5rem
$hero-sizes list 'medium' 9rem 1.5rem, 'large' 16rem 1.5rem

Form

Variable Type Default Value
$input-background-color color $white
$input-border-color color #dbdbdb
$input-border border 1px solid $input-border-color
$input-border-radius units 0
$input-color color inherit
$input-shadow box-shadow inset 0 1px 2px rgba(10,10,10,.1)
$input-font-size units 1rem
$input-line-height unitless 1.5
$input-padding units 0.5rem
$input-focus-border color $info
$input-focus-shadow box-shadow 0 0 0 0.125em rgba(50,115,220,.25)
$input-disabled-background color $disabled
$input-disabled-border color $disabled
$input-disabled-color color #afafaf
$select-arrow-color color #7284ff
$select-arrow-height units 0.625em
$select-arrow-width units 0.625em
$select-padding units 0.5rem
$select-multiple-padding padding .5rem 1rem
$label-font-weight unitless 600
$label-bottom-margin units 0.375rem
$label-line-height unitless 1.6
$label-font-size units 1rem
$slider-thumb-color color $primary
$slider-thumb-radius units 20px
$slider-thumb-height units 1.5rem
$slider-thumb-width units 1.5rem
$slider-track-height units 8.4px
$slider-track-background color #dbdbdb
$switch-outer-radius units 20px
$switch-inner-radius units 15px
$switch-background color #dbdbdb
$switch-checked-background color $primary
$switch-height units 2rem
$switch-width units 4rem
$switch-toggle-background color $white
$switch-toggle-height units 1.5rem
$switch-toggle-width units 1.5rem

Variable Type Default Value
$top-padding padding 1rem 0.75rem
$top-brand-padding padding 0 0.65rem
$top-link-radius units 6px
$top-link-padding padding 0.3125rem 0.9375rem
$top-link-color color inherit
$top-link-hover-background color rgba(169, 169, 169, 0.15)
$top-link-hover-color color inherit
$top-link-hover-decoration text-decoration none
$top-link-active-background color transparent
$top-link-active-color color $top-link-hover-color
$top-social-padding padding 0 0.65rem
$top-social-margin margin 0 6px
$top-social-color color inherit
$top-button-padding padding 0 0.65rem
$top-burger-height units 14px
$top-burger-width units 20px
$top-burger-padding padding 0 0.65rem
$top-burger-color color inherit
$top-burger-bar-height units 2px
$top-burger-bar-gap units 4px
$top-burger-transition seconds .5s
$breadcrumb-color color $link
$breadcrumb-disabled-color color $muted
$breadcrumb-active-color color $black
$breadcrumb-hover-color color $black
$breadcrumb-separator-color color $black
$breadcrumb-separator-padding padding 0 0.625rem
$breadcrumb-separator string /
$menu-title-color color lighten($dark-grey, 25%)
$menu-title-font-size units 0.85rem
$menu-title-line-height unitless 1.5
$menu-title-padding padding 0.5rem 1rem
$menu-title-case string uppercase
$menu-list-color color $black
$menu-list-line-height unitless 1.5
$menu-list-padding padding 0.5rem 1.5rem
$menu-list-active-background color $primary
$menu-list-active-color color getTextColor($primary)
$menu-list-hover color rgba(192, 192, 192, 0.09)
$menu-divider border 1px solid #e9ecef
$menu-divider-margin units 0.5rem
$menu-expandable-border border 1px solid #e9ecef
$menu-expandable-margin units 0.75rem
$menu-expandable-padding-left units 0.75rem
$menu-expandable-item-padding padding 0 0.75rem
$pagination-background color transparent
$pagination-border border 1px solid transparent
$pagination-font-size units 0.875rem
$pagination-color color $black
$pagination-line-height unitless 1.5
$pagination-margin units 0.125rem
$pagination-padding padding 0.375rem 0.75rem
$pagination-padding-bottom units calc(0.375rem - 1px)
pagination-active-background color $primary
$pagination-active-color color getTextColor($primary)
$pagination-disabled-opacity unitless 0.5
$pagination-hover-background color #f5f5f5
$pagination-rounded units 50px
$pagination-rounded-margin units 0.25rem
$pagination-bordered-background color $white
$pagination-bordered-radius units 4px
$pagination-bordered border 1px solid $light-grey
$pagination-bordered-active color $primary
$pagination-bordered-hover color darken($light-grey, 10%)

Elements

Variable Type Default Value
$accordion-background border $white
$accordion-border border 1px solid #e6e6e6
$accordion-border-inner border $accordion-border
$accordion-hover-background color $primary
$accordion-hover-color color getTextColor($primary)
$accordion-active-background color $primary
$accordion-active-color color getTextColor($primary)
$accordion-title-color color $black
$accordion-title-padding padding 0.75rem 1rem
$accordion-content-padding units 1rem
$alert-border-color color rgba(10, 10, 10, 0.25)
$alert-border-style string solid
$alert-border-width units 1px
$alert-radius units 0
$alert-padding units 1rem
$button-type-sizes list 'small' 0.75rem, 'large' 1.375rem
$button-background color $white
$button-border-color color $light-grey
$button-border-width units 1px
$button-border-style string solid
$button-color color $black
$button-font-size units 1rem
$button-line-height unitless 1.6
$button-margin-bottom units 0.4rem
$button-padding padding 0.5rem 0.75rem
$button-text-align string center
$button-hover-border color darken($light-grey, 10%)
$button-radius units 6px
$button-loading-animation animation spinner .8s linear infinite
$button-loading-width units 2px
$button-loading-color color $light-grey
$button-addon-radius units 6px
$button-group-gap units 0.4rem
$button-close-background color rgba(57, 57, 57, 0.23)
$button-close-height units 1.5rem
$button-close-width units 1.5rem
$button-close-hover color rgba(57, 57, 57, 0.41)
$button-cross-color color inherit
$button-cross-width units 1px
$card-border-color color rgba(219, 219, 219, 0.36)
$card-border-width units 1px
$card-border-style string solid
$card-shadow box-shadow 0 0 3px 0 rgba(10, 10, 10, 0.10)
$card-radius units 0
$card-header-background color rgba(0, 0, 0, .03)
$card-header-color color $black
$card-header-padding padding 0.625rem 1rem
$card-content-padding units 1rem
$card-footer-padding padding 0.35rem 1rem
$dropdown-background color $white
$dropdown-border border 1px solid rgba(205, 205, 205, 0.34)
$dropdown-radius units 0
$dropdown-shadow box-shadow 0 6px 6px rgba(10, 10, 10, 0.16)
$dropdown-min-width units 12rem
$dropdown-padding padding 10px 0
$dropdown-link-color color $black
$dropdown-link-padding padding 5px 15px
$dropdown-link-hover color rgba(192, 192, 192, 0.09)
$dropdown-divider-color color #e9ecef
$dropdown-divider-margin margin 5px 0
$dropdown-item-color color $black
$dropdown-item-padding padding 5px 15px
$dropdown-arrow-color color #7284ff
$image-radius units 50%
$image-thumb-border border 1px solid $light-grey
$image-thumb-radius units 6px
$image-thumb-padding units 0.25rem
$image-tile-shadow box-shadow 0 5px 10px 0px rgba(0, 0, 0, 0.2)
$image-tile-radius units 6px
$image-square-sizes list 'tiny-square' 48px, 'small-square' 96px, 'square' 128px, 'medium-square' 160px, 'large-square' 208px
$media-border-width units 1px
$media-border-style string solid
$media-border-color color #e9ecef
$media-padding-top units 1rem
$media-margin-top units 1rem
$modal-background color $white
$modal-radius units 0
$modal-width units 600px
$modal-padding units 1rem
$modal-overlay-background color transparentize($black, 0.3)
$modal-size-variations list 'small' 25%, 'medium' 45%, 'large' 75%
$panel-radius units 4px
$panel-shadow box-shadow 0 0 10px 0 rgba(10, 10, 10, 0.21)
$panel-padding units 1rem
$progress-height units 1rem
$progress-margin-bottom units 0.4rem
$progress-bar-color color $light-grey
$progress-bar-value-color color $dark
$table-border-color color #dbdbdb
$table-border-width units 1px
$table-head-border-width border-width 1px 0 2px
$table-body-border-width border-width 0 0 1px
$table-font-size units 1rem
$table-padding padding 0.5rem 0.625rem
$table-hover color #f9f9f9
$table-stripe color #f9f9f9
$table-small-padding padding 0.25rem 0.5rem
$tab-border-color color #e6e6e6
$tab-border-width units 1px
$tab-item-padding padding 0.75rem 1rem 0.5rem
$tab-item-color color $black
$tab-item-active-color color $link
$tab-border-radius units 0
$tab-content-padding units 1rem
$tag-background color #f3f3f3
$tag-border-color color transparent
$tag-border-style string solid
$tag-border-width units 1px
$tag-color color $black
$tag-font-size units 0.8125rem
$tag-line-height unitless 1.6
$tag-height units 1.6rem
$tag-radius units 6px
$tag-group-gap units 0.4rem
$tag-group-margin units 0.4rem
$tag-addon-radius units $tag-radius