.CION style unit vue.js.CION is a concept body build largely for Vue.js applications. You can easily use it as a beginning aspect for creating your own layout device.Make use of the body's parts to handle common UI problems like design, typography, presenting information or even records input.The unit uses concept souvenirs, a living styleguide with incorporated code playgrounds and recyclable components for typical UI duties.Residing Styleguide: Find the styleguide adjust to your layout system as you move on.Part Information: Autogenerated documents for your elements along with integrated play area.Standard Components: Features some basic components to help you get started.Very first steps.Setup:.Download and install the boilerplate.git clone https://github.com/visualjerk/vue-cion-design-system.git your-system-name.Install its own reliances.cd your-system-name & & yarn mount.Start the development web server.anecdote dev.Style tokens determine the look of your concept system at the absolute most simple amount.To get a comprehension of what concept symbols are actually, open up src/system/tokens/ font-size. yml in your publisher.As you may see, every font-size worth is actually embodied through a meaningful title. Instead of hardcoding worths in your codebase you may just refer to the title of each token.Adjusting shades.Open up src/system/tokens/ color.yml in your editor.Through nonpayment our company use HSL to illustrate different colors symbols. This aids developing consistent colors throughout the application. If you do not understand HSL yet, take a look at the HSL Color Picker.Colour hues.In order to maintain the shade token report DRY, foundation shades are specified under "aliases". Each alias means color + saturation. Try to readjust the worth for "teal" and observe exactly how that has an effect on the styleguide.Different colors gifts.The genuine color gifts are actually detailed under "props". Try changing the "color-primary" and also its own variants to use blue as opposed to teal and observe the effect on the styleguide.Making your design.Have a look at the examples inside src/system/tokens/ _ examples to receive a concept of what is actually possible. You can easily attempt to overwrite the souvenirs generally file with those in the examples subfolders.Today you can start to create your personal concept through changing the layout gifts to your flavor.Consumption.It is actually suggested to integrate your design unit as a private dependency through NPM. However, when first starting, it is simpler to keep it as a subfolder inside your application task.Duplicate the design body to a subfolder of your task as well as mount it's reliances.cd/ path/to/your/ project.git clone https://github.com/visualjerk/vue-cion-design-system.git design-system.cd design-system & & yarn mount.Add it as a dependence to your task.cd/ path/to/your/ job.anecdote add file:./ design-system.Bring in and use it in your use access (ex. main.js).import Vue coming from 'vue'....import DesignSystem from 'vue-cion-design-system'.bring in 'vue-cion-design-system/ dist/system. css'.Vue.use( DesignSystem).This task entertains on GitHub. Produced through visualjerk.