PADI Design System is tool for building PADI UI with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.
The tool is built on top of Vue.js, Vue Styleguidist, Vite, and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, PostCSS, SCSS & JavaScript.
- A set of interconnected patterns & practices for you and your team.
- A well thought-out terminology, naming conventions, and hierarchy.
- Get an automated overview of how your design system progresses over time.
- Global design tokens in YAML format that you can use inside any component.
- Automatic generation of living, user editable documentation.
- Easily export and use your Design System as an NPM dependency in another Vue.js project.
- Create a token, an element, or a pattern, and it’s immediately available across all components.
- Pre-configured ESLINT, Stylelint, Prettier setup for auto-formatting code on before commit.
- Live Reloading, Autoprefixing, PostCSS, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
- Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
- And more…
Install dependency
yarn
Build common packages
npx lerna run build
Coming Soon