preons
Version:
Functional css library and utility belt
875 lines (768 loc) • 20.9 kB
YAML
preons:
baseline: 1.6rem
rules:
theme-colors:
black: "#000000"
white: "#ffffff"
transparent: transparent
hotpinkxl: "#f188bc"
hotpinkl: "#f36fb0"
hotpink: "#ea2889"
hotpinkd: "#cc0f6d"
hotpinkxd: "#900148"
greyxl: "#f0f2ff"
greyl: "#dedbe2"
grey: "#b2b6ca"
greyd: "#5a5573"
greyxd: "#4d4c51"
yellowxl: "#f8f8b7"
yellowl: "#f1f16f"
yellow: "#eaea28"
yellowd: "#d6d615"
yellowxd: "#b2b211"
redxl: "#f3a6a6"
redl: "#ec7272"
red: "#e53e3e"
redd: "#cd1c1c"
redxd: "#991515"
purplexl: "#c493f4"
purplel: "#a65eef"
purple: "#8928ea"
purpled: "#6c13c4"
purplexd: "#5810a0"
orangexl: "#f4c493"
orangel: "#efa65e"
orange: "#ea8928"
oranged: "#d67515"
orangexd: "#b26211"
limexl: "#c4f493"
limel: "#a6ef5e"
lime: "#89ea28"
limed: "#6cc413"
limexd: "#4e8e0e"
lilacxl: "#f3effd"
lilacl: "#e6dff7"
lilac: "#c4b4ea"
lilacd: "#b3a0de"
lilacxd: "#988bb7"
greenxl: "#00ce00"
greenl: "#00a700"
green: "#008000"
greend: "#006c00"
greenxd: "#005900"
bluexl: "#99c8fb"
bluel: "#68a9f1"
blue: "#2889ea"
blued: "#126eca"
bluexd: "#0c59a7"
off-whitel: "#fbfbff"
off-white: "#f3f3f7"
off-whited: "#e4e7f7"
border-style:
solid: solid
dotted: dotted
dashed: dashed
list-style:
circle: circle
disc: disc
square: square
decimal: decimal
none: none
decimal-leading-zero: decimal-leading-zero
overflow:
scroll: scroll
hidden: hidden
visible: visible
auto: auto
none: none
scaled:
0: 0
1: $baseline * 1
2: $baseline * 2
3: $baseline * 3
4: $baseline * 4
5: $baseline * 5
6: $baseline * 6
7: $baseline * 7
8: $baseline * 8
9: $baseline * 9
10: $baseline * 10
11: $baseline * 11
12: $baseline * 12
negative-scaled:
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
# For font line-heights
baselined:
1: $baseline * 0.5
2: $baseline * 1
3: $baseline * 1.5
4: $baseline * 2
5: $baseline * 2.5
6: $baseline * 3
7: $baseline * 3.5
8: $baseline * 4
9: $baseline * 4.5
10: $baseline * 5
11: $baseline * 5.5
12: $baseline * 6
decimal:
0: 0
-10: .1
-20: .2
-30: .3
-40: .4
-50: .5
-60: .6
-70: .7
-80: .8
-90: .9
-100: 1
percentaged:
-5: 5%
-10: 10%
-15: 15%
-20: 20%
-25: 25%
-30: 30%
-35: 35%
-40: 40%
-45: 45%
-50: 50%
-55: 55%
-60: 60%
-65: 65%
-70: 70%
-75: 75%
-80: 80%
-85: 85%
-90: 90%
-95: 95%
-100: 100%
discrete-percentage:
-1-12: 100% / 12
-2-12: 100% / 12 * 2
-3-12: 100% / 12 * 3
-4-12: 100% / 12 * 4
-5-12: 100% / 12 * 5
-6-12: 100% / 12 * 6
-7-12: 100% / 12 * 7
-8-12: 100% / 12 * 8
-9-12: 100% / 12 * 9
-10-12: 100% / 12 * 10
-11-12: 100% / 12 * 11
-12-12: 100% / 12 * 12
special-sizes:
n: none
-au: auto
tiny:
0: 0
1: 1px
2: 2px
3: 3px
4: 4px
5: 5px
6: 6px
7: 7px
8: 8px
9: 9px
10: 10px
discrete:
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
vh:
-10vh: 10vh
-20vh: 20vh
-30vh: 30vh
-40vh: 40vh
-50vh: 50vh
-60vh: 60vh
-70vh: 70vh
-80vh: 80vh
-90vh: 90vh
-100vh: 100vh
vw:
-10vw: 10vw
-20vw: 20vw
-30vw: 30vw
-40vw: 40vw
-50vw: 50vw
-60vw: 60vw
-70vw: 70vw
-80vw: 80vw
-90vw: 90vw
-100vw: 100vw
negative-discrete:
-bigx: -16rem
-xbigx: 22rem
-xxbigx: -32rem
-xxxbigx: -44rem
-superx: -56rem
-xsuperx: -68rem
-xxsuperx: -80rem
-xxxsuperx: -100rem
alignment:
center: center
right: right
left: left
override:
0: 0
1: 1
2: 2
3: 3
4: 4
5: 5
10: 10
20: 20
30: 30
999: 999
9999: 9999
properties:
background-attachment:
class: bga-
values:
sc: scroll
fi: fixed
lo: local
in: initial
inherit: inherit
background-color:
class: bg-
rule: theme-colors
background-size:
class: bs-
values:
auto: auto
inherit: inherit
cover: cover
contain: contain
initial: initial
background-position:
class: bgp-
rule: alignment
background-position-x:
class: bgpx-
rule: alignment
background-position-y:
class: bgpy-
rule: alignment
background-repeat:
class: bgr-
values:
rx: repeat-x
rp: repeat
sp: space
ro: round
nr: no-repeat
border-bottom-width:
class: bwb
rule: tiny
border-top-width:
class: bwt
rule: tiny
border-right-width:
class: bwr
rule: tiny
border-left-width:
class: bwl
rule: tiny
border-width:
class: bwa
rule: tiny
border-bottom-color:
class: bcb-
rule: theme-colors
border-top-color:
class: bct-
rule: theme-colors
border-left-color:
class: bcl-
rule: theme-colors
border-right-color:
class: bcr-
rule: theme-colors
border-color:
class: bca-
rule: theme-colors
border-style:
class: bsa-
rule: border-style
border-bottom-style:
class: bsb-
rule: border-style
border-top-style:
class: bst-
rule: border-style
border-right-style:
class: bsr-
rule: border-style
border-left-style:
class: bsl-
rule: border-style
border-radius:
class: bra
values:
1: .5rem
2: 1rem
3: 2rem
4: 3rem
5: 4rem
6: 5rem
-50: 50%
clear:
class: c
values:
b: both
color:
class:
rule: theme-colors
cursor:
class:
values:
pointer: pointer
help: help
wait: wait
crosshair: crosshair
not-allowed: not-allowed
zoom-in: zoom-in
grab: grab
display:
class: d-
values:
bl: block
in: inline
inbl: inline-block
ta: table
fl: flex
infl: inline-flex
no: none
float:
class: fl
values:
r: right
l: left
n: none
font-family:
class: ff-
values:
raleway: "#{Raleway, sans-serif}"
exo: "#{Exo, sans-serif}"
josefin: "#{'Josefin Sans', sans-serif}"
kanit: "#{'Kanit', sans-serif}"
martel: "#{'Martel', serif}"
prompt: "#{'Prompt', sans-serif}"
roboto-mono: "#{'Roboto Monp', monospace}"
font-size:
class: fs
values:
1: .90rem
2: 1.2rem
3: 1.60rem
4: 2.133rem
5: 2.843rem
6: 3.790rem
7: 5.522rem
8: 6.734rem
9: 8.976rem
10: 11.966rem
font-style:
class: fst-
values:
no: normal
it: italic
font-weight:
class: fw
values:
l: 300
n: 400
b: 700
1: 100
2: 200
3: 300
4: 400
5: 500
6: 600
7: 700
8: 800
9: 900
height:
class: h
rule:
- scaled
- percentaged
- discrete-percentage
- discrete
- special-sizes
- vh
max-height:
class: maxh
rule:
- percentaged
- discrete
- special-sizes
min-height:
class: minh
rule:
- percentaged
- discrete
- special-sizes
width:
class: w
rule:
- scaled
- percentaged
- discrete-percentage
- discrete
- special-sizes
- vw
max-width:
class: maxw
rule:
- percentaged
- discrete
- special-sizes
min-width:
class: minw
rule:
- scaled
- percentaged
- discrete
- special-sizes
bottom:
class: b
rule:
- scaled
- negative-scaled
- percentaged
- discrete
left:
class: l
rule:
- scaled
- negative-scaled
- percentaged
- discrete
top:
class: t
rule:
- scaled
- negative-scaled
- percentaged
- discrete
right:
class: r
rule:
- scaled
- negative-scaled
- percentaged
- discrete
letter-spacing:
class: ls
values:
1: 1px
2: 2px
3: 3px
4: 4px
line-height:
class: lh
rule: baselined
list-style-type:
class: lst-
rule: list-style
margin:
class: ma
rule:
- scaled
- special-sizes
- percentaged
- discrete
- negative-scaled
margin-bottom:
class: mb
rule:
- scaled
- special-sizes
- percentaged
- discrete
- negative-scaled
margin-left:
class: ml
rule:
- scaled
- special-sizes
- percentaged
- discrete
- negative-scaled
margin-right:
class: mr
rule:
- scaled
- special-sizes
- percentaged
- discrete
- negative-scaled
margin-top:
class: mt
rule:
- scaled
- special-sizes
- percentaged
- discrete
- negative-scaled
object-fit:
class: of-
values:
fill: fill
contain: contain
cover: cover
scale-down: scale-down
none: none
opacity:
class: o
rule: decimal
overflow:
class:
rule: overflow
overflow-x:
class: x-
rule: overflow
overflow-y:
class: y-
rule: overflow
padding:
class: pa
rule:
- scaled
- discrete
padding-bottom:
class: pb
rule:
- scaled
- discrete
padding-left:
class: pl
rule:
- scaled
- discrete
padding-right:
class: pr
rule:
- scaled
- discrete
padding-top:
class: pt
rule:
- scaled
- discrete
position:
class:
values:
relative: relative
absolute: absolute
fixed: fixed
sticky: sticky
stroke-dasharray: null
stroke-dashoffset: null
stroke-width: null
text-align:
class:
rule: alignment
text-decoration:
class: td-
values:
no: none
un: underline
text-indent: null
text-transform:
class: tt-
values:
no: none
up: uppercase
ca: capitalize
lo: lowercase
transform:
class: tr-
values:
0: 0
performance: translate3d(0,0,0)
# X
translate-a50x: translate(-50%, -50%)
translate-x10x: translateX(-10%)
translate-x20x: translateX(-20%)
translate-x30x: translateX(-30%)
translate-x40x: translateX(-40%)
translate-x50x: translateX(-50%)
translate-x60x: translateX(-60%)
translate-x70x: translateX(-70%)
translate-x80x: translateX(-80%)
translate-x90x: translateX(-90%)
translate-x100x: translateX(-100%)
translate-x10: translateX(10%)
translate-x20: translateX(20%)
translate-x30: translateX(30%)
translate-x40: translateX(40%)
translate-x50: translateX(50%)
translate-x60: translateX(60%)
translate-x70: translateX(70%)
translate-x80: translateX(80%)
translate-x90: translateX(90%)
translate-x100: translateX(100%)
# Y
translate-y10x: translateY(-10%)
translate-y20x: translateY(-20%)
translate-y30x: translateY(-30%)
translate-y40x: translateY(-40%)
translate-y50x: translateY(-50%)
translate-y60x: translateY(-60%)
translate-y70x: translateY(-70%)
translate-y80x: translateY(-80%)
translate-y90x: translateY(-90%)
translate-y100x: translateY(-100%)
translate-y10: translateY(10%)
translate-y20: translateY(20%)
translate-y30: translateY(30%)
translate-y40: translateY(40%)
translate-y50: translateY(50%)
translate-y60: translateY(60%)
translate-y70: translateY(70%)
translate-y80: translateY(80%)
translate-y90: translateY(90%)
translate-y100: translateY(100%)
transition:
class: ts-
values:
transform: transform 0.4s
no: none
vertical-align:
class: va-
values:
bo: bottom
mi: middle
to: top
visibility:
class: v-
values:
hidden: hidden
visible: visible
z-index:
class: z
rule: override
flex-basis:
class: basis
rule:
- percentaged
- discrete-percentage
flex-direction:
class:
values:
row: row
row-reverse: row-reverse
column: column
column-reverse: column-reverse
flex-grow:
class: grow-
rule:
- override
flex-shrink:
class: shrink-
rule:
- override
flex-wrap:
class:
values:
nowrap: nowrap
wrap: wrap
wrap-reverse: wrap-reverse
box-sizing:
class: box-
values:
bo: border-box
co: content-box
align-items:
class: ai-
values:
start: flex-start
end: flex-end
center: center
baseline: baseline
stretch: stretch
align-self:
class: as-
values:
start: flex-start
end: flex-end
center: center
baseline: baseline
stretch: stretch
align-content:
class: ac-
values:
start: flex-start
end: flex-end
center: center
between: space-between
around: space-around
stretch: stretch
justify-items:
class: ji-
values:
start: flex-start
end: flex-end
center: center
baseline: baseline
stretch: stretch
justify-self:
class: js-
values:
start: flex-start
end: flex-end
center: center
baseline: baseline
stretch: stretch
justify-content:
class: jc-
values:
start: flex-start
end: flex-end
center: center
between: space-between
around: space-around
stretch: stretch
box-shadow:
class: bxsh-
values:
greyl: "-1px 5px 15px -5px #6c67a073"
grey: "0px 3px 5px #6c67a0"
greyd: "0px 3px 5px #0a0913"
no: "none"
clip:
class: clip
values:
hide: "rect(0 0 0 0)"
# Preon breakpoints
breakpoints:
m: 768px
l: 1024px