CoCreate utility CSS

CoCreate provides the most convenient utility class.

Usage

CoCreate utility Classes are very easy to use.

We can use exactly same class names with "style:value".

                                
<div class="padding:16px"></div>
<div class="font-size:0.5rem color:red"></div>
                                
                            

Main styles and values provided as utility classes are as follows.

direction

<div class="direction:ltr"></div>

ltr

rtl

display

<div class="display:block"></div>

block

inline-block

inline

none

inherit

table

table-cell

flex

overflow

<div class="overflow:auto"></div>

auto

visible

scroll

hidden

float

<div class="float:left"></div>

left

right

none

position

<div class="position:relative"></div>

inherit

relative

absolute

fixed

sticky

z-index

<div class="z-index:auto"></div>

auto

inherit

initial

-2

-5

1 ~ 15

100

101

111

1000

1111

top / bottom / left / right

<div class="top:auto"></div>

auto

0

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

bottom

<div class="bottom:auto"></div>

auto

0

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

left

<div class="left:auto"></div>

auto

0

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

right

<div class="right:auto"></div>

auto

0

1px ~ 50px

55px

60px

65px

...

100px

150px

200px

...

400px

-1px ~ -50px

-55px

-60px

-65px

...

-100px

-150px

-200px

...

-400px

height

<div class="height:0"></div>

0

1px ~ 10px

20px

30px

40px

45px

48px

50px

70px

80px

90px

100px

130px

150px

200px

250px

300px

350px

...

700px

auto

25%

33%

50%

66%

75%

100%

100%-120px

100vh-120px

100vh-100px

100vh-90px

100vh-70px

100vh-50px

80vh

90vh

100vh

fill-available

fit-content

min-height

<div class="min-height:100px"></div>

100px

200px

...

700px

max-height

<div class="max-height:300px"></div>

60px

100%

width

<div class="width:0"></div>

0

1px ~ 10px

15px

20px

25px

...

90px

100px

110px

120px

130px

150px

180px

200px

250px

300px

350px

...

1000px

10%

12%

15%

20%

25%

30%

35%

40%

41% ~ 50%

55%

60%

65%

70%

75%

80%

85%

90%

95%

100%

auto

unset

fill-available

min-width

<div class="min-width:75px"></div>

75px

100px

200px

250px

300px

max-width

<div class="max-width:300px"></div>

75px

100px

300px

400px

500px

600px

1050px

margin

<div class="margin:auto"></div>

auto

0

5px

10px

15px

...

100px

auto-lr(left & right)

0-lr

0px_5px

0px_10px

10px_5px

...

100px-lr

auto_0px(top & bottom)

0_0px

5px_0px

10px_0px

15px_0px

...

100px_0px

margin-top

<div class="margin=top:auto"></div>

auto

0

5px

10px

15px

...

100px

margin-bottom

<div class="margin-bottom:auto"></div>

auto

0

5px

10px

15px

...

100px

margin-left

<div class="margin-left:auto"></div>

auto

0

5px

10px

15px

...

100px

margin-right

<div class="margin-right:auto"></div>

auto

0

5px

10px

15px

...

100px

padding

<div class="padding:0"></div>

0

5px

10px

15px

...

100px

0_0px(top & bottom)

5px_0px

10px_0px

15px_0px

...

100px_0px

0-lr(left & right)

1px-lr ~ 10px_5px

20px-lr

20px_5px

30px-lr

...

100px-lr

padding-top

<div class="padding-top:0"></div>

0

5px

10px

15px

...

100px

padding-bottom

<div class="padding-bottom:15px"></div>

0

5px

10px

15px

...

100px

padding-left

<div class="padding-left:15px"></div>

0

5px

10px

15px

...

100px

padding-right

<div class="padding-right:15px"></div>

0

5px

10px

15px

...

100px

border-width

<div class="border-width:0"></div>

0

1px ~ 10px

20px

border-color

<div class="border-color:black"></div>

white

black

extra-dark-gray

medium-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

light-gray

light-pink

deep-pink

transparent-pink

border-style

<div class="border-style:dotted"></div>

dotted

dashed

solid

double

groove

ridge

inset

outset

none

hidden

transparent

border-radius

<div class="border-radius:0"></div>

0

1px ~ 10px

50px

50%

100%

font-size

<div class="font-size:18px"></div>

6px ~ 25px

30px

40px

50px

...

80px

01rem

02rem

03rem

04rem

05rem

1rem

2rem

font-weight

<div class="font-weight:800"></div>

100

200

300

...

900

bold

font-align

<div class="font-align:center"></div>

center

left

right

color

<div class="color:blue"></div>

white

black

extra-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

light-gray

light-gray

very-light-gray

deep-pink

light-blue

blue

text-overflow

<div class="text-overflow:ellipsis"></div>

ellipsis

text-transform

<div class="text-transform:uppercase"></div>

uppercase

text-decoration

<div class="text-decoration:underline"></div>

underline

background-attachment

<div class="background-attachment:scroll"></div>

scroll

fixed

local

initial

inherit

background-repeat

<div class="background-repeat:repeat"></div>

repeat

repeat-x

repeat-y

no-repeat

initial

inherit

background-size

<div class="background-size:auto"></div>

auto

cover

contain

initial

inherit

background-position

<div class="background-position:center"></div>

left-top

left-center

left-bottom

right-top

right-center

right-bottom

center

center-top

center-center

center-bottom

initial

inherit

bg (background)

<div class="background:blue"></div>

transparent

white

black

dark-blue

extra-dark-gray

dark-gray

extra-medium-gray

medium-gray

extra-light-gray

medium-light-gray

light-gray

very-light-gray

deep-pink

transparent-white

transparent-black

white-opacity

black-opacity

black-opacity-light

deep-pink-opacity

charcoal-gray

blue

background

<div class="background:black"></div>

transparent

white

black

dark-blue

opacity

<div class="opacity:block"></div>

0

0.1

0.2

0.3

...

0.9

1

cursor

<div class="cursor:auto"></div>

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

Demo