Central-design-system NPM

Central Design System

Стандартизированная система проектирования на Vue. Помогает командам быстро создавать и поддерживать качественные современные продукты и обмениваться решениями.

Getting started

NPM

npm install @cds/components
OR 
yarn add @cds/components

Use

To use CDS in your Vue.js project, add this code:

import Vue from 'vue';
import Cds from '@cds';
import '@cds/dist/cds.css';

Vue.use(Cds);

Individual components

There are cases that in your project you only need some components of CDS and for this you can add them as follows

import Vue from 'vue'
import { CdsButton, CdsCheckbox, CdsTag } from '@cds'
import '@cds/dist/cds.css';

Vue.use(CdsButton)
Vue.use(CdsCheckbox)
Vue.use(CdsTag)

CDS + Nuxt.js

To use CDS in your Nuxt.js project Create file plugins/cds.js with code:

import Vue from 'vue';
import Cds from '@cds';

Vue.use(Cds);

// nuxt.config.js
export default {
  css: ['@cds/dist/cds.css'],
  plugins: ['~plugins/cds']
}

CDN

You can use CDS by loading it via cdn by adding a <script> tag to your project

<!DOCTYPE html>
<html>
    <head>
        <link href="dist/cds.min.css" rel="stylesheet">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body>
        <div id="app">
          <cds-button>Hello World</cds-button>
        </div>
    
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="dist/cds.min.js"></script>
        <script>
          new Vue({
            el: '#app'
          })
        </script>
    </body>
</html>

Support IE11

You need use css-vars-ponyfill in your application

change-case flatpickr node-sass v-runtime-template vanilla-masker vue vue-upload-component

1.5.0

3 years ago