#Fairy.css

Heading

.h1 sample text

.h2 sample text

.h3 sample text

.h4 sample text

.h5 sample text

.h6 sample text

.h[number]

[number] 1 ~ 6 heading font size

1 : 3rem

2 : 2.25rem

3 : 1.5rem

4 : 1.25rem

5 : 1rem;

6 : 0.875rem

Grid

.grid: display: grid
.g-[number]: grid-column-start: [number]
.g-s-[number]: grid-column-start: span [number]
.g--[number]: grid-column-end: [number]
.g-s--[number]: grid-column-end: span [number]
.g-r[number]: grid-row-start: [number]
.g-s-r[number]: grid-row-start: span [number]
.g--r[number]: grid-row-end: [number]
.g-s--r[number]: grid-row-end: span [number]

[number] 1 ~ 12 grid axis: 1 : 3rem; 2 : 2.25rem; 3 : 1.5rem; 4 : 1.25rem; 5 : 1rem;; 6 : 0.875rem

.g-s-12

.g-s-11

.g-s-1

.g-s-10

.g-s-2

.g-s-9

.g-s-3

.g-s-8

.g-s-4

.g-s-7

.g-s-5

.g-s-6

.g-s-5

.g-s-7

.g-s-4

.g-s-8

.g-s-3

.g-s-9

.g-s-2

.g-s-10

.g-s-1

.g-s-11

.g-s-3

.g-s-4

.g-s-2

.g-s-1

gap

.g-s--3

.g-s-4

.gap-1

.g-s--3

.g-s-4

.g-s--3

.g-s-4

.gap-2

.g-s--3

.g-s-4

.g-s--3

.g-s-4

.gap-3

.g-s--3

.g-s-4

.g-s--3

.g-s-4

.gap-4

.g-s--3

.g-s-4

.g-s--3

.g-s-4

.gap-5

.g-s--3

.g-s-4

.g-s--3

.g-s-4

.gap-6

.g-s--3

.g-s-4

.grid.gap-[number]: [number]: 1 ~ 6; 1 : 3rem; 2 : 2.25rem; 3 : 1.5rem; 4 : 1.25rem; 5 : 1rem;; 6 : 0.875rem

Flex

.flex: display: flex
.f-g-[grow]: [grow]: 1 ~ 6 flex-grow: [grow]
.f-s-[shrink]: [shrink]: 1 ~ 6 flex-shrink: [shrink]
.f-g-[grow_from]-[grow_to]: hover [grow_from]: 1 ~ 6, [grow_to] 1 ~ 6
.f-ani.f-g-[grow_from]-[grow_to]: hover transition flex-grow

.f-g-2

.f-g-1

.f-s-2

.f-s-1

sampte 1

sampte 2

sampte 3

sampte 4

sampte 5

sampte 6

margin padding

Border

.bn

.ba

.bt

.br

.bb

.bl

.bt.bb

.bl.br

.b-t

.b-r

.b-b

.b-l

.ba.bw1

.ba.bw2

.ba.bw3

.ba.bw4

.ba.bw5

.ba.bw6

.b[n,a,t,r,b,l]

border-style: solid;

n: none;

a: solid;

t: top: solid;

r: right: solid;

b: bottom: solid;

l: left: solid;

.b-[t,r,b,l]

all - [t,r,b,l]

.b--[none, solid, dotted, dashed]

border-style

.bw[number]

[number] 1 ~ 6

1 : 0

2 : .125rem

3 : .25rem

4 : .5rem

5 : 1rem

6 : 2rem

Border radius

sample

.b-rad-1

sample

.b-rad-2

sample

.b-rad-3

sample

.b-rad-4

sample

.b-rad-5

.b-rad-[number]: [number] 1 ~ 5; 1: 1px;
2: 2px;
3: 4px;
4: 0.5rem;
5: 1rem;

Background grid

.bg-g-s-1

.bg-g-s-2

.bg-g-s-3

.bg-g-s-4

.bg-g-s-5

.bg-g-s-[number]: [number] 1 ~ 5; 1 : 10px; 2 : 15px; 3 : 20px; 4 : 25px; 5 : 30px

Color

Background, Color

.bg-[hue]: background-color: hls(hue, 100%, 50%)
.color-[hue]: color: hls(hue, 100%, 50%)
.bg-g-[lightness]: gray background-color: hls(0, 100%, 100/360*lightness %)
.color-c-[hue]: Set the color of the text to be easier to read on a specified background color.

Theme

[none]: standerd color
.dark .bg-[hue] .dark .color-[hue]: color: hls(hue, 100%, 30%)
.darkness .bg-[hue] .darkness .color-[hue]: color: hls(hue, 100%, 10%)
.light .bg-[hue] .light .color-[hue]: color: hls(hue, 100%, 70%)
.aurora .bg-[hue] .aurora .color-[hue]: color: hls(hue, 100%, 90%)
.gray .bg-[hue] .aurora .color-[hue]: color: hls(hue, 100%, 90%) to grayscale
.ostheme .osdark .oslight: prefers-color-scheme: dark | light

.darkness

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

.darkness

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

.dark

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

.dark

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

standard

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

standard

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

.light

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

light

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

.aurora

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

aurora

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

.aurora

.bg-0

.bg-10

.bg-20

.bg-30

.bg-40

.bg-50

.bg-60

.bg-70

.bg-80

.bg-90

.bg-100

.bg-110

.bg-120

.bg-130

.bg-140

.bg-150

.bg-160

.bg-170

.bg-180

.bg-190

.bg-200

.bg-210

.bg-220

.bg-230

.bg-240

.bg-250

.bg-260

.bg-270

.bg-280

.bg-290

.bg-300

.bg-310

.bg-320

.bg-330

.bg-340

.bg-350

.bg-360

aurora

.color-0

.color-10

.color-20

.color-30

.color-40

.color-50

.color-60

.color-70

.color-80

.color-90

.color-100

.color-110

.color-120

.color-130

.color-140

.color-150

.color-160

.color-170

.color-180

.color-190

.color-200

.color-210

.color-220

.color-230

.color-240

.color-250

.color-260

.color-270

.color-280

.color-290

.color-300

.color-310

.color-320

.color-330

.color-340

.color-350

.color-360

Contrast Color

.darkness

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

.dark

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

standard

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

.light

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

.aurora

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

.gray

.bg-0.color-c-0

.bg-10.color-c-10

.bg-20.color-c-20

.bg-30.color-c-30

.bg-40.color-c-40

.bg-50.color-c-50

.bg-60.color-c-60

.bg-70.color-c-70

.bg-80.color-c-80

.bg-90.color-c-90

.bg-100.color-c-100

.bg-110.color-c-110

.bg-120.color-c-120

.bg-130.color-c-130

.bg-140.color-c-140

.bg-150.color-c-150

.bg-160.color-c-160

.bg-170.color-c-170

.bg-180.color-c-180

.bg-190.color-c-190

.bg-200.color-c-200

.bg-210.color-c-210

.bg-220.color-c-220

.bg-230.color-c-230

.bg-240.color-c-240

.bg-250.color-c-250

.bg-260.color-c-260

.bg-270.color-c-270

.bg-280.color-c-280

.bg-290.color-c-290

.bg-300.color-c-300

.bg-310.color-c-310

.bg-320.color-c-320

.bg-330.color-c-330

.bg-340.color-c-340

.bg-350.color-c-350

.bg-360.color-c-360

no theme

■■■■■■■ standerd text
■■■■■■■ link color
■■■■■■■ link visited color
■■■■■■■ link active color
:link
:visited
:active

OS Theme .ostheme

■■■■■■■ standerd text
■■■■■■■ link color
■■■■■■■ link visited color
■■■■■■■ link active color
:link
:visited
:active

OS Dark Theme .osdark

■■■■■■■ standerd text
■■■■■■■ link color
■■■■■■■ link visited color
■■■■■■■ link active color
:link
:visited
:active

OS Light Theme .oslight

■■■■■■■ standerd text
■■■■■■■ link color
■■■■■■■ link visited color
■■■■■■■ link active color
:link
:visited
:active

start

Heading

Grid

gap

Flex

margin padding

Border

Border radius

Background grid

Color

Background, Color

Theme