Advertising sustains the DA. Ads are hidden for members. Join today

variables.scss

Last updated on
20 April 2018

This file contains Bootstrap variables most suitable for personalization.

The variables are not to markup your site, but to generate a custom Bootstrap, mainly from the color pallete.

Defining primary and accent colors will generate the whole color schema using Google Material Design color management concept.

For typography use typography.scss and for markup style.scss

/* VARIABLES */

// colors
$primary-shade: #A8CF45;
$primary-light: lighten($primary-shade, 37%);
$primary-dark: darken($primary-shade, 12%);
$accent-shade: #0079C0;
$accent-light: lighten($accent-shade, 37%);
$accent-dark: darken($accent-shade, 12%);
// Reassign color vars to semantic color scheme
$red: #dc3545;
$yellow: #ffc107;
$green: #28a745;
$cyan: #17a2b8;
$gray-100: #f8f9fa !default;
$gray-800: #343a40 !default;
$theme-colors: ( primary: $accent-shade, secondary: $primary-shade, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800);
$brand-primary: $accent-shade;
//$brand-success: $green;
//$brand-info: $teal;
//$brand-warning: $orange;
//$brand-danger: $red;
$brand-inverse: $primary-shade;
// Body
//
// Settings for the `<body>` element.
//$body-bg: $white;
//$body-color: $gray-dark;
$inverse-bg: $primary-shade;
//$inverse-color: $gray-lighter;
// Links
//
// Style anchor elements.
$link-color: $accent-shade;
$link-decoration: none;
$link-hover-color: $accent-dark;
$link-hover-decoration: underline;
// Comments
$comment-spacer-x: 1.25em;
$comment-spacer-y: 1.25em;

Help improve this page

Page status: No known problems

You can: