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.

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.

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.

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.

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.

Sign up for TechRepublic's Designer newsletter!

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Full Bio

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.