Gengo Style Guide

Setup

Download & install EditorConfig plugin for your editor so we have consistency in our code.
Install NodeJS
Installing dependencies bash setup.sh (this will isntall sass, compass, grunt & bower)
If you are using Sublime Text 3 then install this plug-in sublime-csscomb. CSScomb is a coding style formatter for CSS. This is the CSScomb setting file .csscomb.json

Development

use npm run dev
contents are generated into ./dev directory
access http://0.0.0.0:9001 for preview
livereload is supported

Build

use npm run build
contents are generated into ./dist directory

Auto Deployment via Travis CI

All resources are deployed to gh-pages branch from _gh_pages folder on the master branch
Deployment to gh-pages branch are done via Travis CI
Only when pushed into master branch, deployment is enabled.

How to test auto deployment ?

###requirement

###instruction

fork gengo/style-guide
git clone forked repository.
move into root directory of the repository.
If needed, merge branch which you want to test.
open .travis.yml, delete last line which start with - secure:
run travis encrypt with adequate options, to replace some environment variables

GH_TOKEN,GIT_NAME,GIT_EMAIL are replaced
run travis encrypt
see exmample below.

Enable your repository in Travis CI
git add .travis.yml and commit,push
check Dashboard of Travis CI.

# example: git clone

git clone git@github.com:vwxyz/style-guide.git

# example travis encrypt
# - `XXXXXXXXXXX` is your github personal api tokens)
# - by `--add` option, `.travis.yml` is auto-updated.

travis encrypt --add -r gengo/style-guide 'GIT_NAME="vwxyz [via travis key]" GIT_EMAIL=feeddcit@gmail.com GH_TOKEN=XXXXXXXXXXX'

Code snippet highlighting

To render a code block with syntax highlighting, surround your code like this:

{% highlight html %}
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
{% endhighlight %}

This {% highlight html %}...{% endhighlight %} block is converted into this:

<div class="highlight">
   <pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Messages<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
</div>

Documentation

For more detailed documentation, please look at : bootstrap-sass

gengo / style-guide