Web Development

Create mobile app prototypes for free with Clank

Learn how to use the Clank open source framework to create a demo application for an iOS device.

Clank_intro_110713.gif

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

ClankFigA110713.gif

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

ClankFigB110713.gif

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

ClankFigC110713.gif

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

ClankFigD110713.gif

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

ClankFigE110713.gif

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.

 

About

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...

1 comments
Paritosh Rapid Moon
Paritosh Rapid Moon

Interesting stuff Ryan. Rapid prototyping tools like these are a blessing for startups. I represent Rapid Moon, which is one such tool for building responsive web apps. Would love to get your feedback and make this world build better, beautiful and robust responsive apps ... quickly!