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.
vue create <project name>
(select any preset you want, be sure to include a SASS-preprocessor for now, see issue #4)cd <project name>
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 .col
s.
.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
wherex
is the column span value. For instance,.col--6of12
will fill 50% of its parents' width.
Example: a three-column layout
Col 1 (33%) Col 2 (33%) Col 3 (33%)
Example: a three-column layout with one column of undefined width
Col 1 (~17%) Col 2 (~17%) Col 3 (~66%)