Skip to content
Gengo Style Guide
CSS CoffeeScript Ruby Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Build Status

Gengo Style Guide


  1. Download & install EditorConfig plugin for your editor so we have consistency in our code.

  2. Install NodeJS

  3. Installing dependencies bash (this will isntall sass, compass, grunt & bower)

  4. 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


  • use npm run dev
  • contents are generated into ./dev directory
  • access for preview
  • livereload is supported


  • 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 ?


  1. Travis CI Client
  2. github personal api tokens


  1. fork gengo/style-guide

  2. git clone forked repository.

  3. move into root directory of the repository.

  4. If needed, merge branch which you want to test.

  5. open .travis.yml, delete last line which start with - secure:

  6. 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.
  1. Enable your repository in Travis CI

  2. git add .travis.yml and commit,push

  3. check Dashboard of Travis CI.

# example: git clone

git clone

# 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]" 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>
{% 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>


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

You can’t perform that action at this time.