0.1.2 • Published 7 months ago
blush-ds v0.1.2
Blush
Component Library and Design System.
Check the documentation available online
🧰 Tools and Technologies used
Usage
Import blush as an external package and use its components and design tokens
Install Blush
npm install blush-ds
Import the Blush global style into your main.js
import 'blush-ds/dist/style.css'
Use components by importing them
<!-- App.vue -->
<script>
import { blushAlert } from 'blush-ds'
</script>
<template>
<blush-alert
title="Alert"
text="Description alert"
type="informative"
:show-dismiss="true"
@on-dismiss="console.log('dismiss alert')"
/>
</template>
To use our design tokens, simply import the utils file with all of them.
/* some css file */
@import "blush-ds/src/utils/tokens/tokens.scss";
💡 If you are using the Vite bundler, you can import the tokens globally like this (this is what we recommend):
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use 'sass:map';
@import "blush-ds/src/utils/tokens/tokens.scss";
`
}
}
}
})
💻 How to use in dev mode
Install dependencies
npm install
Run the dev server with hot-reload
npm run dev
Build a version to production
npm run build
Start the Storybook server to see components documentation
npm run storybook
Run the Cypress executable to tests
npx cypress open
Run Lint with ESLint
npm run eslint
Run ESLint Fix
npm run eslint:fix
Run Lint with StyleLint
npm run stylelint
Run StyleLint Fix
npm run stylelint:fix