slippers-ui

Slippers Marketing Design System

Slippers is the open-source Marketing Web Design System. In the spirit of "everyone can contribute", creating guidelines that enable people to build better web pages faster makes more impactful work. Learn more about design systems.

Contributing

We're always looking for feedback to improve the experience of working with Slippers. We are actively welcoming contributions, no matter how small. Feel free to submit an issue or open a merge request! Even opening an issue oh how to help is more than welcome.

Requirements

• This repo has been built and maintained using macOS with consideration for Windows machines, with Linux not being officially supported.
• If you don't already, make sure you have yarn, node, and nvm installed (If you have a windows machine, you will need to addiitionally install nvm-windows, and git).

Local Development Instructions

1. Use nvm install to install the same version of node as listen in .nvmrc.
2. nvm use to allow nvm to match your working version of node to the one found within the repository.
3. yarn to install storybook, tailwindcss, and their dependencies
4. yarn start to watch for changes within vue files within ./stories directory on port 6006

Building Storybook

1. yarn build-storybook to build to /storybook-static directory

Build the Vue Library

To build the entire library, run

yarn build

We use Vue CLI to build our components using the library target. vue.config.js has some of the configuration options set up, and is extensible.

The yarn build command chains the Vue CLI script with the PostCSS script:

"build": "vue-cli-service build --target lib --name slippersComponents src/main.js && yarn build:css"

Right now we target src/main.js as the entrypoint for the library, which in turn pulls in components we manually specify. We extract (and ignore) CSS from this build, because after the Vue CLI runs its build process, PostCSS runs our Tailwind build step.

Dist files

The build step creates these files:

• dist/compiled.css: compiled CSS from PostCSS and Tailwind
• dist/demo.html: demo app from Vue CLI that shows how the library could be imported
• dist/slippersComponents.common.js: component bundle, for consumption by Webpack
• dist/slippersComponents.common.js.map: source map for Webpack component bundle
• dist/slippersComponents.umd.js: component bundle, for consumption by browsers or AMD loaders
• dist/slippersComponents.umd.js.map: source map for browser/AMD loader bundle
• dist/slippersComponents.umd.min.js: minified browser/AMD bundle
• dist/slippersComponents.umd.min.js.map: source map for minified browser/AMD bundle

Clean mode

The order of those build commands matters, since the build command in Vue CLI will automatically remove the dist/ folder first. We can disble this if need to change the ordering.

Technical Notes

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.
• TailwindCSS config lives within tailwind.config.js, where you can overide or extend TailwindCSS's default configuration
• Recommended VSCode Extension: Tailwind CSS IntelliSense
• Building CSS without using CSSPurge makes CSS file 3.9MB in size. With PurgeCSS (used by default), it's resonable to expect packages around 12kb.

PostCSS Notes

• Autoprefixer: PostCSS Plugin adds ventor browser prefixes
• PostCSS Import: PostCSS plugin transform @import rules to a single file