@central-design-system/components

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

Usage no npm install needed!

<script type="module">
  import centralDesignSystemComponents from 'https://cdn.skypack.dev/@central-design-system/components';
</script>

README

Central Design System

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

Getting started

NPM

npm install @central-design-system/components
OR 
yarn add @central-design-system/components

Use

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

import Vue from 'vue';
import Cds from '@central-design-system/components';
import '@central-design-system/components/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 '@central-design-system/components'
import '@central-design-system/components/dist/cds.css';

new Vue({
  el: '#app',
  components: {
    CdsCheckbox, CdsButton, 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 '@central-design-system/components';

Vue.use(Cds);
// nuxt.config.js
export default {
  css: ['@central-design-system/components/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="https://unpkg.com/@central-design-system/components/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="https://unpkg.com/@central-design-system/components/dist/cds.min.js"></script>
        <script>
          new Vue({
            el: '#app'
          })
        </script>
    </body>
</html>

Support IE11

You need use css-vars-ponyfill in your application