@blexar/framework/src/util/variables.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

$font-size = generateFontSizes()
/**
 * elemets sizes
 */
$size-tiny ?= $font-size[0]
$size-small ?= $font-size[1]
$size-normal ?= $font-size[2]
$size-large ?= $font-size[3]
$size-massive ?= $font-size[4]
/**
 * typography
 */
$font-tiny ?= $font-size[0]
$font-small ?= $font-size[1]
$font-normal ?= $font-size[2]
$font-large ?= $font-size[3]
$font-massive ?= $font-size[4]
$lineheight ?= 1.1875
$font-weight-light ?= 300
$font-weight-normal ?= 400
$font-weight-medium ?= 500
$font-weight-semi-bold ?= 600
$font-weight-bold ?= 700
$font-weight-heavy ?= 800
$font-weight-super ?= 900
/**
 * Device Breakpoint
 */
$mobile ?= 0
$tablet ?= 768px
$desktop ?= 991px
$widescreen ?= 1360px
$ultrawide ?= 1920px
/**
 * grid
 */
$columns ?= 12
$dir ?= ltr
$dir-start ?= $dir == 'ltr' ? left : right
$dir-end ?= $dir == 'ltr' ? right : left
$gutter ?= toRem(10px)
$gutter-full ?= 8vw
$container-mobile ?= 100%
$container-tablet ?= $tablet - (22 * 2)
$container-desktop ?= $desktop - (22 * 3)
$container-widescreen ?= $widescreen - (22 * 4)
$container-ultrawide ?= $ultrawide - (22 * 5)
$round-digits ?= 4
/*
 * style
 */
$margin ?= 0.5em
$padding ?= 0.5em
$padding-px ?= 20px
$modal-spacing ?= 2em
$border-radius ?= 4px
$border-radius-large ?= 8px
$border ?= 1px
$outline ?= 3px
$outline-opacity ?= 25%
$element-lineheight ?= 1.3
/**
 * animation
 */
$transition-time ?= 0.2s
$transition-function ?= ease-in-out
/**
 * modifiers
 */
$modifiers-size ?= 'tiny' 'small' 'normal' 'large' 'massive'
$modifiers-style ?= 'block' 'disabled' 'rounded' 'outlined' 'bright'
$modifiers-color ?= 'primary' 'secondary' 'info' 'success' 'warning' 'danger' 'black' 'white' 'dark' 'light'
$modifiers-color-grad ?= 'primary' 'secondary' 'info' 'success' 'warning' 'danger'