1. Utilities
1.1. Initial Variables
Name | Type | Value |
---|---|---|
$black | color | #303031 |
$black-light | color | #414042 |
$black-lighter | color | #585759 |
$grey-darker | color | #706F71 |
$grey-dark | color | #888788 |
$grey | color | #A09FA0 |
$grey-light | color | #B7B7B8 |
$grey-lighter | color | #CFCFCF |
$grey-lightest | color | #E8E8E8 |
$white-ter | color | #F4F4F4 |
$white-bis | color | #F9F9F9 |
$white | color | #FFFFFF |
$blue-dark | color | #001B75 |
$blue | color | #00249C |
$blue-light | color | #3F5AB4 |
$red-dark | color | #D42D38 |
$red | color | #EF3340 |
$red-light | color | #F3666F |
$green-dark | color | #2F9980 |
$green | color | #35AD90 |
$green-light | color | #CCEAE3 |
$yellow-dark | color | #E2C54D |
$yellow | color | #FFDE57 |
$yellow-light | color | #FFF6D5 |
$external-fonts | boolean | true |
$external-fonts-url | url | "https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap&subset=latin-ext" |
$family-sans-serif | font-family | "Noto Sans", "Helvetica", "Arial", sans-serif |
$family-monospace | font-family | monospace |
$render-mode | keyword | optimizeLegibility |
$size-1 | size | 3rem |
$size-2 | size | 2.5rem |
$size-3 | size | 2rem |
$size-4 | size | 1.5rem |
$size-5 | size | 1.25rem |
$size-6 | size | 1rem |
$size-7 | size | 0.875rem |
$size-8 | size | 0.75rem |
$size-9 | size | 0.625rem |
$weight-light | font-weight | 300 |
$weight-normal | font-weight | 400 |
$weight-medium | font-weight | 500 |
$weight-semibold | font-weight | 600 |
$weight-bold | font-weight | 700 |
$block-spacing | size | 1.5em |
$gap | size | 32px |
$tablet | size | 769px |
$desktop | size | 960px + (2 * $gap) |
$widescreen | size | 1152px + (2 * $gap) |
$widescreen-enabled | boolean | true |
$fullhd | size | 1344px + (2 * $gap) |
$fullhd-enabled | boolean | true |
$easing | easing | ease-out |
$radius-small | size | 4px |
$radius | size | 8px |
$radius-large | size | 24px |
$radius-rounded | size | 290486px |
$easing | easing | ease-out |
$duration-short | duration | 150ms |
$duration-short-up | duration | 200ms |
$duration-medium | duration | 400ms |
$duration-medium-up | duration | 450ms |
$duration-long | duration | 700ms |
$duration-long-up | duration | 750ms |
$shadow | shadow | 0 0.5em 1em -0.125em rgba($black, .2), 0 0px 0 1px rgba($black, 0.02) |
$variable-columns | boolean | false |
1.2. Derived Variables
Name | Type | Default Value | Computed Value |
---|---|---|---|
$primary-dark | color | $blue-dark | #001B75 |
$primary | color | $blue | #00249C |
$primary-light | color | $blue-light | #3F5AB4 |
$info-dark | color | $blue-dark | #001B75 |
$info | color | $blue | #00249C |
$info-light | color | $blue-light | #3F5AB4 |
$danger-dark | color | $red-dark | #D42D38 |
$danger | color | $red | #EF3340 |
$danger-light | color | $red-light | #F3666F |
$success-dark | color | $green-dark | #2F9980 |
$success | color | $green | #35AD90 |
$success-light | color | $green-light | #CCEAE3 |
$warning-dark | color | $yellow-dark | #E2C54D |
$warning | color | $yellow | #FFDE57 |
$warning-light | color | $yellow-light | #FFF6D5 |
$background | color | $white | #FFFFFF |
$light | color | $white-ter | #F4F4F4 |
$dark | color | $grey-darker | #706F71 |
$border | color | $grey-ligthest | #E8E8E8 |
$border-hover | color | $grey-light | #B7B7B8 |
$border-light | color | $grey-lightest | #E8E8E8 |
$border-light-hover | color | $grey-light | #B7B7B8 |
$text-strong | color | $black | #303031 |
$text | color | $black | #303031 |
$text-light | color | $black-light | #414042 |
$text-muted | color | $grey | #A09FA0 |
$outline | color | $grey-lightest | #E8E8E8 |
$link | color | $blue | #00249C |
$link-hover | color | $blue-dark | #001B75 |
$sizes | map | $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 $size-8 $size-9 | |
$colors | map | ('black': ($black, $white), 'black-light': ($black-light, $white), 'black-lighter': ($black-lighter, $white), 'grey-darker': ($grey-darker, $white), 'grey-dark': ($grey-dark, $white), 'grey': ($grey, $white), 'grey-light': ($grey-light, $black), 'grey-lighter': ($grey-lighter, $black), 'grey-lightest': ($grey-lightest, $black), 'white-ter': ($white-ter, $black), 'white-bis': ($white-bis, $black), 'white': ($white, $black), 'green-dark': ($green-dark, $white), 'green': ($green, $white), 'green-light': ($green-light, $green-dark), 'yellow-dark': ($yellow-dark, $black), 'yellow': ($yellow, $black), 'yellow-light': ($yellow-light, $yellow-dark), 'blue-dark': ($blue-dark, $white), 'blue': ($blue, $white), 'blue-light': ($blue-light, $blue-dark), 'red-dark': ($red-dark, $white), 'red': ($red, $white), 'red-light': ($red-light, $red-dark), 'primary-dark': ($primary-dark, $white), 'primary': ($primary, $white), 'primary-light': ($primary-light, $primary-dark), 'info-dark': ($info-dark, $white), 'info': ($info, $white), 'info-light': ($info-light, $info-dark), 'success-dark': ($success-dark, $white), 'success': ($success, $white), 'success-light': ($success-light, $success-dark), 'warning-dark': ($warning-dark, $black), 'warning': ($warning, $black), 'warning-light': ($warning-light, $warning-dark), 'danger-dark': ($danger-dark, $white), 'danger': ($danger, $white), 'danger-light': ($danger-light, $danger-dark), 'text-strong': ($text-strong, $white), 'text': ($text, $white), 'text-light': ($text-light, $white), 'text-muted': ($text-muted, $white), 'outline': ($outline, $black), 'light': ($light, $black), 'dark': ($dark, $white)) | |
$size-small | size | $size-7 | 0.875rem |
$size-normal | size | $size-6 | 1rem |
$size-medium | size | $size-5 | 1.25rem |
$size-large | size | $size-4 | 1.5rem |
1.3. Animations
Name | Class | Example |
---|---|---|
spin | .spins |
1.4. Mixins
Name | Description |
---|---|
+clearfix | Adds a clearfix at the end of the element. Used for the "is-clearfix" helper. |
+center | Positions the element to the center of the parent element. |
+fa | Sets the style of a Font Awesome icon container. |
+overflow-touch | Sets the overflow property of the element to touch for webkit browsers. |
+placeholder | Sets the styles of an input placeholder. |
+from, +until, +mobile, +tablet, | Shorthands for media queries for device thresholds. |
+unselectable | Turns the element unselectable. Used for buttons to prevent selection when clicking. |
+arrow | Renders an arrow at the end of the element. |
+block | Sets the margin for block elements. |
+delete | A versatile delete cross inherited from Bulma: https://bulma.io/documentation/elements/delete/ |
+loader | Renders a spinning loader animation. |
+overlay | Completely covers the first positioned parent with given offset. |
+pseudo-block | Turns a pseudo element into a block. |