umΩ UI Kit


Index Utilities Helpers Layout Elements Components Form Mailing

1. Utilities


1.1. Initial Variables

Name Type Value
$blackcolor#303031
$black-lightcolor#414042
$black-lightercolor#585759
$grey-darkercolor#706F71
$grey-darkcolor#888788
$greycolor#A09FA0
$grey-lightcolor#B7B7B8
$grey-lightercolor#CFCFCF
$grey-lightestcolor#E8E8E8
$white-tercolor#F4F4F4
$white-biscolor#F9F9F9
$whitecolor#FFFFFF
$blue-darkcolor#001B75
$bluecolor#00249C
$blue-lightcolor#3F5AB4
$red-darkcolor#D42D38
$redcolor#EF3340
$red-lightcolor#F3666F
$green-darkcolor#2F9980
$greencolor#35AD90
$green-lightcolor#CCEAE3
$yellow-darkcolor#E2C54D
$yellowcolor#FFDE57
$yellow-lightcolor#FFF6D5
$external-fontsbooleantrue
$external-fonts-urlurl"https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap&subset=latin-ext"
$family-sans-seriffont-family"Noto Sans", "Helvetica", "Arial", sans-serif
$family-monospacefont-familymonospace
$render-modekeywordoptimizeLegibility
$size-1size3rem
$size-2size2.5rem
$size-3size2rem
$size-4size1.5rem
$size-5size1.25rem
$size-6size1rem
$size-7size0.875rem
$size-8size0.75rem
$size-9size0.625rem
$weight-lightfont-weight300
$weight-normalfont-weight400
$weight-mediumfont-weight500
$weight-semiboldfont-weight600
$weight-boldfont-weight700
$block-spacingsize1.5em
$gapsize32px
$tabletsize769px
$desktopsize960px + (2 * $gap)
$widescreensize1152px + (2 * $gap)
$widescreen-enabledbooleantrue
$fullhdsize1344px + (2 * $gap)
$fullhd-enabledbooleantrue
$easingeasingease-out
$radius-smallsize4px
$radiussize8px
$radius-largesize24px
$radius-roundedsize290486px
$easingeasingease-out
$duration-shortduration150ms
$duration-short-upduration200ms
$duration-mediumduration400ms
$duration-medium-upduration450ms
$duration-longduration700ms
$duration-long-upduration750ms
$shadowshadow0 0.5em 1em -0.125em rgba($black, .2), 0 0px 0 1px rgba($black, 0.02)
$variable-columnsbooleanfalse

1.2. Derived Variables

Name Type Default Value Computed Value
$primary-darkcolor$blue-dark#001B75
$primarycolor$blue#00249C
$primary-lightcolor$blue-light#3F5AB4
$info-darkcolor$blue-dark#001B75
$infocolor$blue#00249C
$info-lightcolor$blue-light#3F5AB4
$danger-darkcolor$red-dark#D42D38
$dangercolor$red#EF3340
$danger-lightcolor$red-light#F3666F
$success-darkcolor$green-dark#2F9980
$successcolor$green#35AD90
$success-lightcolor$green-light#CCEAE3
$warning-darkcolor$yellow-dark#E2C54D
$warningcolor$yellow#FFDE57
$warning-lightcolor$yellow-light#FFF6D5
$backgroundcolor$white#FFFFFF
$lightcolor$white-ter#F4F4F4
$darkcolor$grey-darker#706F71
$bordercolor$grey-ligthest#E8E8E8
$border-hovercolor$grey-light#B7B7B8
$border-lightcolor$grey-lightest#E8E8E8
$border-light-hovercolor$grey-light#B7B7B8
$text-strongcolor$black#303031
$textcolor$black#303031
$text-lightcolor$black-light#414042
$text-mutedcolor$grey#A09FA0
$outlinecolor$grey-lightest#E8E8E8
$linkcolor$blue#00249C
$link-hovercolor$blue-dark#001B75
$sizesmap$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 $size-8 $size-9
$colorsmap('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-smallsize$size-70.875rem
$size-normalsize$size-61rem
$size-mediumsize$size-51.25rem
$size-largesize$size-41.5rem

1.3. Animations

Name Class Example
spin.spins

1.4. Mixins

Name Description
+clearfixAdds a clearfix at the end of the element. Used for the "is-clearfix" helper.
+centerPositions the element to the center of the parent element.
+faSets the style of a Font Awesome icon container.
+overflow-touchSets the overflow property of the element to touch for webkit browsers.
+placeholderSets the styles of an input placeholder.
+from, +until, +mobile, +tablet,
+tablet-only, +touch, +desktop,
+until-widescreen, +widescreen,
+widescreen-only, +until-fullhd,
+fullhd
Shorthands for media queries for device thresholds.
+unselectableTurns the element unselectable. Used for buttons to prevent selection when clicking.
+arrowRenders an arrow at the end of the element.
+blockSets the margin for block elements.
+deleteA versatile delete cross inherited from Bulma: https://bulma.io/documentation/elements/delete/
+loaderRenders a spinning loader animation.
+overlayCompletely covers the first positioned parent with given offset.
+pseudo-blockTurns a pseudo element into a block.