.CION layout device vue.js.CION is actually a design unit build mainly for Vue.js applications. You may use it as a starting factor for creating your personal layout device.Utilize the device's components to resolve common UI concerns like style, typography, showing records or records input.The device makes use of layout gifts, a residing styleguide along with included regulation play areas as well as recyclable elements for usual UI activities.Residing Styleguide: Observe the styleguide conform to your design unit as you move on.Part Documentation: Autogenerated information for your elements along with included play area.Simple Parts: Features some simple parts to help you get going.First steps.Setup:.Download the boilerplate.git clone https://github.com/visualjerk/vue-cion-design-system.git your-system-name.Install its dependences.compact disc your-system-name & & yarn put up.Beginning the development server.yarn dev.Style tokens describe the look of your design unit at the best essential degree.To acquire a realization of what concept symbols are, open up src/system/tokens/ font-size. yml in your editor.As you can easily see, every font-size value is actually represented through a meaningful name. As opposed to hardcoding market values in your codebase you can easily only pertain to the label of each token.Changing colors.Open up src/system/tokens/ color.yml in your publisher.Through default our company utilize HSL to define color mementos. This helps developing consistent shades throughout the application. If you do not understand HSL yet, look at the HSL Color Picker.Different colors colors.So as to always keep the color token documents DRY, base tones are actually specified under "pen names". Each pen names represents hue + saturation. Try to change the market value for "teal" and also see just how that affects the styleguide.Different colors mementos.The true color mementos are actually noted under "props". Make an effort modifying the "color-primary" as well as its own variations to utilize blue instead of teal and also view the impact on the styleguide.Creating your layout.Take a look at the examples inside src/system/tokens/ _ examples to obtain an idea of what is actually achievable. You may attempt to overwrite the symbols in the main file with those in the examples subfolders.Now you may start to create your personal layout by adjusting the concept mementos to your taste.Utilization.It is recommended to include your design unit as a private dependence through NPM. However, when very first beginning, it is actually easier to keep it as a subfolder inside your app task.Duplicate the design system to a subfolder of your project as well as mount it's dependencies.cd/ path/to/your/ project.git clone https://github.com/visualjerk/vue-cion-design-system.git design-system.cd design-system & & yarn put up.Add it as an addiction to your venture.cd/ path/to/your/ venture.anecdote include file:./ design-system.Import and use it in your request access (ex lover. main.js).import Vue from 'vue'....bring in DesignSystem from 'vue-cion-design-system'.import 'vue-cion-design-system/ dist/system. css'.Vue.use( DesignSystem).This project is hosted on GitHub. Produced by visualjerk.