Awesome Open Source
Awesome Open Source

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 [email protected]: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]" [email protected] 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

Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Deployment (56,840
Scss (21,439
Ci (12,679
Guide (12,574
Travis (5,829
Styleguide (2,673
Travis Ci (2,577