How to use
Include it in your projects like this:
JS & CSS
<link rel="stylesheet" href="dist/layered.css">
<script src="http://jsdelivr.net/..."></script>JS & SASS
Install the library npm i @layered/layered-design
Then include it in your project
// main.scss
@import '~@layered/layered-design';Colors
Brand colors
#2A3EB7
primary
#2A3EB7
primary-light
#2A3EB7
primary-lighter
#FFB800
secondary
#FFB800
secondary-light
#FFB800
secondary-lighter
#FFB800
dark
#FFB800
gray
#FFB800
light
#FFB800
info
#FFB800
info-light
#FFB800
info-lighter
#FFB800
success
#FFB800
success-light
#FFB800
success-lighter
#FFB800
warning
#FFB800
warning-light
#FFB800
warning-lighter
#FFB800
danger
#FFB800
danger-light
#FFB800
danger-lighter
Named colors
#2A3EB7
blue
#6610f2
indigo
#6f42c1
purple
#e83e8c
pink
#FF7459
red
#fd7e14
orange
#ffc107
yellow
#8DD384
green
#20c997
teal
#17a2b8
cyan
To use the colors
In CSS use CSS variable with color name, ex: background-color: var(--bs-red);
For elements background use Bootstrap background utility, ex: class="bg-success"
For text color use Background text utility, ex: class="text-dark"
Learn more about usage in Bootstrap docs https://getbootstrap.com/docs/4.6/getting-started/theming/#color
Alerts
Badges
Standard
Primary Secondary Success Danger Warning Info Light Dark
Pills
Primary Secondary Success Danger Warning Info Light Dark
Outline
Primary Secondary Success Danger Warning Info Dark
Light
Primary Secondary Success Danger Warning Info
Buttons
Standard
Outline
Small
Large
Images
