KARMA CSS

Defaults

Please see belows the full list of variables, at the time of writing this page

// Variables
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Options
//––––––––––––––––––––––––––––––––––––––––––––––––––

$enable-grid-classes:           true !default;



// Typography
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Base font
$base-font-size:                15px !default;
$base-line-height:              1.6 !default;
$base-font-weight:              400 !default;
$base-font-family:              "Open Sans", sans-serif !default;

// The font sizes for h1-h6.
$h1-font-size: 2    * $base-font-size !default;
$h2-font-size: 1.5  * $base-font-size !default;
$h3-font-size: 1.17 * $base-font-size !default;
$h4-font-size: 1    * $base-font-size !default;
$h5-font-size: 0.83 * $base-font-size !default;
$h6-font-size: 0.67 * $base-font-size !default;

$heading-font-weight: 400 !default;



// Grid
//––––––––––––––––––––––––––––––––––––––––––––––––––

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
) !default;

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px
) !default;

$grid-columns:                  12 !default;
$grid-gutter-width:             30px !default;



// Styling
//––––––––––––––––––––––––––––––––––––––––––––––––––

// colors
$colors: (
        white:                rgb(255, 255, 255),
        black:                rgb(0, 0, 0),
        primary:                rgb(51, 195, 240),
        secondary:              rgb(240, 240, 240),
) !default;

// defined colors
$body-background:               rgb(255, 255, 255) !default;
$code-background:               rgb(240, 240, 240) !default;
$border-color:                  rgb(230, 230, 230) !default;
$font-color:                    rgb(62, 62, 62) !default;



// misc
$generic-margin-bottom:         1.5rem !default; // pre, dl, figure, table, p, ul, ol, form, blockquote
$header-margin-bottom:          1rem !default; // h1-h6
$global-radius:                 .25rem !default;
$darken-hover-percent:          10% !default; // used within hovers in links and buttons



// links
$link-color:                    map-get($colors, primary) !default;
$link-color-hover:              darken($link-color, $darken-hover-percent) !default;
$link-decoration:               none !default;
$link-decoration-hover:         none !default;



// buttons
$buttons: (
        // name         color                          font-color
        primary:        map-get($colors, primary)      map-get($colors, white),
        secondary:      map-get($colors, secondary)    map-get($colors, black)
) !default;
$button-font-size:              1.5rem !default;
$button-font-weight:            400 !default;
$button-padding-y:              1rem !default;
$button-padding-x:              1rem !default;
// the below applies to the default button class only `.button`
$button-default-bg-color:       map-get($colors, white) !default;


// forms
$input-use-full-width:          false !default; // false = max-width:100%, true = width:100%
$input-background:              rgb(255, 255, 255) !default;
$input-background-focus:        $input-background !default;
$input-border-radius:           $global-radius !default;
$input-border:                  solid 1px $border-color !default;
$input-border-focus:            solid 1px map-get($colors, primary) !default;
$input-font-size:               1.5rem !default;
$input-font-color:              $font-color !default;
$input-padding-y:               1rem !default;
$input-padding-x:               1rem !default;
$input-margin-bottom:           1.5rem !default;

$label-font-weight:             600 !default;



// tables
$table-cell-padding:            .85rem .85rem !default;
$table-striped-color:           rgb(250, 250, 250) !default;
$table-headed-color:            rgb(240, 240, 240) !default;
$table-hover-color:             rgb(245, 245, 245) !default;



// defined z-indexes
// and get with zindex('default')
$z-layers: (
        'default':              1
) !default;