5 GitHub projects you need to know


Get your hand on a collection of top quality projects and tools that will make your site a better place



USE FOR: designing slideshow-like webpages

Generations of badly designed PowerPoint slides have accustomed users to full-screen presentations. This JavaScript framework provides a quick and convenient tool which transforms websites into full-screen PowerPoint-like presentations. Since its initial release, both large and small companies enthusiastically embraced the framework: it was even used on for some time.

As with most other bits of JavaScript code, the usage of the fullPage.js framework will require the inclusion of the jQuery library along with some helper files. Our example here uses the bare minimum of files – advanced scrolling effects will require the inclusion of additional helper libraries:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src=""></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

In the next step, the actual content needs to be defined. This is accomplished by adding the following <div> structure to your website:

<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section active">Some section</div>

By default, fullPage.js displays the section at the top of the DOM tree. You can modify this behaviour via the section active attribute shown below – our snippet would start out by displaying the last item from the list. The individual sections can contain multiple slides which are displayed in a horizontal fashion:

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>

Even though the individual slides can be formatted via CSS, the mandatory bring-up of the framework can also be used in order to provide additional context such as background colours:

$(document).ready(function() {
sectionsColour: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],

In this snippet, both the background colours and a set of anchors are provided. The latter simplifies the creation of internal links, which permit you to approach individual pages easily.

Describing all parameters of the JSON object passed to the initialisation function would require an entire issue of Web Designer to explain. Because of that, please consult the readme file at in order to learn more.


USE FOR: making apps with simple components

Creating good-looking user interfaces for mobile applications constitutes an art of its own. Ratchet is managed by the team behind the well-known Bootstrap framework: it aims to simplify this endless task.

After downloading Ratchet, prepare yourself for a complete rearrangement of your application. The framework requires you to adhere to a strict sequence of controls – firstly, all ‘bar’ items must be right below the <body> tag of the individual pages:

<header class="bar bar-nav">
<button class="btn pull-left">
<button class="btn pull-right">
<h1 class="title">Title</h1>

As for the actual application, a large selection of controls is provided. For example, tables can be spruced up with various useful gadgets conveying extra information. Apps are made up of forms, each of which is to be contained in an HTML file of its own. They are connected to one another via the Push.js framework – by default, all links are processed by it.

Fortunately, designating external links is as easy as adding the data-ignore property to their declaration. This is necessary for all references which point outside of your app – the following Google link would be a classic example of such a task:

<a href="" data-ignore="push">Google<a>

Ratchet differs from classic GUI stacks such as jQuery UI/Mobile due to the availability of two stylesheets which seek to mimic the design of the host operating system’s controls. Sadly, Ratchet’s platform support is limited to recent versions of Android and iOS. The developers have not yet decided whether they want to embrace Windows Phone – as for BlackBerry 10, you don’t even need to ask.

mfglabs iconset

USE FOR: embedding icons using a web font or CSS

According to a well-known proverb a figure can be worth a thousand words and these icons will surely say what you want without the text. Most desktop products provide their users with a symbol bar providing quick access to commonly used functions. Mfglabs’ iconset will differ from normal icon sets in that it is implemented via a custom font mapped into the Unicode codespace. This is beneficial to us because fonts contain vector information. Your icons will thus look great at all display resolutions and the pixelation that is commonly found in bitmap icon sets will not occur.

Deploy iconset by copying all relevant resources to a folder of your web application. Then proceed to adding the following snippet in order to load the stylesheet and deploy an icon:project – additional resources are needed only for any drop-down menus and symbols:

<link rel=”stylesheet” href=”css/mfglabs_iconset.css”>
<i class=”icon-paperplane”></i>

User interface designers will be quick to point out that misuse of symbols is among the most common mistakes found to impact usability severely. A symbol should be used only when its meaning is 100 per cent clear to the target audience, so absolutely no confusion or second-guessing on their part. Ensuring this becomes especially difficult once products get internationalised.


USE FOR: improving the frontend

Displaying large amounts of information in a list is challenging and having to handle thousands of DOM elements can overwhelm even the fastest of browsers. Clusterize.js helps us solve this problem of data by recycling the display widgets in a creative way: the framework holds a small amount of templates, which then gets populated with data as soon as the user starts to scroll. Scrollbars are then fooled into accurate positioning via the use of dummy elements. Websites that are working with the Clusterize plugin will tend to work significantly faster. It’s simply a must-have if you are using big data sets. on your site.


USE FOR: creating a CSS image dialog

Displaying images inevitably becomes a balancing act between visible detail and screen real-estate consumption. Photographers and infographic designers obviously want their creation placed in the limelight – UI designers tend to focus their attention on reading flow.

Zoom.js solves this problem by transforming small images into large clickable galleries. Clicking an image opens a pop-up with the image in its full glory: this is ideally suited for device reviewers wanting to provide their readers with an optional, larger view of interesting pictorial material.

Embedding the Zoom.js plugin can be accomplished by adding the following three files to your web application. Transition.js is not a part of the main framework, but is instead made available as part of the bootstrap framework:

<link href=”css/zoom.css” rel=”stylesheet”>
<script src=”js/zoom.js”></script>
<script src=”js/transition.js”></script>

Any individual <img> tags must also then be enhanced with a bit of markup in order to display the images in a larger fashion:

<img src=”img/blog_post_featured.png” data-action=”zoom”>

Keep in mind that Zoom.js is no solution for the bandwidth demands of large images. Loading a large image takes some time even if it is displayed in the scaled-down version: as of writing. Zoom.js is not able to load a different resource as images get clicked.