Clank is a free and open source prototyping
and testing framework for mobile apps. The HTML, CSS, SCSS, and JS source code is
available under an MIT License
on the GitHub repository.

The Clank source code and framework is the brainchild of Johan Ronsse, an interface designer
living and working in Antwerp, Belgium. In addition to the source code, his
site GetClank.com features demos, documentation, and a blog about the framework. I’ll review downloading
and using the source code to create a demo application for an iOS device.

Note: According to the
documentation, the framework is supported by Chrome, Firefox, and Safari for
new and modern technologies and is not recommended for production work at this
time. 

The download

On the GetClank.com home page, when you click the Download button, it pulls
clank-master.zip (the same master zip file that’s on GitHub), which is 356KB. Once
the files are extracted (1.9MB), you’ll have access to the master files; this
includes an index.html and its associated CSS and JS references, which include
clank.css and animations.css, jquery.min.js, prefixfree.min.js, fingerblast.js,
sliders.js, toggles.js, and clank.js.

The framework file structure

The component-based framework allows you to pick and choose from the SCSS
such as articles, alerts, base layout, data table, forms, help, pagers, and
toggles, among others. Similar to other frameworks like Twitter Bootstrap, you
can pick what you need and use it for your project requirements.

The Clank code is written using modern CSS and SCSS techniques, utilizing
Sass and Compass
to ensure a maintainable codebase. The index.html page is a blank canvas and
ready to accept any application content you wish to create (Figure A).

Figure A

The index.html file works as a template containing all the linking you
need for the supporting CSS and JS files as shown in the code snippet showing the
<doctype>, <html>, and <head> portions of the file.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clank</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="css/clank.css" />
<link rel="stylesheet" href="css/animations.css" />
<script type="text/javascript" src="components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="components/prefix-free/prefixfree.min.js"></script>
<script type="text/javascript" src="js/clank/ratchet/fingerblast.js"></script>
<script type="text/javascript" src="js/clank/ratchet/sliders.js"></script>
<script type="text/javascript" src="js/clank/ratchet/toggles.js"></script>
<script type="text/javascript" src="js/clank/clank.js"></script>
</head>

This code also shows how the file structure is laid out for the CSS and
script files within the Clank framework.

The demos

Each demo highlights the available SCSS components. The Demo page provides five device options (iPhone
4, iPhone 5, Galaxy Nexus, Nexus 7, iPad 3), two orientation options (portrait or
landscape), a size slider button, and options to view documentation for each
component (Figure B).

Figure B

You can grab useful markup code from the individual demos. I will use the
markup code from the “Article” demo, which according to the
associated documentation provides the base typography and text styling while using
the .cl-article wrapper class so article text styles will not
conflict with other component styles. The HTML code snippet provided in the
article demo is copied below.

<div class="cl-article">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>

The documentation

On his documentation
page, Johan describes what the framework is and explains why you should use it
for application development. He also goes into detail about his
skinning-mechanism, which uses variables in SCSS that allow you to make global
changes to headers, bars, and buttons. The documentation also features device
wrappers that allow you to create demo or emulated representations of the
various mobile device views that I listed above. SCSS conventions and
commenting are documented for those who use it to extend CSS with variables and
mixins.

The documentation also includes a set of three starter templates for
device wrappers that can be copied and pasted into the template file included
in the download. The wrapper templates include an empty iOS styled page, an
iPhone 4 device wrap, and a Galaxy Nexus device wrap.

Testing a template

I copied the template named “Page with iPhone 4 device wrap,”
pasted it into the downloaded index.html file, and then copied some of the code
from the “Article” demonstration page. The <body> code snippet
is displayed below with shortened Lorem ipsum content.

<body data-os="ios">
<div class="cl-device-frame">
<div class="cl-phone-wrap" data-os="ios" data-device="iphone4-portrait">
<div class="cl-device-body">
<div class="cl-ios-status">
<span>
<span class="signals">
<span class="signal1"></span>
<span class="signal2"></span>
<span class="signal3"></span>
<span class="signal4"></span>
<span class="signal5"></span>
</span>
<span class="carrier">Verizon</span>
</span>
<span class="clock">20:49</span>
<span>
<span>3G</span>
<span class="icon-ios-alarm"></span>
<span class="icon-ios-locate"></span>
<span class="icon-ios-lock"></span>
<span class="icon-ios-battery"></span>
</span>
</div>
<div class="cl-page">
<div class="cl-bar-title">
<h1 class="cl-title">Demo Article</h1>
</div>
<div class="cl-content">
<!– Content here –>
<div class="cl-article">
<p class="cl-article-intro">Lorem……<p>
<p>Lorem ipsum ….</p>
<img src="./images/slider/fauna3.jpg" alt="Frog">
<p>Ea commodo….</p>
</div>
</div>
<div class="cl-bar-footer">
<!– Footer content here –>
<p class="cl-title">Footer</p>
</div>
</div>
</body>

Figure C shows the resulting demo prototype with the iPhone wrapper as
displayed in Chrome from a desktop PC.

Figure C

I wanted to see how the demo file would be viewed live from a mobile
device, so I removed the wrapper portions of the code. The footer was sliding
over the main content, so I made one small change to the CSS: I commented out
the footer position (which was set to absolute) and then changed it to a
relative position. Figure D shows the resulting test of the demo file as
displayed on an iPhone 4 in Safari.

Figure D

In order to test more components, I added the markup code to demonstrate buttons with toolbar
and setting a primary button, toggles
set to Active, and an Alerts box with buttons. The code snippet for each of the three added components follows,
and Figure E shows the resulting display from an iPhone 4 in Safari.

Buttons:

<div class="cl-btn-toolbar">
<a class="cl-btn cl-btn-primary">Button 1</a>
<a class="cl-btn cl-btn">Button 2</a>
</div>
<br /><br />
<div class="cl-btn-toolbar">
<a class="cl-btn cl-btn-primary">Button 3</a>
<a class="cl-btn cl-btn">Button 4</a>
<a class="cl-btn cl-btn">Button 5</a>
<a class="cl-btn cl-btn">Button 6</a>
</div>

Toggles:

<div class="cl-toggle active">
<div class="cl-toggle-handle"></div>
</div>

Alerts box:

<div class="cl-alert">
<div class="cl-alert-box">
<h3 class="cl-alert-title">This is an alert title.</h3>
<p class="cl-alert-message">This is an alert message. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="cl-btn-toolbar">
<a href="#" class="cl-btn" data-dismiss="cl-alert">Cancel</a>
<a href="#" class="cl-btn cl-btn-primary" data-dismiss="cl-alert">OK</a>
</div>
</div>
</div>

Figure E

Summary

As a straightforward prototyping tool, Clank is a great approach for
implementing and testing mobile apps in a development environment. Using the
Clank base template along with several components
typically found in mobile device projects, you can use the framework as a quick
way to deliver samples and demo apps to customers.