Many of companys that make web design do styleguides to keep standars of colors, fonts, components, etc. We as web developers take those styleguides to actual code (html, css, js). For this reason is that stylekyll was created.
Stylekyll help you keep track on how many pages have you build, crossbrowser control, generate svg sprites, generate the actual styleguide through kss-node and much more.
This template was created with jekyll, kss-node, github-styleguide-template and edited to add bootstrap-sass.
- Organized gulp task in it's own folder. Maybe somethings like this:
gulp
├── build.js
├── server.js
├── watch.js
└── wiredep.js
- Create an template without bootstrap-sass. (susy, skeleton, other)
In order to work with the template, you will need to follow tools:
- Ruby.
- Nodejs.
- *Xcode command line tools *. (if you are on Mac)
-
Download and install *Xcode command line tools *. (if you are on Mac)
-
Download and install RVM (Ruby version Manager is optional)
Run the following command to install rvm it:
$ \curl -sSL https://get.rvm.io | bash -
Then update Ruby to the 2.2.0 or higer version
$ rvm install 2.2.0 -
Choose ^2.2.0 as the default Ruby for RVM
$ rvm --default use 2.2.0 -
Download and install Node.JS v0.10.33.
-
With this done, you have to install the following Gem:
gem install bundler -
Then you can run the following command to install ruby dependencies:
$ bundle install -
Then you need to install the node dependencies, so run:
$ npm install -g gulp && npm install -g bower && npm install -
Then install kss node version:
npm install --global kss@1.3.0 -
After installing all ruby and nodes dependencies, you should update the front-end dependencies, so run:
$ bower install...and you're done.
To see your project running please run:
$ gulp
Compiling styleguides
$ kss-node assets/_scss _site/styleguide --sass --template _template-kss
We have created a rake task to build the site and then push it to divshot.
$ rake task:build
$ divshot push
Thanks