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