Starry Night is a Sass utility library inspired by Vincent van Gogh's Starry Night.
You can install Starry Night Sass via npm:
npm install starry-night-sass
This documentation provides an overview of the CSS utilities generated from SASS mixins and functions.
-
.p-0
: Sets padding to 0. -
.p-1
to.p-5
: Sets padding in incremental steps. -
.px-0
and.py-0
to.px-5
and.py-5
: Sets padding on the x-axis (horizontal) and y-axis (vertical). -
.pl-0
to.pl-5
: Sets padding on the left. -
.pr-0
to.pr-5
: Sets padding on the right. -
.pt-0
to.pt-5
: Sets padding on the top. -
.pb-0
to.pb-5
: Sets padding on the bottom.
-
.m-0
: Sets margin to 0. -
.m-1
to.m-5
: Sets margin in incremental steps. -
.mx-0
and.my-0
to.mx-5
and.my-5
: Sets margin on the x-axis (horizontal) and y-axis (vertical). -
.ml-0
to.ml-5
: Sets margin on the left. -
.mr-0
to.mr-5
: Sets margin on the right. -
.mt-0
to.mt-5
: Sets margin on the top. -
.mb-0
to.mb-5
: Sets margin on the bottom.
-
.o-10
to.o-100
: Sets opacity in incremental steps.
-
.br-none
: Sets border radius to 0. -
.br-1
to.br-full
: Sets border radius in various sizes.
-
.shadow-none
: Sets box shadow to none. -
.shadow-1
to.shadow-4
: Sets box shadow in various sizes. -
.shadow-inner
: Sets box shadow inset.
-
.d-n
: Sets display to none. -
.d-b
,.d-i
,.d-i-b
: Sets display to block, inline, or inline-block, respectively. -
.d-f
: Sets display to flex respectively.
-
.p-static
: Sets postion to static. -
.p-absolute
: Sets postion to absolute. -
.p-relative
: Sets postion to reative. -
.p-fixed
: Sets postion to fixed. -
.p-sticky
: Sets postion to sticky.
-
.font-sm
to.font-xxl
: Sets font size in various sizes.
-
.fw-light
to.fw-bolder
: Sets font weight in various weights.
-
.w-25
,.w-50
,.w-75
,.w-100
: Sets width in percentage increments. -
.h-25
,.h-50
,.h-75
,.h-100
: Sets height in percentage increments.
-
.justify-center
,.justify-flex-end
,.justify-flex-start
,.justify-space-between
,.justify-space-around
: Justify content horizontally at center, end, start, space-between or space-around respectively. -
.align-items-center
,.align-items-end
,.align-items-start
,.align-items-baseline
,.align-stretch
: Aligns items vertically at center, end, start, baseline or stretch respectively.
-
.utility-breakpoints-value
: Sets utility to value based on breakpoints.
-
.utility-xs-value
: Sets utility to value from 0px. -
.utility-sm-value
: Sets utility to value from 576px. -
.utility-md-value
: Sets utility to value from 768px. -
.utility-lg-value
: Sets utility to value from 992px. -
.utility-xl-value
: Sets utility to value from 1200px. -
.utility-xxl-value
: Sets utility to value from 1400px.
Containers provide a structured layout for content. Different container sizes are defined based on breakpoints for responsive design.
Colors are defined for various elements such as text, backgrounds, and buttons.
-
.text-primary
-
Color: #3182CE
-
.text-light
-
Color: #F4F6F7
-
.text-dark
-
Color: #222
-
.text-secondary
-
Color: #555
-
.text-success
-
Color: #35A810
-
.text-danger
-
Color: #C41837
-
.text-warning
-
Color: #E8B70F
-
.text-purple
-
Color: #6324EC
-
.bg-primary
-
Color: #3182CE
-
.bg-light
-
Color: #F4F6F7
-
.bg-dark
-
Color: #222
-
.bg-secondary
-
Color: #555
-
.bg-success
-
Color: #35A810
-
.bg-danger
-
Color: #C41837
-
.bg-warning
-
Color: #E8B70F
-
.bg-purple
-
Color: #6324EC
-
.btn-solid-color
-
Background with color and 5% darken hover effect
-
.btn-outline-color
-
Text and border with color and hover effect with background color
-
.btn-ghost-color
-
Only text with color and hover effect with lighten color
-
.btn-link-color
-
Only text with color and hover effect with underline
-
.btn-xs
to.btn-xxl
: Sets button size in various sizes.