The Clank Blog

The future of Clank

Posted on January 26, 2014 by Wolfr

One of the problems of maintaining a UI framework has is that you are basically always chasing new design expectations and standards.

In past blog posts I have talked (or in some ways complained) that it’s impossible to keep up with the different platforms.

The main goal of Clank is to be able to rapidly prototype a mobile application.

Over the past few months I have been using Bootstrap 3 in a lot of projects. Their approach to UI, form controls, navigation bars etc. is really solid. It’s actually so good that I’m considering using BS3 as the base for all Clank front-end code.

The idea is get rid of all the custom CSS components and standardize on Bootstrap 3. This way, people already know the syntax (class="btn btn-default" instead of having to look up "cl-btn" as it is now)

Some parts that are not in Bootstrap that are specific to mobile, such as toggles, will remain in the framework. I can also imagine some specifics such as “chevron” style back buttons will remain in Clank. In a way, Clank will become an “add-on” to Bootstrap that is about prototyping native-looking UI.

So where does that leave Clank then? The goal of Clank is to be able to quickly prototype mobile apps, not to reinvent the wheel as a UI framework. We want to provide the right defaults (getting rid of the click delay on mobile, documenting some easy to use components) and also provide an environment to “test” and document your prototype in similar to what you see in demos.

First I want to check off these ideas with the community, so what do you think?

Clank 0.3.6

Posted on December 21, 2013 by Wolfr

Over the past few months, a lot of improvements have been added to Clank.

These are the major ones:

  • Make it clearer how to use Clank: if you download Clank now and open the index.html file it’s clearer how to get started
  • More components: we have added more components so it’s easier to prototype for the iPad and iOS7. A lot of components have been iOS7-ified to fit in with expectations on what a modern prototype should look like.
  • Animation: we added a method to animate between screens. If you’re curious check out this YouTube video. This is an undocumented feature and still a work in progress. If you’re feeling adventurous check out animation.html in the master branch.

You might be wondering what is going on with the versions. Clank started in June this year with a 0.1 release. The planned 0.2 release never happened, and now we suddenly have 0.3.6. I’m sorry for the confusion and aim to make releases more logical in the future. There is a better project structure in place to make it easier to work with Clank.

Full changelog

Repo organisation

  • The single Clank repository on Github has been split in 3 repositories: one for Clank itself, one for the documentation and a starter project using Jekyll.
  • Clank is now a bower component that is versioned using semantic versioning.

Added

  • Added a new tab bar (and badge) component. See the demo.
  • Added a new popover component (demo). This popover can be “spawned” from headers and footers.
  • Added font generation for 3 separate icon fonts (one for iOS, one for Android and once for the app itself)

Modified

  • Many styles have been iOS7-ified. I came to terms with the iOS7 look after hating it at first. Turns out it’s not so bad after all.
    • This release is very much iOS7 focussed so if you want to build an Android + iPhone app you are going to have a lot of work making the Android components look Android-y. This is a known issue and we will actively be working on giving Android the necessary attention. An alternative path we are considering is letting go of emulating platform styles completely and integrate Bootstrap 3 and build (mobile friendly) plugins around that ecosystem.
  • Z-indexes are now listed in the variables list (_vars.scss) for a birds eye view (similar to Twitter Bootstrap)
  • The loading spinner was modernized, now a circle instead of a traditional spinner

Regressions

Unfortunately there are are a lot of regressions in this release - in fact, too many to list. Clank is not a mature framework yet, many things will change around in releases. One cause of regressions is that I rid of the BEM syntax since I found it confusing. This has caused some class renaming, for instance:

  • .cl-view-all was renamed .cl-table-view-btn
  • .cl-table__extended was renamed to .cl-table-extended

A small update

Posted on September 01, 2013 by Wolfr

  • ChocolateChip-UI is an interesting framework that has the iOS7 look ‘n feel, as well as Android and Windows Pone 8. See their site. Unfortunately the code is BSD licensed (unlike Clank which is MIT licensed)
  • The 2 things that will make Clank better at this point are page transitions and Android specific headers
    • Work has started on animations but it could take a while given my current (client) workload.
  • Contributions to Clank are always welcome - get in touch if you want to help! Post issues on Github on contact me directly.

Hacker news surge

Posted on August 19, 2013 by Wolfr

Hacker news visitors

I posted the link to Clank to Hacker News yesterday, which led to a nice visitor boost. I would like to highlight one of the questions in the discussion thread:

The planned 0.2 release is delayed due to little public interest in Clank. -clank blog
Is user interest enough for the OP, or are you looking for other contributors?

To which I replied:

User interest is enough but contributors would be better to raise the bar.

I am specifically looking for someone with JS skills to handle building animation in between screens (similar to push.js in Ratchet). This in turn is inspired by jquery-pjax.

Explained in short - there should be some way to fetch the HTML for a “new page” replacing the older page without a page refresh. This way we can have nice CSS transitions between the pages. If we can plug the effects from something like Effeckt in there this could lead to nice demo/prototype material and will also give the native coders a good idea about the animation.

My speciality is UI design and CSS. My JS is not solid enough for framework quality javascript.

The demo UI works with Angular.js

Obviously there is more interest in the framework than I thought. One of the biggest ways to improve it would be the “views” I am talking about in the above comment. So, if you are a JS coder and interested in contributing let me know.

Follow @getclank on Twitter or subscribe to the RSS feed to get updates.

0.2 release delayed

Posted on August 18, 2013 by Wolfr

The planned 0.2 release is delayed due to little public interest in Clank.

Open source lives by community and I can’t motivate myself to work on a project without an audience.

Since I’ll be working on some iPad related projects it’s inevitable that Clank will evolve in the future - as I use it in client work some features will get integrated in the framework.

Follow @getclank on Twitter or subscribe to the RSS feed to get updates.

Building a simple app with Clank

Posted on July 05, 2013 by Wolfr

This video shows how easy it is to build a simple app with Clank.

This was made with a pre-release version. The bug with .cl-btn-icon-only not working has since been fixed.

You can download Clank on Github.

Follow @getclank or subscribe to the RSS feed to stay up to date.

0.1 released

Posted on July 04, 2013 by Wolfr

I am happy to announce that Clank 0.1 is released.

This release is focussed on providing basic functionality to create HTML prototypes for mobile devices. Download the release on Github.

The next release (0.2) will be on August 20th. It will focus on improving the framework and documentation.

Regardless of the (low) version number I use Clank in commercial work myself so I wouldn’t be afraid to use it, especially for prototyping work.

We are still looking for contributors. To get an idea of the things that need to be done, check out the issues on Github.

Welcome to the Clank blog

The latest and greatest on Clank. Follow us on Twitter or subscribe the RSS feed for updates.

Post archive

Similar frameworks