CoCreate provides the most convenient helper class.
CoCreate Helper 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 helper classes are as follows.
<div class="direction:ltr"></div>ltr
rtl
<div class="display:block"></div>block
inline-block
inline
none
inherit
table
table-cell
flex
<div class="overflow:auto"></div>auto
visible
scroll
hidden
<div class="float:left"></div>left
right
none
<div class="position:relative"></div>inherit
relative
absolute
fixed
sticky
<div class="z-index:auto"></div>auto
inherit
initial
-2
-5
1 ~ 15
100
101
111
1000
1111
<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
<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
<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
<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
<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
<div class="min-height:100px"></div>100px
200px
...
700px
<div class="max-height:300px"></div>60px
100%
<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
<div class="min-width:75px"></div>75px
100px
200px
250px
300px
<div class="max-width:300px"></div>75px
100px
300px
400px
500px
600px
1050px
<div class="margin:auto"></div>auto
0
5px
10px
15px
...
100px
auto-lr(left & right)
0-lr
5px-lr
10px-lr
15px-lr
...
100px-lr
auto-tb(top & bottom)
0-tb
5px_0px
10px_0px
15px_0px
...
100px_0px
<div class="margin=top:auto"></div>auto
0
5px
10px
15px
...
100px
<div class="margin-bottom:auto"></div>auto
0
5px
10px
15px
...
100px
<div class="margin-left:auto"></div>auto
0
5px
10px
15px
...
100px
<div class="margin-right:auto"></div>auto
0
5px
10px
15px
...
100px
<div class="padding:0"></div>0
5px
10px
15px
...
100px
0-tb(top & bottom)
5px_0px
10px_0px
15px_0px
...
100px_0px
0-lr(left & right)
1px-lr ~ 15px-lr
20px-lr
25px-lr
30px-lr
...
100px-lr
<div class="padding-top:0"></div>0
5px
10px
15px
...
100px
<div class="padding-bottom:15px"></div>0
5px
10px
15px
...
100px
<div class="padding-left:15px"></div>0
5px
10px
15px
...
100px
<div class="padding-right:15px"></div>0
5px
10px
15px
...
100px
<div class="border-width:0"></div>0
1px ~ 10px
20px
<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
<div class="border-style:dotted"></div>dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
transparent
<div class="border-radius:0"></div>0
1px ~ 10px
50px
50%
100%
<div class="font-size:18px"></div>6px ~ 25px
30px
40px
50px
...
80px
01rem
02rem
03rem
04rem
05rem
1rem
2rem
<div class="font-weight:800"></div>100
200
300
...
900
bold
<div class="font-align:center"></div>center
left
right
<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
<div class="text-overflow:ellipsis"></div>ellipsis
<div class="text-transform:uppercase"></div>uppercase
<div class="text-decoration:underline"></div>underline
<div class="background-attachment:scroll"></div>scroll
fixed
local
initial
inherit
<div class="background-repeat:repeat"></div>repeat
repeat-x
repeat-y
no-repeat
initial
inherit
<div class="background-size:auto"></div>auto
cover
contain
initial
inherit
<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
<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
<div class="background:black"></div>transparent
white
black
dark-blue
<div class="opacity:block"></div>0
0.1
0.2
0.3
...
0.9
1
<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