A great question you may find yourself asking is why do this at all? There is tailwind and there are lots of parts built into Bootstrap already. Its true that Tailwind is great, however we predominantly use Bootstrap and its utlities are lacking. This collection of animations, utilities, and small bonus pieces are all built around Bootstrap's variables ensuring that anything added follows suit with the standard Bootstrap feel. This to us covers 95% of the needed aspects of designing and making any modern website.
npm i @grafite/bootstrap-magic-extras
All classes follow a simple format. bmx as the prefix, then the specific class details then hover and or gpu appended to the end to get more accurate.
Animations can have a duration and delay set for them. By default all animations have a 0s delay and a 1s duration.
<div class="bmx-animation-duration-8 bmx-animation-delay-3 bmx-bounce">Animated Div</div>
"200": 200ms, "500": 500ms, "2": 2s, "3": 3s, "4": 4s, "5": 5s, "6": 6s, "7": 7s, "8": 8s, "9": 9s, "10": 10s
<p class="bmx-bounce">Just Bounce</p> <p class="bmx-bounce-in">Bounce into visibility</p> <p class="bmx-bounce-hover">Bounce on Hover</p>
<p class="bmx-fade-in">Just fade in</p> <p class="bmx-fade-in-hover">Fade in on Hover</p> <p class="bmx-fade-out">Just fade out</p> <p class="bmx-fade-out-hover">Fade out on hover</p>
<p class="bmx-hinge">Just hinge</p> <p class="bmx-hinge-hover">Hinge on Hover</p>
<p class="bmx-pulse">Just pulse</p> <p class="bmx-pulse-hover">Pulse on Hover</p>
<p class="bmx-rubber-band">Just rubber-band</p> <p class="bmx-rubber-band-hover">Rubber-band on Hover</p>
<p class="bmx-shake-x">Just shake X axis</p> <p class="bmx-shake-x-hover">Shake X axis on Hover</p> <p class="bmx-shake-y">Just shake Y axis</p> <p class="bmx-shake-y-hover">Shake Y axis on Hover</p>
<p class="bmx-swing">Just swing</p> <p class="bmx-swing-hover">Swing on Hover</p>
<p class="bmx-slide-in-down">Slide in down</p>
<p class="bmx-tada">Just tada</p> <p class="bmx-tada-hover">Tada on Hover</p>
<p class="bmx-zoom-in">Zoom in</p>
Anything color related has the following colors, which are set by Bootstrap variables:
white black blue indigo purple pink red orange yellow green teal cyan gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900
The core hued colors (blue through cyan) also ship with -light and -dark variants, mapped to Bootstrap's -200 and -700 shades respectively:
blue-light, blue-dark indigo-light, indigo-dark purple-light, purple-dark pink-light, pink-dark red-light, red-dark orange-light, orange-dark yellow-light, yellow-dark green-light, green-dark teal-light, teal-dark cyan-light, cyan-dark
Your theme and brand colors are available as well:
primary secondary info brand-primary brand-secondary brand-terciary
<p class="bmx-bg-black">Black BG</p> <p class="bmx-bg-black-hover">Black BG on Hover</p>
Borders range in size from 1px to 10px.
<p class="bmx-border-3">3px border</p> <p class="bmx-border-3-hover">3px border on hover</p> <p class="bmx-border-black">Black border</p> <p class="bmx-border-black-hover">Black border on hover</p>
<button class="bmx-btn-indigo">Indigo button</button> <button class="bmx-btn-outline-indigo">indigo border on hover</button>
<img src="picture.png" class="bmx-pointer">
Heights come in three families — height, min-height, and max-height — each with both rem and viewport-height (vh) scales:
h-{n} // height in rem (h-1 to h-36)
min-h-{n} // min-height in rem (min-h-1 to min-h-36)
max-h-{n} // max-height in rem (max-h-1 to max-h-36)
vh-{n} // height in vh: 20, 25, 30, 50, 75, 80, 100
min-vh-{n} // min-height in vh: 20, 25, 30, 50, 75, 80, 100
max-vh-{n} // max-height in vh: 25, 50, 75, 100
<div class="bmx-min-h-25"></div> <div class="bmx-h-24"></div> <div class="bmx-max-h-30"></div> <div class="bmx-vh-75"></div>
Widths mirror the heights, offering width, min-width, and max-width in both percentage and rem scales. The -f- infix denotes fixed rem values:
w-{n} // percentage width: 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100
w-f-{n} // fixed width in rem (w-f-1 to w-f-30)
min-w-{n} // min-width percentage / min-w-f-{n} fixed rem
max-w-{n} // max-width percentage / max-w-f-{n} fixed rem
<div class="bmx-w-50"></div> <div class="bmx-w-f-20"></div> <div class="bmx-max-w-75"></div>
All margins and padding follow Bootstrap style with m, mt, mb, mr, ml, my, mx and add a full range of rem values. The available steps are:
1 - 10, 12, 14, 16, 18, 20
<div class="bmx-m-7"></div> <div class="bmx-py-9"></div>
<img src="picture.png" class="bmx-drop-shadow"> <img src="picture.png" class="bmx-drop-shadow-hover">
Constrain overflow on a single axis:
<div class="bmx-overflow-x-hidden"></div> <div class="bmx-overflow-y-hidden"></div> <div class="bmx-overflow-x-scroll"></div> <div class="bmx-overflow-y-scroll"></div>
Layer elements with the following z-index scale:
"n2": -10 "n1": -1 "0": 0 "1": 10 "2": 100 "3": 1000 "4": 10000 "5": 20000
<div class="bmx-z-3"></div> <div class="bmx-z-n1"></div>
Style list markers without manual CSS:
<ul class="unmarked-list">...</ul> <!-- no marker --> <ul class="check-list">...</ul> <!-- ✔ marker --> <ul class="denied-list">...</ul> <!-- ✗ marker -->
The table-carded class restyles a table so each row reads as a separated, shadowed card.
<table class="table table-carded">...</table>
Opacities help you access a further range of exising colors defined by your Bootstrap config. The following percentage keys are available by default.
0 5 10 20 25 30 40 50 60 70 75 80 90 95 100
<p class="bmx-text-blue">blue text</p> <p class="bmx-text-opacity-80">blue text at 80% opacity</p> <p class="bmx-link-blue">blue link style with hover etc.</p> <p class="bmx-td-non-hover">No text decoration on hover</p> <p class="bmx-td-underline">Underline the text</p> <p class="bmx-td-underline-hover">Underline the text on hover</p>
The following font sizes, weights and line heights are available.
Font Sizes:
"15": 10rem "14": 9rem "13": 8rem "12": 7rem "11": 6rem "10": 5rem "9": 4.5rem "8": 4rem "7": 3.5rem "6": 3rem "5": 2.5rem "4": 2rem "3": 1.75rem "2": 1.5rem "1": 1.25rem "sm": 0.85rem "xs": 0.50rem "xxs": 0.25rem
Font Weights
"b": bold "l": lighter "100": 100 "200": 200 "300": 300 "400": 400 "500": 500 "600": 600 "700": 700 "800": 800 "900": 900
Line Heights
"10": 5rem "9": 4.5rem "8": 4rem "7": 3.5rem "6": 3rem "5": 2.5rem "4": 2rem "3": 1.75rem "2": 1.5rem "1": 1.25rem
<p class="bmx-fs-2">Font size of 2rem</p> <p class="bmx-fw-b">Font weight of bold</p> <p class="bmx-fw-l">Font weight of lighter</p> <p class="bmx-fw-300">Font weight of 300</p> <p class="bmx-lh-4">Line height of 4rem</p> <p class="bmx-f-mono">Mono font family</p>
Transitions use the default $transition-base variable from Bootstrap.
The following are the blur scopes:
"0": 0px "1": 3px "2": 6px "3": 18px "4": 72px
<img src="picture.png" class="bmx-blur-3"> <img src="picture.png" class="bmx-blur-0-hover">
The following are rotate scopes:
"0": 0deg "1": 45deg "2": 90deg "3": 180deg "4": 270deg
<img src="picture.png" class="bmx-rotate-3"> <img src="picture.png" class="bmx-rotate-0-hover">
The following are scale scopes:
"0": 1.00 "1": 1.05 "2": 1.15 "3": 1.30 "4": 1.50
<img src="picture.png" class="bmx-scale-3"> <img src="picture.png" class="bmx-scale-0-hover">
The specials use the skew transform method.
The skews and slants use the following default scopes:
"1": 1deg "2": 2deg "3": 3deg "4": 4deg "5": 5deg "6": 6deg "7": 7deg "8": 8deg "9": 9deg "10": 10deg
<div class="bmx-h-12 bmx-bg-indigo bmx-skew-5">This div is skewed by 5deg.</div>
Slants use before and after content components,
<div class="bmx-h-12 bmx-bg-indigo bmx-slant-top-n5 bmx-slant-bottom-n5">Has a top and bottom slant</div>
There are a few general variables you can set for your use cases. The thing to note here is that the height class bmx-min-h-window does the calculation of the window height minus the header and footer assuming that your using sticky or fixed headers and footers.
$bmx-header-height: 52px; $bmx-footer-height: 52px; $bmx-mono-font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;