Created by Collier Devlin
This package was made to provide an easy-to-use, mobile css framework based off Skeleton CSS with the amazing flexibility and performance of Vue JS. Developers can often experience trouble with how long webpack takes to bundle a large framework such as Bootstrap and all the configuration that comes along with it, so vue-collier provides a much lighter alternative when quickly crafting your next idea.
For documentation and demos, please visit http://collierdevlinmedia.com/vue-collier/
- SCSS Templating based off Skeleton CSS (not complete)
- Font-Awesome
- Chart JS (through vue-chartjs wrapper)
To begin using vue-collier, simply install it using
npm install --save vue-collier
Assuming you are using Webpack to bundle all of your assets, we will begin by importing the vue-collier plugin which will make all vue components available to you in your vue instance.
// after Vue import
import VueCollier from 'vue-collier'
Vue.use(VueCollier)
The recommended way to load .scss
files with Webpack is by using sass-loader
. Once you have configured sass-loader
to include a basic *.scss
file for your app, all you have to do is import the main vue-collier sass file.
@import "~vue-collier/scss/collier.scss";
Based off the sass-loader
documentation, you will see that the ~
in the import will assume that your specified path is in the node_modules
folder. Then include the path to the collier.scss
and now you should have all the proper styles configured.
All that's left is to check to make sure your configuration was setup correctly. So compile webpack however your environment requires, go to the browser, and you should see that the default styles for vue-collier have been applied to your app.