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.

VariableTypeDefault value
$font-baseunits16
$body-font-familyfont-family'Roboto', sans-serif
$body-font-colorcolor$black
$body-font-sizeunits1rem
$body-font-weightunitless400
$body-line-heightunitless1.6
$hr-colorcolor#f5f5f
$hr-heightunits2px
$hr-marginmargin20px 0
$small-maxunits767px
$mediumunits768px
$largeunits922px
$x-largeunits1200px

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

VariableTypeDefault value
$primarycolor#6e45e2
$warningcolor#ffdd57
$infocolor#bfd9fe
$dangercolor#ff2b56
$successcolor#00e3ae
$blackcolor#393939
$darkcolor#304352
$nightcolor#4e4376
$whitecolor#ffffff
$lightcolor#eef1f5
$light-greycolor#d7d2cc
$dark-greycolor#616161
$linkcolor#495aff
$disabledcolor#f7f7f7
$mutedcolorlighten($dark-grey, 35%)
$custom-palettemap(empty)
$color-palettemap(
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


VariableTypeDefault value
$title-font-familyfont-familyLato, sans-serif
$title-font-weightunitless600
$title-line-heightunitless1.4
$title-margin-bottomunits0.45rem
$subtitle-margin-bottomunits1rem
$subtitle-margin-topunits-0.4rem
$subtitle-font-weightunitless400
$subtitle-line-heightunitless$title-line-height
$subtitle-colorcolor#838383
$list-style-typestringdisc
$list-margin-leftunits1.25rem
$list-margin-topunits1rem
$list-item-paddingpadding0
$blockquote-border-leftborder1px solid #d6d6d6
$blockquote-colorcolor$black
$blockquote-marginmargin1rem 0 0
$blockquote-paddingpadding0.5rem 0 0.5rem 1.25rem
$cite-font-sizeunits0.8125rem
$cite-colorcolor $black
$abbr-border-bottomborder1px dotted $black
$title-sizemap(
h1: 2.875rem,
h2: 2.5rem,
h3: 1.875rem,
h4: 1.5rem,
h5: 1.25rem,
h6: 1rem
)

Layout


VariableTypeDefault value
$container-paddingpadding20px
$container-max-widthunits1200px
$section-paddingpadding6rem 1rem
$section-padding-smallpadding3rem 1rem
$section-padding-largepadding12rem 1rem
$col-paddingunits0.625rem
$col-margin-topunits0.5rem
$col-margin-bottomunits0.5rem
$max-colsinteger12
$grid-sizeslist'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-paddingpadding4rem 1.5rem
$hero-sizeslist'medium' 9rem 1.5rem,
'large' 16rem 1.5rem

Form


VariableTypeDefault value
$input-background-colorcolor$white
$input-border-colorcolor#dbdbdb
$input-borderborder1px solid $input-border-color
$input-border-radiusunits0
$input-colorcolorinherit
$input-shadowbox-shadowinset 0 1px 2px rgba(10,10,10,.1)
$input-font-sizeunits1rem
$input-line-heightunitless1.5
$input-paddingunits0.5rem
$input-focus-bordercolor$info
$input-focus-shadowbox-shadow0 0 0 0.125em rgba(50,115,220,.25)
$input-disabled-backgroundcolor$disabled
$input-disabled-bordercolor$disabled
$input-disabled-colorcolor#afafaf
$select-arrow-colorcolor#7284ff
$select-arrow-heightunits0.625em
$select-arrow-widthunits0.625em
$select-paddingunits0.5rem
$select-multiple-paddingpadding.5rem 1rem
$label-font-weightunitless600
$label-bottom-marginunits0.375rem
$label-line-heightunitless1.6
$label-font-sizeunits1rem
$slider-thumb-colorcolor$primary
$slider-thumb-radiusunits20px
$slider-thumb-heightunits1.5rem
$slider-thumb-widthunits1.5rem
$slider-track-heightunits8.4px
$slider-track-backgroundcolor#dbdbdb
$switch-outer-radiusunits20px
$switch-inner-radiusunits15px
$switch-backgroundcolor#dbdbdb
$switch-checked-backgroundcolor$primary
$switch-heightunits2rem
$switch-widthunits4rem
$switch-toggle-backgroundcolor$white
$switch-toggle-heightunits1.5rem
$switch-toggle-widthunits1.5rem


VariableTypeDefault value
$top-paddingpadding1rem 0.75rem
$top-brand-paddingpadding 0 0.65rem
$top-link-radiusunits6px
$top-link-paddingpadding0.3125rem 0.9375rem
$top-link-colorcolorinherit
$top-link-hover-backgroundcolorrgba(169, 169, 169, 0.15)
$top-link-hover-colorcolorinherit
$top-link-hover-decorationtext-decorationnone
$top-link-active-backgroundcolortransparent
$top-link-active-colorcolor$top-link-hover-color
$top-social-paddingpadding0 0.65rem
$top-social-marginmargin0 6px
$top-social-colorcolorinherit
$top-button-paddingpadding0 0.65rem
$top-burger-heightunits14px
$top-burger-widthunits20px
$top-burger-paddingpadding0 0.65rem
$top-burger-colorcolorinherit
$top-burger-bar-heightunits2px
$top-burger-bar-gapunits4px
$top-burger-transitionseconds.5s
$breadcrumb-colorcolor$link
$breadcrumb-disabled-colorcolor$muted
$breadcrumb-active-colorcolor$black
$breadcrumb-hover-colorcolor$black
$breadcrumb-separator-colorcolor$black
$breadcrumb-separator-paddingpadding0 0.625rem
$breadcrumb-separatorstring/
$menu-title-colorcolorlighten($dark-grey, 25%)
$menu-title-font-sizeunits0.85rem
$menu-title-line-heightunitless1.5
$menu-title-paddingpadding0.5rem 1rem
$menu-title-casestringuppercase
$menu-list-colorcolor $black
$menu-list-line-heightunitless1.5
$menu-list-paddingpadding 0.5rem 1.5rem
$menu-list-active-backgroundcolor $primary
$menu-list-active-colorcolorgetTextColor($primary)
$menu-list-hovercolorrgba(192, 192, 192, 0.09)
$menu-dividerborder1px solid #e9ecef
$menu-divider-marginunits0.5rem
$menu-expandable-borderborder1px solid #e9ecef
$menu-expandable-marginunits0.75rem
$menu-expandable-padding-leftunits0.75rem
$menu-expandable-item-paddingpadding0 0.75rem
$pagination-backgroundcolortransparent
$pagination-borderborder1px solid transparent
$pagination-font-sizeunits0.875rem
$pagination-colorcolor$black
$pagination-line-heightunitless1.5
$pagination-marginunits0.125rem
$pagination-paddingpadding0.375rem 0.75rem
$pagination-padding-bottomunitscalc(0.375rem - 1px)
$pagination-active-backgroundcolor$primary
$pagination-active-colorcolorgetTextColor($primary)
$pagination-disabled-opacityunitless0.5
$pagination-hover-backgroundcolor#f5f5f5
$pagination-roundedunits50px
$pagination-rounded-marginunits0.25rem
$pagination-bordered-backgroundcolor$white
$pagination-bordered-radiusunits4px
$pagination-borderedborder1px solid $light-grey
$pagination-bordered-activecolor$primary
$pagination-bordered-hovercolordarken($light-grey, 10%)

Elements


VariableTypeDefault value
$accordion-backgroundcolor$white
$accordion-borderborder1px solid #e6e6e6
$accordion-border-innerborder$accordion-border
$accordion-hover-backgroundcolor$primary
$accordion-hover-colorcolorgetTextColor($primary)
$accordion-active-backgroundcolor$primary
$accordion-active-colorcolorgetTextColor($primary)
$accordion-title-colorcolor$black
$accordion-title-paddingpadding0.75rem 1rem
$accordion-content-paddingunits1rem
$alert-border-colorcolorrgba(10, 10, 10, 0.25)
$alert-border-stylestringsolid
$alert-border-widthunits1px
$alert-radiusunits0
$alert-paddingunits1rem
$button-type-sizeslist'small' 0.75rem,
'large' 1.375rem
$button-backgroundcolor$white
$button-border-colorcolor$light-grey
$button-border-widthunits1px
$button-border-stylestringsolid
$button-colorcolor$black
$button-font-sizeunits1rem
$button-line-heightunitless1.6
$button-margin-bottomunits0.4rem
$button-paddingpadding0.5rem 0.75rem
$button-text-alignstringcenter
$button-hover-bordercolordarken($light-grey, 10%)
$button-radiusunits6px
$button-loading-animationanimationspinner .8s linear infinite
$button-loading-widthunits2px
$button-loading-colorcolor$light-grey
$button-addon-radiusunits6px
$button-group-gapunits0.4rem
$button-close-backgroundcolorrgba(57, 57, 57, 0.23)
$button-close-heightunits1.5rem
$button-close-widthunits1.5rem
$button-close-hovercolorrgba(57, 57, 57, 0.41)
$button-cross-colorcolorinherit
$button-cross-widthunits1px
$card-border-colorcolorrgba(219, 219, 219, 0.36)
$card-border-widthunits1px
$card-border-stylestringsolid
$card-shadowbox-shadow0 0 3px 0 rgba(10, 10, 10, 0.10)
$card-radiusunits0
$card-header-backgroundcolorrgba(0, 0, 0, .03)
$card-header-colorcolor$black
$card-header-paddingpadding0.625rem 1rem
$card-content-paddingunits1rem
$card-footer-paddingpadding0.35rem 1rem
$dropdown-backgroundcolor$white
$dropdown-borderborder1px solid rgba(205, 205, 205, 0.34)
$dropdown-radiusunits0
$dropdown-shadowbox-shadow0 6px 6px rgba(10, 10, 10, 0.16)
$dropdown-min-widthunits12rem
$dropdown-paddingpadding10px 0
$dropdown-link-colorcolor$black
$dropdown-link-paddingpadding5px 15px
$dropdown-link-hovercolorrgba(192, 192, 192, 0.09)
$dropdown-divider-colorcolor#e9ecef
$dropdown-divider-marginmargin5px 0
$dropdown-item-colorcolor$black
$dropdown-item-paddingpadding5px 15px
$dropdown-arrow-colorcolor#7284ff
$image-radiusunits50%
$image-thumb-borderborder1px solid $light-grey
$image-thumb-radiusunits6px
$image-thumb-paddingunits0.25rem
$image-tile-shadowbox-shadow0 5px 10px 0px rgba(0, 0, 0, 0.2)
$image-tile-radiusunits6px
$image-square-sizeslist'tiny-square' 48px,
'small-square' 96px,
'square' 128px,
'medium-square' 160px,
'large-square' 208p
$media-border-widthunits1px
$media-border-stylestringsolid
$media-border-colorcolor#e9ecef
$media-padding-topunits1rem
$media-margin-topunits1rem
$modal-backgroundcolor$white
$modal-radiusunits0
$modal-widthunits600px
$modal-paddingunits1rem
$modal-overlay-backgroundcolortransparentize($black, 0.3)
$modal-size-variationslist'small' 25%,
'medium' 45%,
'large' 75%
$panel-radiusunits4px
$panel-shadowbox-shadow0 0 10px 0 rgba(10, 10, 10, 0.21)
$panel-paddingunits1rem
$progress-heightunits1rem
$progress-margin-bottomunits0.4rem
$progress-bar-colorcolor$light-grey
$progress-bar-value-colorcolor$dark
$table-border-colorcolor#dbdbdb
$table-border-widthunits1px
$table-head-border-widthborder-width1px 0 2px
$table-body-border-widthborder-width0 0 1px
$table-font-sizeunits1rem
$table-paddingpadding0.5rem 0.625rem
$table-hovercolor#f9f9f9
$table-stripecolor#f9f9f9
$table-small-paddingpadding0.25rem 0.5rem
$tab-border-colorcolor#e6e6e6
$tab-border-widthunits1px
$tab-item-paddingpadding0.75rem 1rem 0.5rem
$tab-item-colorcolor$black
$tab-item-active-colorcolor$link
$tab-border-radiusunits0
$tab-content-paddingunits1rem
$tag-backgroundcolor#f3f3f3
$tag-border-colorcolortransparent
$tag-border-stylestringsolid
$tag-border-widthunits1px
$tag-colorcolor$black
$tag-font-sizeunits0.8125rem
$tag-line-heightunitless1.6
$tag-heightunits1.6rem
$tag-radiusunits6px
$tag-group-gapunits0.4rem
$tag-group-marginunits0.4rem
$tag-addon-radiusunits$tag-radius