Settings

The complete list of Kanbasu overridable settings.

Common
Variable Default value Notice
$namespace Since 1.1.0

Colors
Variable Default value Notice
$brand-color #6ea644
$alt-color-lighter #eee
$alt-color-light #999
$alt-color #777
$alt-color-dark #555
$alt-color-darker #333

Typography
Variable Default value Notice
$font-family-default 'Helvetica Neue', Helvetica, Arial, sans-serif
$font-size-default 16px Has to be in pixels.
$font-size-small 0.75rem
$font-size-large 1.5rem
$line-height-default 1.45
$text-color $alt-color-darker
$link-color $brand-color
$muted-color transparentize($text-color,.4) Since 1.3.0

Spacings
Variable Default value Notice
$ratio 1.61803398875
$spacing-unit-default 24px
$spacing-unit-tiny floor($spacing-unit-default / ($ratio * 2))
$spacing-unit-small floor($spacing-unit-default / $ratio)
$spacing-unit-large floor($spacing-unit-default * $ratio)
$spacing-unit-huge floor($spacing-unit-default * ($ratio * 2))
$spacings 
(
	'tight' 0,
	'tiny' $spacing-unit-tiny,
	'small' $spacing-unit-small,
	'large' $spacing-unit-large,
	'huge' $spacing-unit-huge
)

Since 1.6.0

Used to generate all the alternative spacings for lists, boxes, grid, …

Breakpoints
Variable Default value Notice
$screen-xs-max 640px / 16px * 1em Use EMs since 1.3.1
$screen-sm-min 641px / 16px * 1em Use EMs since 1.3.1
$screen-sm-max 768px / 16px * 1em Use EMs since 1.3.1
$screen-md-min 769px / 16px * 1em Use EMs since 1.3.1
$screen-md-max 1024px / 16px * 1em Use EMs since 1.3.1
$screen-lg-min 1025px / 16px * 1em Use EMs since 1.3.1
$mq-xs '(max-width: #{$screen-xs-max})' Deprecated
$mq-sm '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})' Deprecated
$mq-md '(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})' Deprecated
$mq-lg '(min-width: #{$screen-lg-min})' Deprecated
$breakpoints-default 
(
	'sm' '(min-width: #{$screen-sm-min})',
	'md' '(min-width: #{$screen-md-min})',
	'lg' '(min-width: #{$screen-lg-min})'
)
 Min-only since 1.3.0
$breakpoints-desc 
(
	'xs' '(max-width: #{$screen-xs-max})',
	'sm' '(max-width: #{$screen-sm-max})',
	'md' '(max-width: #{$screen-md-max})'
)
 Since 1.3.0

Styling
Variable Default value Notice
$border-radius-default 4px
$border-radius-small 2px
$border-radius-large 6px

Components

Button
Variable Default value Notice
$btn-use-padding-ratio true

Since 1.4.0

Use the $ratio to calculate buttons’ top and bottom padding resulting in more natural proportions.
This apply only if the variable ($btn-padding, $btn-small-padding, $btn-large-padding) is a single value.
$btn-padding $spacing-unit-small
$btn-font-size inherit Since 1.6.0
$btn-color inherit
$btn-border 1px solid transparent
$btn-bkg transparent
$btn-border-radius $border-radius-default
$btn-small-padding $spacing-unit-tiny
$btn-small-font-size $font-size-small
$btn-small-border-radius $border-radius-small
$btn-large-padding $spacing-unit-default
$btn-large-font-size $font-size-large
$btn-large-border-radius $border-radius-large
$btn-default-color $text-color
$btn-default-bkg-color $alt-color-lighter
$btn-default-hover-bkg-color lighten($btn-default-bkg-color, 3%)
$btn-default-active-bkg-color darken($btn-default-bkg-color, 5%)
$btn-primary-color white
$btn-primary-bkg-color $brand-color
$btn-primary-hover-bkg-color lighten($btn-primary-bkg-color, 8%)
$btn-primary-active-bkg-color darken($btn-primary-bkg-color, 5%)

Form field
Variable Default value Notice
$field-use-padding-ratio true

Since 1.5.0

Use the $ratio to calculate fields’ top and bottom padding resulting in more natural proportions.
This apply only if the variable ($field-padding, $field-small-padding, $field-large-padding) is a single value.
$field-padding $spacing-unit-small
$field-color inherit Since 1.2.0
$field-font-size inherit Since 1.2.0
$field-font-family inherit Since 1.2.0
$field-line-height $line-height-default Since 1.2.0
$field-bkg-color white
$field-border 1px solid $alt-color-light
$field-focus-border-color $alt-color-darker
$field-border-radius $border-radius-default
$field-disabled-bkg-color $alt-color-lighter Since 1.2.0
$field-disabled-color $alt-color Since 1.2.0
$field-small-padding $spacing-unit-tiny
$field-small-font-size $font-size-small
$field-small-border-radius $border-radius-small
$field-large-padding $spacing-unit-default
$field-large-font-size $font-size-large
$field-large-border-radius $border-radius-large
$field-help-color $alt-color-light

List
Variable Default value Notice
$list-separator-style 1px solid $alt-color-lighter

Box
Variable Default value Notice
$box-default-color inherit
$box-default-bkg-color $alt-color-lighter
$box-primary-color white
$box-primary-bkg-color $brand-color

Grid
Variable Default value Notice
$grid-flex false

Since 1.4.0

Use the modern grid (using Flexbox) instead of the legacy one (using inline-block)

Width
Variable Default value Notice
$widths-columns 6, 5, 4, 3, 2, 1
$widths-breakpoints $breakpoints-default

Media
Variable Default value Notice
$media-gutter $spacing-unit-default Since 1.3.0

Media responsive
Variable Default value Notice
$media-collapse $screen-sm-max

Mosaic responsive
Variable Default value Notice
$mosaic-collapse $screen-sm-max Since 1.1.0