Dolyo CSS

Dolyo is a lightweight CSS utility library designed to provide a comprehensive set of classes for margin, padding, flexbox, grid, text styles, colors, borders, and more. It helps you quickly style your web projects without writing custom CSS. It is still under development.

Installation

npm i dolyocss

How to use!

Include in HTML

<link rel="stylesheet" href="node_modules/dolyocss/dist/style.min.css">

Import in JavaScript/TypeScript

import 'dolyocss/dist/style.min.css'; 

Available Classes

Dolyo provides a wide range of CSS utility classes, including but not limited to:

Margin
m-0: 0
m-1: 4px
m-2: 8px
m-3: 16px
m-4: 32px
m-5: 64px
mt-0: 0
mt-1: 4px
mt-2: 8px
mt-3: 16px
mt-4: 32px
mt-5: 64px
mr-0: 0
mr-1: 4px
mr-2: 8px
mr-3: 16px
mr-4: 32px
mr-5: 64px
mb-0: 0
mb-1: 4px
mb-2: 8px
mb-3: 16px
mb-4: 32px
mb-5: 64px
ml-0: 0
ml-1: 4px
ml-2: 8px
ml-3: 16px
ml-4: 32px
ml-5: 64px

Padding
p-0: 0
p-1: 4px
p-2: 8px
p-3: 16px
p-4: 32px
p-5: 64px
pt-0: 0
pt-1: 4px
pt-2: 8px
pt-3: 16px
pt-4: 32px
pt-5: 64px
pr-0: 0
pr-1: 4px
pr-2: 8px
pr-3: 16px
pr-4: 32px
pr-5: 64px
pb-0: 0
pb-1: 4px
pb-2: 8px
pb-3: 16px
pb-4: 32px
pb-5: 64px
pl-0: 0
pl-1: 4px
pl-2: 8px
pl-3: 16px
pl-4: 32px
pl-5: 64px

Horizontal Spacing (space-x)
space-x-0: 0
space-x-1: 4px
space-x-2: 8px
space-x-3: 16px
space-x-4: 32px
space-x-5: 64px

Vertical Spacing (space-y)
space-y-0: 0
space-y-1: 4px
space-y-2: 8px
space-y-3: 16px
space-y-4: 32px
space-y-5: 64px

Width
w-0: 0
w-1: 4px
w-2: 8px
w-3: 16px
w-4: 32px
w-5: 64px
w-25: 25%
w-50: 50%
w-75: 75%
w-100: 100%
max-w-0: 0
max-w-1: 4px
max-w-2: 8px
max-w-3: 16px
max-w-4: 32px
max-w-5: 64px
max-w-25: 25%
max-w-50: 50%
max-w-75: 75%
max-w-100: 100%
min-w-0: 0
min-w-1: 4px
min-w-2: 8px
min-w-3: 16px
min-w-4: 32px
min-w-5: 64px
min-w-25: 25%
min-w-50: 50%
min-w-75: 75%
min-w-100: 100%

Flex Container
flex: flex
flex-row: row
flex-column: column
flex-wrap: wrap
flex-nowrap: nowrap
flex-reverse: row-reverse
flex-column-reverse: column-reverse

Flex Alignment
justify-start: flex-start
justify-center: center
justify-end: flex-end
justify-between: space-between
justify-around: space-around
justify-evenly: space-evenly
align-start: flex-start
align-center: center
align-end: flex-end
align-baseline: baseline
align-stretch: stretch
align-self-auto: auto
align-self-start: flex-start
align-self-center: center
align-self-end: flex-end
align-self-baseline: baseline
align-self-stretch: stretch

Flex Grow and Shrink
flex-grow-0: 0
flex-grow-1: 1
flex-shrink-0: 0
flex-shrink-1: 1
flex-wrap-nowrap: nowrap
flex-wrap-wrap: wrap

Grid Container
grid: grid
grid-cols-1: repeat(1, 1fr)
grid-cols-2: repeat(2, 1fr)
grid-cols-3: repeat(3, 1fr)
grid-cols-4: repeat(4, 1fr)
grid-cols-5: repeat(5, 1fr)
grid-rows-1: repeat(1, 1fr)
grid-rows-2: repeat(2, 1fr)
grid-rows-3: repeat(3, 1fr)
grid-rows-4: repeat(4, 1fr)
grid-rows-5: repeat(5, 1fr)

Grid Gap 
gap-0: 0
gap-1: 4px
gap-2: 8px
gap-3: 16px
gap-4: 32px
gap-5: 64px

Grid Template Areas 
grid-template-areas: "header header" "sidebar content" "footer footer"

Grid Alignment
justify-items-start: start
justify-items-center: center
justify-items-end: end
justify-items-stretch: stretch
align-items-start: start
align-items-center: center
align-items-end: end
align-items-stretch: stretch
justify-content-start: start
justify-content-center: center
justify-content-end: end
justify-content-space-between: space-between
justify-content-space-around: space-around
justify-content-space-evenly: space-evenly
align-content-start: start
align-content-center: center
align-content-end: end
align-content-space-between: space-between
align-content-space-around: space-around
align-content-space-evenly: space-evenly

Background Colors
bg-red: red
bg-green: green
bg-blue: blue
bg-yellow: yellow
bg-black: black
bg-white: white
bg-gray: gray

Text Colors
text-red: red
text-green: green
text-blue: blue
text-yellow: yellow
text-black: black
text-white: white
text-gray: gray

Border Colors
border-red: red
border-green: green
border-blue: blue
border-yellow: yellow
border-black: black
border-white: white
border-gray: gray

Border Widths
border: 1px
border-0: 0
border-1: 1px
border-2: 2px
border-4: 4px
border-8: 8px
border-t-1: 1px
border-r-1: 1px
border-b-1: 1px
border-l-1: 1px
border-t-2: 2px
border-r-2: 2px
border-b-2: 2px
border-l-2: 2px
border-t-4: 4px
border-r-4: 4px
border-b-4: 4px
border-l-4: 4px
border-t-8: 8px
border-r-8: 8px
border-b-8: 8px
border-l-8: 8px

Border Styles
border-solid: solid
border-dashed: dashed
border-dotted: dotted
border-double: double
border-none: none

Border Radius
rounded-none: 0
rounded-sm: 0.125rem
rounded: 0.25rem
rounded-md: 0.375rem
rounded-lg: 0.5rem
rounded-xl: 0.75rem
rounded-2xl: 1rem
rounded-full: 9999px

Border Radius(Specific)
rounded-t: 0.25rem 0.25rem 0 0
rounded-r: 0 0.25rem 0.25rem 0
rounded-b: 0 0 0.25rem 0.25rem
rounded-l: 0.25rem 0 0 0.25rem
rounded-tl: 0.25rem 0 0 0
rounded-tr: 0 0.25rem 0 0
rounded-br: 0 0 0 0.25rem
rounded-bl: 0 0 0.25rem 0

Font-sizes
text-xs: 0.75rem /* 12px */
text-sm: 0.875rem /* 14px */
text-base: 1rem /* 16px */
text-lg: 1.125rem /* 18px */
text-xl: 1.25rem /* 20px */
text-2xl: 1.5rem /* 24px */
text-3xl: 1.875rem /* 30px */
text-4xl: 2.25rem /* 36px */
text-5xl: 3rem /* 48px */
text-6xl: 4rem /* 64px */

Font-weights
font-thin: 100
font-extralight: 200
font-light: 300
font-normal: 400
font-medium: 500
font-semibold: 600
font-bold: 700
font-extrabold: 800
font-black: 900

Text-alignment
text-left: left
text-center: center
text-right: right
text-justify: justify

Text-transform
uppercase: uppercase
lowercase: lowercase
capitalize: capitalize
normalcase: none

Text-decoration
underline: underline
line-through: line-through
no-underline: none

Letter-spacing
tracking-tighter: -0.05em
tracking-tight: -0.025em
tracking-normal: 0
tracking-wide: 0.025em
tracking-wider: 0.05em
tracking-widest: 0.1em

Line-height
leading-none: 1
leading-tight: 1.25
leading-snug: 1.375
leading-normal: 1.5
leading-relaxed: 1.625
leading-loose: 2