slippers-ui

Slippers

This repo has been built and maintained using macOS with some consideration for Windows machines. Linux support has not been tested. Feel free to open an issue if you have any questions.

Local Development Instructions

1. If you don't already, make sure you have yarn, node, and nvm installed (For windows, you will need to install nvm-windows, and git).
2. nvm install 15.4.0
3. nvm use 15.4.0
4. yarn to install storybook, tailwindcss, and their dependencies
5. yarn watch:css to watch for changes within html files within ./stories directory.
6. yarn storybook to run on port 6006
7. yarn build-storybook to build to /storybook-static directory

Storybook

Notes

• Storybook currently must use PostCSSv7, while Tailwindv2 is using PostCSSv8. Because of this, Tailwind was installed to be compatible with PostCSSv7. Tailwind Docs on compatibility.
• This contains an HTML community-maintained edition of Storybook. Because of that, much of Storybook is built and written with JS frameworks/Web Components in mind.

TailwindCSS

Notes

• Under the hood, TailwindCSS uses modern-normalize as CSS reset across browsers. Tailwind on Preflight.
• TailwindCSS was installed as a PostCSS Plugin. Tailwind Installation Instructions.
• Tailwind config lives within tailwind.config.js, were
• Recommended VSCode Extension: Tailwind CSS IntelliSense
• Building CSS without using CSSPurge makes CSS file 3.9MB in size.

PostCSS

Notes

• Autoprefixer: PostCSS Plugin adds ventor browser prefixes
• PostCSS Import: