This gh-pages template

was created to make it easier to publish documentation for github repositories.

Advantages

i wanted to have a fast solution without the need of taking care about

• responsiveness,
• adding a menu
• keeping a small footprint and fast loading time
• getting it without any dependancies and libraries
• installing any additional tools like jekyll etc.

And i wanted to be able to edit the pages quite fast.

How-To

1. Add a gh-pages branch for your repo
2. switch to the gh-pages branch in your repo
3. Get the gh-pages-template repo from github.com https://github.com/joeherwig/gh-pages-template or download as zip
4. put the content of the 'src' directory from inside the downloaded zip to your empty gh-pages branch
5. edit the index and style files.

easy edit

i love pug - the successor of jade - for editing html etc. The same applies to jade which has a couple of advantages compared to pure css.

due to that i'm running a save-on-build process within my editor which enables me to write my code in pure pug/jade and sass and on save my editor saves the file also as html / css. That#s the reason, why you'll find additionaly to the html and css-files also the jade and sass-version. - It's even easier to edit.

of course i could list you all the html-code (containing hundreds of brackets, closing-tags etc.) but for a better readability i just show you the structures as simple pug -examples.

Let's go!

If you open the index.jade you can directly start keying-in your content, after the

.pages

element.

so if you write for instance:

.pages
  .page
    .nav-label Introduction
    h1 This gh-pages template
    p was created to make it easier to publish Documentation for github repositories
    h2 Advantages
    p i wanted to have a fast solution without the need of taking care about 
    ul
      li responsiveness,
      li adding a menu
      li keeping a small footprint and fast loading time
      li getting it without any dependancies and libraries
      li installing any additional tools like jekyll etc.

you'll get one single

• page with the content of this Introduction
• an automatically generated nav-item with the text "Introduction"

right menu item

if you want to pull a menu-item to the right, just add the class 'nav-pull-right' to the page

.page.nav-pull-right

Go even faster !

If there's no need to add nav-labels which differ from your headings, why shoud you add them?

Just try leaving away the .nav-label container:

eg.:

.page
  h1 @github

will add a navigation item to your page which has "@github" as label.

If you don't define the nav-label explicityl the page will try to fetch the first heading (up to <h3>)

.page>.nav-label:first-child,
.page:not(.nav-label)>h1:first-child,
.page:not(.nav-label):not(h1)>h2:first-child,
.page:not(.nav-label):not(h1):not(h2)>h3:first-child

Design

The design of this repo will probably not fit exactly to your needs, but it should be easy to edit it using the style.sass / style.css-file within the /css/folder. Bring it to you own style. :-)

If you want to replace the icon, just change the /images/Logo.svgto your needs.

Navigation

For an easy navigation the navigation is kept responsive and always on top of the page.

Additionaly switching between the pages is now available via simple swipe guesture. A swipe from right to left = next page and a swipe from left to right jumps to the previous page within the menu.