Design System Usage Guidelines
These guidelines provide instructions on how to effectively use the DEHN design system to streamline your development and design process. By following these practices, you can ensure consistency, accessibility, and efficiency in your projects.
Resources
Documentation Pages
Visit the DEHN Design System site for comprehensive documentation. This site covers fundamental design principles, handling responsiveness, accessibility, and more. It also demonstrates components in practical scenarios, helping you understand how to implement them effectively.
Figma Library
For design reference or work, access our Figma library. It contains all the components, offering a visual and interactive way to explore the design system elements and embed them into your design files.
Storybook
Developers can find interactive examples of all components in our Storybook. Access requires credentials, so if you are part of a DEHN product development team and need access, please consult your team lead or a member of the design system team.
Development Setup
Our design system components are built with SCSS and Vue. Below are the recommended tools and configurations to get started.
Recommended IDE Setup
- Editor: VSCode
- Vue Support: Install the Vue - Official extension and disable Vetur for the best experience.
Importing Styles
To import the main styles, including colors, fonts, and headings, use the following in your project:
import '@dehn/design-system-component-library/dist/assets/index.css';
TypeScript Support for .vue
Files
TypeScript does not natively support .vue
file types. To address this, replace the tsc
CLI with vue-tsc
for type checking. Additionally, install the Vue - Official extension to ensure your editor recognizes .vue
types.
Configuration for Vitest
If you are using Vitest for testing, include the following in your vitest.config.ts
:
defineConfig({
test: {
server: {
deps: {
inline: [/@dehn\/design-system-component-library\/.*/]
}
}
}
});
Nuxt Project Configuration
For Nuxt projects, add the following to your nuxt.config.js
:
build: {
transpile: ["@dehn/design-system-component-library"],
}
Vite Configuration
For further customization, refer to the Vite Configuration Reference.
Project Setup
Follow these commands to set up and manage your project:
Install Dependencies
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile, and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
For development:
npm run test:e2e:dev
For production build (recommended for CI environments):
npm run build
npm run test:e2e
Lint with ESLint
npm run lint
Run Storybook
npm run storybook
Build for Storybook
npm build-storybook
Build the Package
npm run build-package
By following these guidelines and using the provided resources, you can maximize the efficiency and consistency of your work with the DEHN design system.