Designing Custom Github Demo Pages

The open source coding haven Github has grown tremendously in just a few short years. The founders have commented on setting up pages for new projects and this feature launched a little while ago. Github Demo Pages allows any developer to setup their own static HTML/CSS/JS pages on the Github server and provide demo content for their code repos.

In this article I would like to go over the process of designing a custom Github page and styling for your own codes. It is important that you offer any support and installation steps along with these pages. Plus a live demo of the template or plugin will pull more interested users. I will provide some live samples for new users to get an idea of how project pages are constructed.

Getting Started

After creating a new repo for a project or plugin you should configure the page by adding some related information. You can do this manually by adding a gh-pages branch into your project. But the easiest solution is to access your project admin and click the link for generating a new project page.

github demo pageopen source pages tools webpage screenshot

This process will require you to fill out some basic fields about the codes and how they will be hosted. Also what you want to call the project and which directory this webpage will reside. By default the Github pages are hosted on a subdomain of your username followed by the project’s Github name. So if I created a repo named specky-nav I could setup a project page at the URL jakerocheleau.github.com/specky-nav/ and store all the static info in that directory.

The simplest method is to just follow the customized Github generator and use one of their pre-built templates. However it is always possible to go back and manually edit these pages for your own customizations. The Github support team published an article about creating project pages manually which may be helpful to some users with this preference.

Beautiful Templates

Just last year during 2012 Github published a new blog post on project page templates which discusses the methods for creating your new page. The easiest solution is to use one of their existing templates and update your own page using some of the same features. You should be able to push your own gh-pages branch into the project and overwrite the existing clone.

So now I want to look into a couple design trends which will enhance the style of your project page. These are not universal trends but you may try them out and see how it can work in a typical layout. There are so many new Github entries each day that it is worth trying to make your project stand out from the crowd.

Adapting with Twitter Bootstrap

Ironically the original Twitter Bootstrap page is actually hosted as a project page on Github. So many developers love Bootstrap and this comes with good reason. By including the basic JS/CSS files you may generate almost any layout, button, form, navbar, or other website element with ease.

These are pre-styled elements and perfect for a generic open source project page. I really like this article on 24ways which discusses solutions for customizing Bootstrap to look more native and blended into your layout.

Twitter Bootstrap Github  demo page webpage screenshot demo

The Bootstrap library itself is moderately heavy and so it may not be a good solution for everybody. However if you are brand new to creating Github demo pages then I have to recommend Bootstrap. It is worth learning how to use the library at some point, and what a better method of practice than building project pages for GH repos.

Custom Web Fonts

The Google Web Fonts gallery is huge and simply too generous to ignore. You could include one or two fonts into your webpage and it shouldn’t take up more than a second or two. Fonts can be used as in-body text and headers to make yourself stand out among the other pages. Take the live example from stickyMojo by MojoTech.

Github demo page Sitckymojo webpage open source

This plugin uses a slew of unique web fonts to handle the header text and page body. The layout is also well-designed and they are applying CSS3 text shadows for a more pleasing interface. By just applying some new fonts that are not the typical websafe typefaces it will catch visitors attention and keep them interested for longer.

In-Page Demo Samples

One other really important concept to include is a live demo of your code. This may not be possible if you are releasing a WordPress theme or some type of full PHP template system. But for smaller plugins and code snippets it will help give visitors a chance to see what your code does before downloading. The project page for Textillate.js is full of real live demos showcasing their effects.

Textillate.js open source jquery css3 animation plugin Github demo page

Keep in mind that there are no set rules or boundaries for these demos. You may place them on an external page or keep them on the same project page. It all depends on what you are trying to show off. But having a demo for users to download in their source code also helps them install the project on their own website. Sample codes are more handy so that developers can go back and debug when something goes wrong.

Stackable.js javascript open source github webpage

The page for Stackable.js is another good example of including source code and live demos inside the project page. This JavaScript library will resize and reform tables to work nicely on responsive smartphone screens. Scroll down a bit and resize your window on the responsive demo. This is another open source library which has caught my attention and provides excellent documentation for developers.

Showcase Gallery

I want to offer a series of Github project pages which are worth their efforts for design inspiration. This showcase gallery is dedicated to a list of my favorite project pages which have customized a fantastic layout. Along with my tips above be sure and study what other developers are doing to make their project pages easier to navigate and help users to find pertinent information.

Bedrock

Bedrock Github responsive page

jQuery Shapeshift

shapeshift open source jquery github page

xCharts

Github open source pages xcharts javascript

Alertify.js

jquery javascript alertify messages webpage

Mockup Designer

Github mockup designer interface wireframing

Behave.js

austin powers jquery plugin behave responsive

baby-legs

dark minimalist github page demos coding

Droptiles

open source webpage codes sample inspiration

Junior

javascript open source framework github webpage

Makisu 3-D Dropdowns

3d css3 dropdown menus open source github demo page

Holder.js

holder js javascript library placeholder images demo page

Continuum

github webpage continuum open source

Simple Grid

css css3 github webpage grids open source

Headsmart

headmsart website webpage open source github

Pondasee

Pondasee Github project pages webapp interface

Centurion

Centurion mobile webapp responsive framework css3

Noty

beta noty webpage open source github

Heyoffline.js

Hey Offline js javascript open source github

Base Framework

super simple honest Github webpage framework css3 responsive

Bi-App-Less

css open source less project github webpage design

Responsivator

javascript respinsivator github webpage plugin

Fbootstrapp

Facebook Bootstrap UI open source projects

Gauge.js

open source github webpage layout gaugejs javascript

Punch

spectacular css library vimeo webpage github

Dashing

open source dashboard webpage github framework

Ideal Forms

ideal jquery css3 forms input styles open source

RefineSlide

RefineSlide open source Github project demo page

Sketch.js

inbrowser jquery plugin drawing github demo page

BaseDemo

Github data open source templates codes

Controldeck.js

HTML5 presentations with node.js github webpage design

EpicEditor

epic editor coding syntax ide open source projects

gmaps.js

google maps gmaps javascript library

Wirefy

github projects webpage layout wireframes open source

Dancer.js

open source webpage projects github dancerjs

SelectNav.js

selectnavjs open source github demo page

WYSIHTML5

open source github demo webpage layout

Filtrify

Filtrify webpage open source github demos

Hammer.js

mobile responsive javascript multi touch library github

Wordless

css styles less sass plugin wordpress open source pages

Typeahead.js

Twitter typeahead github demo demo page

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments