.CION layout unit vue.js.CION is actually a layout device build mostly for Vue.js applications. You may use it as a starting point for creating your own concept unit.Make use of the body's parts to solve popular UI issues like design, typography, showing data or records input.The device utilizes concept souvenirs, a residing styleguide with combined code recreation spaces as well as recyclable elements for usual UI activities.Staying Styleguide: View the styleguide adjust to your style unit as you progress.Element Documents: Autogenerated documentation for your elements along with incorporated play ground.Fundamental Elements: Includes some basic components to assist you get started.Initial steps.Create:.Download and install the boilerplate.git duplicate https://github.com/visualjerk/vue-cion-design-system.git your-system-name.Install its own dependencies.compact disc your-system-name & & anecdote put up.Beginning the growth server.yarn dev.Layout mementos determine the feel and look of your style body at the most general amount.To get a knowledge of what design mementos are, open up src/system/tokens/ font-size. yml in your publisher.As you can see, every font-size worth is embodied through a purposeful name. As opposed to hardcoding market values in your codebase you may merely pertain to the title of each token.Adjusting colors.Open src/system/tokens/ color.yml in your publisher.By default our company use HSL to explain different colors mementos. This helps generating consistent colors throughout the treatment. If you do not recognize HSL yet, look at the HSL Different Colors Picker.Different colors colors.To keep the different colors token report DRY, foundation shades are noted under "aliases". Each pen names means color + saturation. Make an effort to change the worth for "teal" and also view exactly how that influences the styleguide.Different colors symbols.The true different colors symbols are actually specified under "props". Make an effort modifying the "color-primary" and its own variations to utilize blue instead of teal and view the impact on the styleguide.Generating your design.Take a look at the instances inside src/system/tokens/ _ examples to obtain a tip of what is possible. You can easily attempt to overwrite the mementos in the main folder with those in the instances subfolders.Right now you may start to produce your personal style by changing the style tokens to your preference.Usage.It is highly recommended to include your layout device as an exclusive dependence using NPM. Having said that, when initial starting out, it is actually simpler to keep it as a subfolder inside your function venture.Clone the concept body to a subfolder of your venture as well as install it's addictions.compact disc/ path/to/your/ venture.git clone https://github.com/visualjerk/vue-cion-design-system.git design-system.cd design-system & & anecdote put up.Add it as an addiction to your job.compact disc/ path/to/your/ task.yarn include documents:./ design-system.Import and use it in your treatment entrance (ex-boyfriend. 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. Created by visualjerk.