Vue CLI Kroot scaffolding plugin

How to use this plugin

It is recommended that you start from a clean Vue CLI project.
The following step-by-step instruction list will start with creating such a project, and how to install this plugin into this project.

1. vue create <project name> (select any preset you want, be sure to include a SASS-preprocessor for now, see issue #4)
2. cd <project name>
3. vue add kroot

Now, your project will have a new folder styles in the src directory, containing a few .scss files.
The files will be auto-imported in main.js (by importing global.scss).
All variable files (colors, breakpoints and animations) are also included in every <style lang="scss"></style> block, so you can use those right away, as well.

Grid system

The grid system included is very simplistic. The definition of this system can be found in layout.scss.

For containers, use the class .container. The maximum width of this container can also be defined in layout.scss.

For the grid, we have two main classes: .grid and .col.
To use the grid, you must at least define a div with class .grid. Inside this div, you can include .cols.

.col classes have the following modifiers:

• .col--fill is used to fill the rest of the grid; it's a column that can be 100% wide or 0%.
• .col--xof12 where x is the column span value. For instance, .col--6of12 will fill 50% of its parents' width.

Example: a three-column layout

<div class="container grid">
  <div class="col col--4of12">Col 1 (33%)<div>
  <div class="col col--4of12">Col 2 (33%)<div>
  <div class="col col--4of12">Col 3 (33%)<div>
</div>

Example: a three-column layout with one column of undefined width

<div class="container grid">
  <div class="col col--2of12">Col 1 (~17%)<div>
  <div class="col col--2of12">Col 2 (~17%)<div>
  <div class="col col--fill">Col 3 (~66%)<div>
</div>