fairy.css v1.0.1

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

<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

<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 ;}

Box

margin

.mar-[angle]-[number]

number: 1 ~ 6

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

.mar-a--[number]

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

padding

• number: 1 ~ 6

<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

<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

border radius

.b-rad-[number]

background grid

Display a grid of ruled lines on the background

.bg-g-s[number]

Color

Specifying a color based on HSL

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

<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;}