C.H.E.C.K.

Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.

Page list:

Theme colors:

u-current:
#a6c3e0
u-base:
#32d5f7
u-alt:
#FFBE2F
u-opt:
#ff2c77
u-ctrl:
#FF63FF
u-wh:
#fff

Bg colors:

u-bg-base:
#161c25
u-bg-alt:
#1B232E
u-bg-opt:
#212A37

Ui colors:

u-success:
#2EFA5B
u-danger:
#FF432F
u-warning:
#FF952F

Border colors:

u-border--bg-alt
#1B232E
u-border--current
#a6c3e0
u-border--success
#2EFA5B
u-border--wh
#fff

Icon sprite:

binocular
bucks
check
config
cube
expand
eye
fire
hastag
heart
info
layers
object
options
pencil
search

Font families:

Aa
Oxygen Mono,monospace
A B C D E F G H I K L M N O P Q R S T V X Y Z
a b c d e f g h i k l m n o p q r s t v x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Aa
Roboto,sans-serif
A B C D E F G H I K L M N O P Q R S T V X Y Z
a b c d e f g h i k l m n o p q r s t v x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Aa
-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif
A B C D E F G H I K L M N O P Q R S T V X Y Z
a b c d e f g h i k l m n o p q r s t v x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

Font size:

S
.75rem
S
.875rem
S
1rem
S
1.25rem
S
1.5rem
S
1.75rem
S
2rem
S
2.25rem
S
2.45rem
S
3.6rem
S
4.25rem
S
6rem

Font weight:

W
u-fw--thinnest:
100
W
u-fw--thin:
200
W
u-fw--light:
300
W
u-fw--regular:
normal
W
u-fw--medium:
500
W
u-fw--semibold:
600
W
u-fw--bold:
bold
W
u-fw--extrabold:
800
W
u-fw--black:
900

Line-height & letter-spacing:

Class line-height
u-lh--zero 0
u-lh--one 1
u-lh--base 1.5
u-lh--normal normal
Class letter-spacing
u-lsp--base-neg -1px
u-lsp--zero 0
u-lsp--base .5px
u-lsp--alt .145rem
u-lsp--alt-neg .245rem

Text align & whitespace:

Class text-align
u-l left
u-c center
u-r right
u-j justify
Class white-space
u-nowrap-normal normal
u-nowrap nowrap
u-pre pre

Spacing, margin & padding

$spacing_name $spacing_value
zero 0
auto auto
px 1px
tn .375rem
half 1.25rem/2
one 1.25rem
two 1.25rem*2
three 1.25rem*3
four 1.25rem*4
five 1.25rem*5
six 1.25rem*6
seven 1.25rem*7
eight 1.25rem*8
nine 1.25rem*9
ten 1.25rem*10
Class Css
u-m--{ $spacing_name } margin: $spacing_value
u-mt--{ $spacing_name } margin-top: $spacing_value
u-mb--{ $spacing_name } margin-bottom: $spacing_value
u-ml--{ $spacing_name } margin-left: $spacing_value
u-mr--{ $spacing_name } margin-right: $spacing_value
u-mx--{ $spacing_name } margin-left: $spacing_value
margin-right: $spacing_value
u-my--{ $spacing_name } margin-top: $spacing_value
margin-bottom: $spacing_value
u-p--{ $spacing_name } padding: $spacing_value
u-pt--{ $spacing_name } padding-top: $spacing_value
u-pb--{ $spacing_name } padding-bottom: $spacing_value
u-pl--{ $spacing_name } padding-left: $spacing_value
u-pr--{ $spacing_name } padding-right: $spacing_value
u-px--{ $spacing_name } padding-left: $spacing_value
padding-right: $spacing_value
u-py--{ $spacing_name } padding-top: $spacing_value
padding-bottom: $spacing_value

Width, max-width & min-width, gutter:

Class width
u-width--auto auto
u-width--auto-i auto!important
u-width--zero 0
u-width--zero-i 0!important
u-width--px 1px
u-width--half (100% / 2)
u-width--g-14 (100% / 4)
u-width--g-16 (100% / 6)
u-width--g-18 (100% / 8)
u-width--g-34 (100% / 4 * 3 )
u-width--g-13 (100% / 3)
u-width--g-23 (100% / 3 * 2)
u-width--full 100%
u-width--screen 100vw
u-width--base 6rem
u-width--alt 4rem
u-width--mini-sidebar 14rem
u-width--sidebar 17.5rem
u-width--tn .75rem
Class max-width
u-max-width--sidebar 300px
u-max-width--eighty 800px
u-max-width--mobile 480px
u-max-width--tablet 768px
u-max-width--desktop 1400px
Class min-width
u-min-width--full 100%
u-min-width--screen 100vw
u-min-width--tablet 40rem
Class ('margin-left', 'margin-right')
u-gutter--half margin-right:-1.25rem/2
margin-left:-1.25rem/2
u-gutter--one margin-right:-1.25rem
margin-left:-1.25rem
u-gutter--two margin-right:-1.25rem*2
margin-left:-1.25rem*2

Gutter:

-1.25rem/2
-1.25rem/2
-1.25rem/2
-1.25rem/2
-1.25rem
-1.25rem
-1.25rem
-1.25rem
-1.25rem*2
-1.25rem*2
-1.25rem*2
-1.25rem*2

Height, max-height & min-height:

Class height
u-height--auto auto
u-height--auto-i auto!important
u-height--zero 0
u-height--zero-i 0!important
u-height--px 1px
u-height--base 6rem
u-height--alt 4rem
u-height--ctrl 4px
u-height--tn .75rem
u-height--input 24rem
Class max-height
u-max-height--full 100%
u-max-height--base 24rem
Class min-height
u-min-height--full 100%
u-min-height--screen 100vh

Position & z-index:

Class Css
u-relative position:relative
u-absolute position:absolute
u-fixed position:fixed
u-sticky position:sticky
u-pos--t top:0
u-pos--b bottom:0
u-pos--l left:0
u-pos--r right:0
u-stretch left:0;
right:0;
top:0 ;
bottom:0;
u-stretch--auto left:auto;
right:auto;
top:auto ;
bottom:auto;
u-stretch--x left:0;
right:0;
u-stretch--y top:0;
bottom:0;
Class z-index
u-z--dropdown 3000
u-z--overlay 4000
u-z--modal 4001
u-z--header 1
u-z--zero 0
u-z--auto auto
u-z--unset unset
u-z--neg -1

Border radius & style:

Class border-radius
u-radius--zero 0
u-radius--zero-i 0!important
u-radius--px 1px
u-radius--two 2px
u-radius--four 4px
u-radius--eight 8px
u-radius--full 100%
Class border-style
u-dashed dashed

Opacity & shadow:

Class opacity
u-opacity--zero 0
u-opacity--zero-i 0!important
u-opacity--tw .2
u-opacity--fi .5
Class Css
u-shadow--base box-shadow:0 16px 54px 0 rgba(0,0,0,.02)

Cursor & transition:

Class cursor
u-cursor--pointer pointer
u-cursor--text text
u-cursor--not-allowed not-allowed
Class transition
u-transition--base .25s ease-out
u-transition--alt .33s ease-in-out
This page is generated automatically by C.U.M.O.
Use the force of utility classes, Luke...

©