#Fairy.css

Grid Flex toolkit

GitHub : mafumafuultu/fairy.css
Demo : fairly.css

Get started

<link rel="stylesheet" href="./fairy.css">

Compile less

Release

lessc ./pack.main.less fairy.css -x

Debug

lessc ./pack.main.less fairy.debug.css

index

Heading
Grid
- gap
Flex
Box
- margin
- padding
- width
Border
- border radius
- background grid
Color
- Background
- Color
- Theme
Debug

Heading

`.f[level], .h[level], h[level]`

[level]	font-size
1	3rem
2	2.25rem
3	1.5rem
4	1.25rem
5	1rem
6	0.875rem

<div class="h1">.h1 sample text</div>
<div class="h2">.h2 sample text</div>
<div class="h3">.h3 sample text</div>
<div class="h4">.h4 sample text</div>
<div class="h5">.h5 sample text</div>
<div class="h6">.h6 sample text</div>

Grid

Grid axis 1 - 13
Grid trac 1 - 12
[number] : 1 - 12

`.grid`

<div class="grid"></div>

.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]

<div class="grid">
	<div class="g-1"></div>
	<div class="g-s-1"></div>
	<div class="g--1"></div>
	<div class="g-s--1"></div>

	<div class="g-r1"></div>
	<div class="g-s-r1"></div>
	<div class="g--r1"></div>
	<div class="g-s--r1"></div>
</div>

gap

`.gap-[level]`

grid-gap

[level]	`grid-gap`
1	3rem
2	2.25rem
3	1.5rem
4	1.25rem
5	1rem
6	0.875rem

<div class="grid gap-3">
	<div class="g-s-1"></div>
	<div class="g-s-1"></div>
	<div class="g-s-1"></div>
	<div class="g-s-1"></div>
</div>

Flex

`.flex`

<div class="flex"></div>

.flex { display: flex }

`.f-g-[grow]`

flex-grow: [grow]

`.f-s-[shrink]`

flex-shrink: [shrink]

`.f-g-[grow_from]-[grow_to]`

.f-g-1-4 {flex-grow: 1}
.f-g-1-4:hover {flex-grow: 4}

`.f-ani.f-g-[grow_from]-[grow_to]`

.f-ani {transition: flex-grow 200ms ease-in-out 100ms ;}

number	range
[grow]	1 ~ 12
[shrink]	1 ~ 6
[grow_from]	1 ~ 6
[grow_to]	1 ~ 6

Box

margin

[number]	size
1	0
2	.125rem
3	.25rem
4	.5rem
5	1rem
6	2rem

`.mar-[angle]-[number]`

[number]: 1 ~ 6

[angle]	top	right	bottom	left	class
a	o	o	o	o	`.mar-a-[number]`
t	o				`.mar-t-[number]`
r		o			`.mar-r-[number]`
b			o		`.mar-b-[number]`
l				o	`.mar-l-[number]`
tb	o		o		`.mar-tb-[number]`
lr		o		o	`.mar-lr-[number]`
a-	o	o	o	o	`.mar-a--[number]`

<div class="mar-a-1"></div>

`.mar-a--[number]`

<div class="mar-a--1">
	<div>target</div>
</div>

padding

[number]: 1 ~ 6

[angle]	top	right	bottom	left	class
a	o	o	o	o	`.pad-a-[number]`
t	o				`.pad-t-[number]`
r		o			`.pad-r-[number]`
b			o		`.pad-b-[number]`
l				o	`.pad-l-[number]`
tb	o		o		`.pad-tb-[number]`
lr		o		o	`.pad-lr-[number]`
a-	o	o	o	o	`.pad-a--[number]`

<div class="pad-a-1"></div>

`.pad-a--[number]`

<div class="pad-a--1">
	<div>target</div>
</div>

width

`.w-[number]`

[number]: from 0 to 100 step 10
unit: %

<div class="w-100"></div>

Border

target angle

default style	top	right	bottom	left	class
none					`.bn`
solid	o	o	o	o	`.ba`
solid	o				`.bt`
solid		o			`.br`
solid			o		`.bb`
solid				o	`.bl`
solid		o	o	o	`.b-t`
solid	o		o	o	`.b-r`
solid	o	o		o	`.b-b`
solid	o	o	o		`.b-l`

<div class="bn"></div>
<div class="ba"></div>
<div class="bt"></div>
<div class="br"></div>
<div class="bb"></div>
<div class="bl"></div>

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

border-style

<div class="b--none"></div>
<div class="b--solid"></div>
<div class="b--dotted"></div>
<div class="b--dashed"></div>

`.bw[number]`

border-width

[number]	border-width
1	0
2	.125rem
3	.25rem
4	.5rem
5	1rem
6	2rem

border radius

`.b-rad-[number]`

[number]	border-radius
1	1px
2	2px
3	4px
4	.5rem
5	1rem

background grid

Display a grid of ruled lines on the background

`.bg-g-s[number]`

[number]	span
1	10px
2	15px
3	20px
4	25px
5	30px

Color

Specifying a color based on HSL

hsl	default value
[hue]	from=0, to=360, step=10
[saturation]	100%
[lightness]	50%

Background

`.bg-[hue]`

<div class="bg-0"></div>
<div class="bg-10"></div>
<div class="bg-20"></div>

Color

text color

`.color-[hue]`

<div class="color-0">text</div>
<div class="color-10">text</div>
<div class="color-20">text</div>

`.color-c-[hue]`

Set the color of the text to be easier to read on a specified background color.

<div class="darkness bg-0 color-c-0">text color white</div>
<div class="aurora bg-0 color-c-0">text color black</div>

Theme

class	[lightness]
`.darkness`	10%
`.dark`	30%
`.light`	70%
`.aurora`	90%

class	[saturation]
`.gray`	0%

class	mode
`no theme`	light mode
`.ostheme`	dark OR light mode
`.osdark`	dark mode
`.oslight`	light mode

<div class="darkness bg-0">darkness</div>
<div class="dark bg-10">dark</div>
<div class="bg-20">standard</div>
<div class="light bg-30">light</div>
<div class="aurora bg-40">aurora</div>
<div class="gray bg-50">aurora</div>
<div class="ostheme">
	<p>ostheme</p>
	<span style="color:var(--link-base);">■■■■■■■ link color</span><br>
	<span style="color:var(--link-visited);">■■■■■■■ link visited color</span><br>
	<span style="color:var(--link-active);">■■■■■■■ link active color</span><br>
	<a href="#" class="link">:link</a><br>
	<a href="#" class="visited">:visited</a><br>
	<a href="#" class="active">:active</a>
</div>
<div class="osdark">
	<p>osdark</p>
	<span style="color:var(--link-base);">■■■■■■■ link color</span><br>
	<span style="color:var(--link-visited);">■■■■■■■ link visited color</span><br>
	<span style="color:var(--link-active);">■■■■■■■ link active color</span><br>
	<a href="#" class="link">:link</a><br>
	<a href="#" class="visited">:visited</a><br>
	<a href="#" class="active">:active</a>
</div>
<div class="oslight">
	<p>oslight</p>
	<span style="color:var(--link-base);">■■■■■■■ link color</span><br>
	<span style="color:var(--link-visited);">■■■■■■■ link visited color</span><br>
	<span style="color:var(--link-active);">■■■■■■■ link active color</span><br>
	<a href="#" class="link">:link</a><br>
	<a href="#" class="visited">:visited</a><br>
	<a href="#" class="active">:active</a>
</div>

Debug

`.debug`

.debug > * {border: solid .5px #000;}

fairy.css

#Fairy.css

Get started

Compile less

index

Heading

.f[level], .h[level], h[level]

Grid

.grid

.g-[number]

.g-s-[number]

.g--[number]

.g-s--[number]

.g-r[number]

.g-s-r[number]

.g--r[number]

.g-s--r[number]

gap

.gap-[level]

Flex

.flex

.f-g-[grow]

.f-s-[shrink]

.f-g-[grow_from]-[grow_to]

.f-ani.f-g-[grow_from]-[grow_to]

Box

margin

.mar-[angle]-[number]

.mar-a--[number]

padding

.pad-a--[number]

width

.w-[number]

Border

target angle

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

.bw[number]

border radius

.b-rad-[number]

background grid

.bg-g-s[number]

Color

Background

.bg-[hue]

Color

.color-[hue]

.color-c-[hue]

Theme

Debug

.debug

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`.f[level], .h[level], h[level]`

`.grid`

`.g-[number]`

`.g-s-[number]`

`.g--[number]`

`.g-s--[number]`

`.g-r[number]`

`.g-s-r[number]`

`.g--r[number]`

`.g-s--r[number]`

`.gap-[level]`

`.flex`

`.f-g-[grow]`

`.f-s-[shrink]`

`.f-g-[grow_from]-[grow_to]`

`.f-ani.f-g-[grow_from]-[grow_to]`

`.mar-[angle]-[number]`

`.mar-a--[number]`

`.pad-a--[number]`

`.w-[number]`

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

`.bw[number]`

`.b-rad-[number]`

`.bg-g-s[number]`

`.bg-[hue]`

`.color-[hue]`

`.color-c-[hue]`

`.debug`

Weekly Downloads