← back to the module index

Test: core

breakpoints

XS

SM

MD

LG

XL


font families

uikit font: The quick brown fox jumps over the lazy dog

monospace: The quick brown fox jumps over the lazy dog

system: The quick brown fox jumps over the lazy dog


max width

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium at voluptas voluptate, minus accusamus doloremque repellat molestias id, iusto cum adipisci distinctio tempore blanditiis dolor hic vero omnis laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta distinctio fuga adipisci aliquid ut rerum mollitia commodi eligendi, asperiores nostrum unde blanditiis eveniet impedit labore, temporibus exercitationem, provident ab fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur est vitae repudiandae sequi illum, odio officiis? Quo nesciunt ipsam recusandae odit, dolores fuga incidunt repudiandae reprehenderit, amet numquam necessitatibus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, labore sapiente natus iste facilis eaque harum fuga recusandae dolores laborum iusto perspiciatis, numquam dignissimos blanditiis alias impedit ipsa. Unde?


borderize



border radius


mixin: uikit-media


mixin: uikit-sronly

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


mixin: uikit-outline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


mixin: uikit-focus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


function: uikit-space

uikit-space( 0.25 )
uikit-space( 0.5 )
uikit-space( 0.75 )
uikit-space( 1 )
uikit-space( 1.5 )
uikit-space( 2 )
uikit-space( 2.5 )
uikit-space( 3 )
uikit-space( 3.5 )
uikit-space( 4 )
uikit-space( 4.5 )
uikit-space( 5 )
uikit-space( 5.5 )

function: uikit-replace

uikit-replace('We love spaces for indentation', 'spaces', 'tabs'):

function: uikit-svguri


function: uikit-factorial

1! = 1:
2! = 2:
3! = 6:
4! = 24:
5! = 120:
6! = 720:

function: uikit-pow

53 = 125:
42 = 16:
4-2 = 0.0625:
40.2 = 1.31950791:

function: uikit-colour-luminance

Luminance of #000000 = 0:
Luminance of #663399 = 0.07492341:
Luminance of #ff69b4 = 0.34658438:
Luminance of #ffffff = 1:

function: uikit-color-contrast

#fff on #000 = 21:
#fff on #f00 = 4.0:
#000 on #f00 = 5.3:
#000 on #ff0 = 19.6:
#fff on #ff0 = 1.1:

colours main palette


colour contrasts main palette

The contrast of the main colors
White Background Hero Primary Secondary Border Link
White
Background
Hero
Primary
Secondary
Border
Text
White
Background
Hero
Primary
Secondary
Border
Hero
White
Background
Primary
Secondary
Border
Primary
White
Background
Hero
Secondary
Border
Secondary
White
Background
Hero
Primary
Border
Border
White
Background
Hero
Primary
Secondary

main colour palette tints

-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Hero
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Primary
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Secondary
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Background
90
80
70
60
50
40
30
20
10
5

-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Border
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
Text
90
80
70
60
50
40
30
20
10
5

colours notification palette


colour contrasts notification palette

The contrast of the secondary colors
White Background Error Success Warning Info
White
White
Background
Error
Success
Warning
Info
Text
White
Background
Error
Success
Warning
Info
Error
White
Background
Error
Success
Warning
Info
Success
White
Background
Error
Success
Warning
Info
Warning
White
Background
Error
Success
Warning
Info
Info
White
Background
Error
Success
Warning
Info

notification colour palette tints

-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
colour-Error
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
colour-Success
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
colour-Warning
90
80
70
60
50
40
30
20
10
5
-95
-90
-80
-70
-60
-50
-40
-30
-20
-10
colour-Info
90
80
70
60
50
40
30
20
10
5