see demo here.
mferwind css is not yet an npm package, so you'll need to manually grab the css file from this repo to make use of the framework.
Luckily, this is a super simple process!
To use mferwind in your project, copy the mferwind.css file into your project folder and link to it file in the head element of your html:
link rel="stylesheet" href="path/to/mferwind.css"
Make sure you also grab the file for the sartoshi script ( SartoshiScript-Regular.otf) to include in your project folder!
Now you can start using mferwind style classes right in your html, like this:
div class="bg-green sartoshi"
example text with above style classes applied
The example above provides a green background to the div and applies the sartoshi font family to any text present in the div.
--blue: Blue mfer background color (#5dd3ff).
--green: Green mfer background color (#cafe80).
--red: Red mfer background color (#ff7077).
--yellow: Yellow mfer background color (#ffe260).
--orange: Orange mfer background color (#ffb470).
--graveyard: Zombie mfer background color (#7c7c7c).
--space: Alien mfer background color (#898989).
--black: Black (#000000).
--white: White (#FFFFFF).
* Ape bg color is identical to the yellow, so it is not included here as a separate variable.
.sartoshi: Applies the 'sartoshi script' font family.
.monospace: Applies a monospace font family (Courier, etc).
.script: Applies a brush script/cursive font family.
.flex: Sets display property to flex.
.flex-r: Sets flex-direction to row.
.flex-c: Sets flex-direction to column.
.text-center: Centers text horizontally.
.text-right: Aligns text to the right.
.text-left: Aligns text to the left.
.items-center: Vertically aligns flex items to the center.
.items-start: Aligns flex items to the start of the container's cross axis.
.items-end: Aligns flex items to the end of the container's cross axis.
.items-baseline: Aligns flex items along their baseline.
.items-stretch: Stretches flex items to fill the container.
.between: Distributes items evenly with space between.
.around: Distributes items evenly with space around.
.evenly: Distributes items evenly with equal space around them.
.m-auto: Sets all margins to auto, centering the element within its container if it's a block element with a specified width.
.mx-auto: Sets the left and right margins to auto.
.my-auto: Sets the top and bottom margins to auto.
.m-0: Sets all margins to 0.
.m-s: Sets all margins to 5px.
.m-m: Sets all margins to 10px.
.m-l: Sets all margins to 15px.
.mb-0: Sets the bottom margin to 0.
.mb-s: Sets the bottom margin to 5px.
.mb-m: Sets the bottom margin to 10px.
.mb-l: Sets the bottom margin to 15px.
.mt-0: Sets the top margin to 0.
.mt-s: Sets the top margin to 5px.
.mt-m: Sets the top margin to 10px.
.mt-l: Sets the top margin to 15px.
.ml-0: Sets the left margin to 0.
.ml-s: Sets the left margin to 5px.
.ml-m: Sets the left margin to 10px.
.ml-l: Sets the left margin to 15px.
.mr-0: Sets the right margin to 0.
.mr-s: Sets the right margin to 5px.
.mr-m: Sets the right margin to 10px.
.mr-l: Sets the right margin to 15px.
.mx-0: Sets both the left and right margins to 0.
.mx-s: Sets both the left and right margins to 5px.
.mx-m: Sets both the left and right margins to 10px.
.mx-l: Sets both the left and right margins to 15px.
.my-0: Sets both the top and bottom margins to 0.
.my-s: Sets both the top and bottom margins to 5px.
.my-m: Sets both the top and bottom margins to 10px.
.my-l: Sets both the top and bottom margins to 15px.
.p-0: Sets all padding values to 0.
.p-s: Sets all padding values to 5px.
.p-m: Sets all padding values to 10px.
.p-l: Sets all padding values to 15px.
.p-xl: Sets all padding values to 20px.
.pb-0: Sets the bottom padding to 0.
.pb-s: Sets the bottom padding to 5px.
.pb-m: Sets the bottom padding to 10px.
.pb-l: Sets the bottom padding to 15px.
.pb-xl: Sets the bottom padding to 20px.
.pt-0: Sets the top padding to 0.
.pt-s: Sets the top padding to 5px.
.pt-m: Sets the top padding to 10px.
.pt-l: Sets the top padding to 15px.
.pt-xl: Sets the top padding to 20px.
.pl-0: Sets the left padding to 0.
.pl-s: Sets the left padding to 5px.
.pl-m: Sets the left padding to 10px.
.pl-l: Sets the left padding to 15px.
.pl-xl: Sets the left padding to 20px.
.pr-0: Sets the right padding to 0.
.pr-s: Sets the right padding to 5px.
.pr-m: Sets the right padding to 10px.
.pr-l: Sets the right padding to 15px.
.pr-xl: Sets the right padding to 20px.
.px-0: Sets both the left and right padding to 0.
.px-s: Sets both the left and right padding to 5px.
.px-m: Sets both the left and right padding to 10px.
.px-l: Sets both the left and right padding to 15px.
.px-xl: Sets both the left and right padding to 20px.
.py-0: Sets both the top and bottom padding to 0.
.py-s: Sets both the top and bottom padding to 5px.
.py-m: Sets both the top and bottom padding to 10px.
.py-l: Sets both the top and bottom padding to 15px.
.py-xl: Sets both the top and bottom padding to 20px.
.text-xs: Sets the font size to 0.875rem. This size is slightly smaller than the default text size, ideal for less prominent text.
.text-s: Sets the font size to 1rem, which is typically the standard text size (equivalent to 16px if the root font-size is 16px).
.text-m: Sets the font size to 1.25rem. This size is slightly larger than the default, suitable for moderately emphasized text.
.text-l: Sets the font size to 1.5rem. This size is larger, ideal for subheadings or important text.
.text-xl: Sets the font size to 2rem, which is significantly larger, suitable for main headings or key information.
.bg---blue: Applies a blue background color (#5dd3ff).
.bg-green: Applies a green background color (#cafe80).
.bg-red: Applies a red background color (#ff7077).
.bg-yellow: Applies a yellow background color (#ffe260).
.bg-orange: Applies an orange background color (#ffb470).
.bg-graveyard: Applies the zombie gray background color (#7c7c7c).
.bg-space: Applies the alien grey background color (#898989).
.bg-black: Applies a black background color (#000000).
.bg-white: Applies a white background color (#FFFFFF).
.text---blue: Sets the text color to the blue mfer background color (#5dd3ff).
.text-green: Sets the text color to the green mfer background color (#cafe80).
.text-red: Sets the text color to the red mfer background color (#ff7077).
.text-yellow: Sets the text color to the yellow mfer background color (#ffe260).
.text-orange: Sets the text color to the orange mfer background color (#ffb470).
.text-graveyard: Sets the text color to the zombie mfer background grey (#7c7c7c).
.text-space: Sets the text color to the alien mfer background grey (#898989).
.text-black: Sets the text color to black (#000000).
.text-white: Sets the text color to white (#FFFFFF).
.border-xs: Applies a border with a thickness of 1px.
.border-s: Applies a border with a thickness of 5px.
.border-m: Applies a border with a thickness of 8px.
.border-l: Applies a border with a thickness of 10px.
.border-xl: Applies a border with a thickness of 13px.
.solid: Applies a solid border style.
.dotted: Applies a dotted border style.
.dashed: Applies a dashed border style.
.double: Applies a double border style.
.groove: Applies a groove border style, giving the appearance of a carved line.
.ridge: Applies a ridge border style, giving the appearance of a protruding line.
.inset: Applies an inset border style, giving the appearance of an embedded element.
.outset: Applies an outset border style, giving the appearance of a raised element.
.border---blue: Applies a blue border color (#5dd3ff).
.border-green: Applies a green border color (#cafe80).
.border-red: Applies a red border color (#ff7077).
.border-yellow: Applies a yellow border color (#ffe260).
.border-orange: Applies an orange border color (#ffb470).
.border-graveyard: Applies the zombie grey color to the border (#7c7c7c).
.border-space: Applies the alien grey color to the border (#898989).
.border-black: Applies a black border color (#000000).
.border-white: Applies a white border color (#FFFFFF).
.radius-s: Applies a 5px border radius on all corners.
.radius-m: Applies a 10px border radius on all corners.
.radius-l: Applies a 15px border radius on all corners.
.radius-spicy: Applies a (2px 20px) border radius.
.radius-round: Applies a 50% border radius.
.rotate: Applies a 360 degree, 5-second infinite clockwise rotation.
.pulse: Applies a cute 2-second infinite grow-shrink animation.
.bounce: Applies a 1-second infinite smooth bouncing animation.
.fade-in: Applies a single 1-second animation from invisible to visible.
.slide-in: Applies a single 1-second horizontal translation from the left to the item's final location on the page.