.CION layout device vue.js.CION is a style device build mostly for Vue.js applications. You can easily use it as a starting aspect for building your personal concept body.Use the device's elements to deal with common UI complications like style, typography, featuring information or even information input.The system uses concept mementos, a residing styleguide along with included code play areas and recyclable elements for common UI tasks.Staying Styleguide: See the styleguide conform to your concept unit as you move on.Element Information: Autogenerated information for your components with included playground.Standard Elements: Features some basic elements to aid you begin.First steps.Create:.Download and install the boilerplate.git clone https://github.com/visualjerk/vue-cion-design-system.git your-system-name.Install its own dependencies.cd your-system-name & & yarn install.Start the development server.yarn dev.Design symbols describe the look of your concept body at the absolute most fundamental degree.To obtain an understanding of what concept tokens are, open up src/system/tokens/ font-size. yml in your editor.As you can easily find, every font-size worth is exemplified through a significant label. Rather than hardcoding worths in your codebase you may only refer to the label of each token.Readjusting different colors.Open up src/system/tokens/ color.yml in your publisher.By default our experts use HSL to explain color mementos. This assists making regular colours throughout the treatment. If you do not recognize HSL however, look at the HSL Color Picker.Color hues.If you want to keep the colour token documents DRY, base tones are listed under "pen names". Each pen names represents shade + saturation. Try to adjust the worth for "teal" and also view how that impacts the styleguide.Color symbols.The genuine colour symbols are noted under "props". Attempt modifying the "color-primary" and also its varieties to utilize blue instead of teal and see the effect on the styleguide.Producing your style.Have a look at the instances inside src/system/tokens/ _ instances to receive a suggestion of what is actually possible. You can attempt to overwrite the tokens in the main directory along with those in the instances subfolders.Today you may start to create your very own concept through adjusting the style souvenirs to your preference.Usage.It is actually encouraged to include your layout unit as a private dependency using NPM. Having said that, when first starting out, it is easier to maintain it as a subfolder inside your application venture.Duplicate the design body to a subfolder of your venture and mount it is actually dependencies.compact disc/ path/to/your/ venture.git clone https://github.com/visualjerk/vue-cion-design-system.git design-system.cd design-system & & yarn put in.Add it as a dependence to your job.cd/ path/to/your/ task.yarn add documents:./ design-system.Import as well as use it in your use entrance (ex. main.js).bring in Vue from 'vue'....bring in DesignSystem from 'vue-cion-design-system'.bring in 'vue-cion-design-system/ dist/system. css'.Vue.use( DesignSystem).This task is hosted on GitHub. Generated by visualjerk.