functional-scss-lite

Lite CSS Functional/Utility/Atomic CSS library(2kB gzip)

Usage no npm install needed!

<script type="module">
  import functionalScssLite from 'https://cdn.skypack.dev/functional-scss-lite';
</script>

README

functional-scss-lite

Lite CSS Functional/Utility/Atomic CSS library(2kB gzip)

layout

position

relative
absolute
fixed
sticky
top-0 / right-0 / bottom-0 / left-0
inset-x-0 / inset-y-0
inset-0
top-50 / right-50 / bottom-50 / left-50
inset-x-50 / inset-y-50
inset-50

display

block
inline-block
inline
none
visible
invisible

margin(initial: 0, 8, 10, 16, 20, 24px)

m-0
mt-0
mr-0
mb-0
ml-0
mx-0
my-0

padding(initial: 0, 8, 10, 16, 20, 24px)

p-0
pt-0
pr-0
pb-0
pl-0
px-0
py-0

border

rounded-sm
rounded-md
rounded-lg
rounded-xl
circle
border-0
border-dashed
border-dotted
border-none

interactivity

select-none
select-text
select-all
select-auto
cursor-auto
cursor-default
cursor-pointer
cursor-wait
cursor-text
cursor-move
cursor-help
cursor-not-allowed

sizing

w-0
w-full
w-screen
h-0
h-full
h-screen

typography

weight

font-0
font-100
font-200
font-300
font-400
font-500
font-600
font-700
font-800
font-900

style

italic
regular
underline
line-through
underline-none
truncate
truncate-2
truncate-3
truncate-4
truncate-5

align

text-left
text-right
text-center
text-justify
align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom

white-space

nowrap
pre
pre-line
pre-wrap

flex

flex
inline-flex
flex-row
flex-col
flex-col-reverse
flex-row-reverse
flex-wrap
flex-nowrap
flex-wrap-reverse

layout