The Clank Blog

On platforms and looks

Posted on June 26, 2013 by Wolfr

My initial goal with Clank was to simulate the “native” look as much as possible. I wanted to make web apps that looked like native apps.

However, given the recent developments in mobile OS land (Firefox OS, iOS7) I decided it’s better to provide a framework with good defaults that I can stand behind instead of chasing ever-changing platform looks.

Platforms will change but good UI design will stay. I’m aiming to provide a framework that can help create meaningful cross platform web apps like forecast.io. With the skinning mechanisms in Clank you can quickly the look the way you want.

Here’s a small video showing off the skinning mechanism:

Towards 0.1 - update 2

Posted on June 24, 2013 by Wolfr

So, Clank is evolving at a rapid pace. The goal of the 0.1 release has mostly been reached with the addition of new components. The only bigger todo left is implementing an improved homepage design.

New components: forms, article, data table, sliders, toggles

Article Provides styles for articles
Forms Provides styles for forms
Data table Provides styles for data table styling (similar to Bootstrap tables)
Sliders Provides styles for slideshows (similar to Ratchet sliders)
Toggles Provides styles for on/off toggles (similar to Ratchet toggles)

Clank forms on iPhone 5

0.2 aims aka the future of Clank

I’ve been thinking about the ways Clank will evolve. These are some of the things I’m thinking about:

  • A way to switch between pages without reloading the page, pjax style
  • Page transitions: implement CSS animations between pages
  • Choose a lightweight JS framework for basic DOM manipulation (zepto.js?)
  • Implement a working “radio list” (see radio button implementation)
  • Improve the skinning mechanism so it accounts for all kinds of color choices
  • Make multi touch demos work on desktop (e.g. fingerblast.js)

This blog’s theme is open source

The theme of this blog has been open sourced.

Release date

Clank 0.1 will be released by the end of the month.

Towards 0.1!

Posted on June 18, 2013 by Wolfr

I wanted to talk a bit about the updates to Clank the past few days and where things are going.

What is Clank?

Since Clank is still relatively unknown allow me to repeat what Clank is. Clank is an open source HTML/CSS framework for prototyping mobile applications. It aims to provide HTML/CSS components that you can freely use in your projects. Think of it as Twitter Bootstrap but for prototyping native looking applications.

Clank 0.1 aims

As mentioned before I am aiming to release Clank 0.1 by the end of the month. The main goal of the first release is to provide HTML/CSS for common components like form elements, buttons, button groups, headers and footers.

Website updates

I’ve been working on the site so it’s a nice place to go to for documentation. For example, go to the table view demo to get a good idea of how you would read the docs for a component.

The main goal is a “professional” looking website so Clank looks like a project you can trust and can build your codebase on.

Branding

I worked a little bit on the branding aspect: there is a logo now, there is a favicon. It’s basic and not much but adds some visual flair. When this gets more popular I’ll invest in a better logo - or maybe someone in the community is more talented in branding than I am.

Any feedback is welcome. If you have bugs, suggestions, questions, ideas - file a Github issue or mention @getclank on Twitter.

Contextual code

Posted on June 16, 2013 by Wolfr

The new layout for the docs allows you to see the component code in context with what it looks like:

Contextual code

Go check it out!

CSS encapsulation

Posted on June 16, 2013 by Wolfr

I want to talk a bit about Issue #24 which is that the stylesheet of the documentation clashes with the sylesheet of Clank itself.

If you look at the demos you’ll see a device you can manipulate using the form elements on top. You can change the device type, size and orientation.

I want the styles within this device frame to be independent of the rest of the page. The device frame (e.g. an iPhone) should load the Clank styles, within the documentation page, yet not conflict with the documentation styles.

See, in Clank there are CSS styles (applied to all clank components):

p {
  font-size: 14px;
  color: #333;
}

But then in the docs there are also styles

p {
  font-size: 15px; /* Some other font size */
  color: #555; /* Some other color */
}

I want the styles of to be separate; then work with the page DOM as a whole.

The simplest solution is to scope everything manually like this:

.cl-docs p {
  font-size: 14px;
  color: #333;
}
.cl p {
  font-size: 15px; /* Some other font size */
  color: #555; /* Some other color */
}

However, this leads to a lot of unnecessary CSS. The fact that there are docs is irrelevant to people using Clank. Especially on mobile we want to keep the file size as low as possible.

I could solve this problem using an <iframe> but that feels a bit messy. I won’t be able to access whatever is inside the iframe.

Why do I need access to the contents of the frame? Well, for example, I want to change up the DOM from my host page to show animations between screens (similar to the animations in Ratchet). I don’t want “full encapsulation”. I just want my styles to be encapsulated.

I experimented a bit with scoped stylesheets and iframes but these are not real solutions. I wrote everything up on this Github repo in hopes of finding a solution.

Now I’m thinking my solution is using web components. In this Google I/O video, the concept of web components is explained very well. It’s worth a watch because this is the future of the web.

I’m documenting this as I go along because the future of the web depends on use cases. If anyone has thoughts/suggestions/ideas, leave a comment!

A little update

Posted on June 13, 2013 by Wolfr

What happened in Clank world so far?

  • The website got updated with a real blog which you are reading now. The Wordpress blog had a very short life. RIP.
  • Every post can be commented on. Using Disqus for the moment.
  • For those people still using RSS (I know I do) there’s an RSS feed to stay up to date. Subscribe using this URL: http://getclank.com/atom.xml.
  • The demo section got updated. View the current demos here. Note that things look best in Webkit based browsers. I recommend using Chrome for now. I am working on more support but want to find a balance between cutting edge CSS and browser support.
  • iOS 7 was announced. I’ve been watching some of the #wwdc videos and I am not happy. There are some good ideas in there but let’s hope things improve visually with the final release. The interaction design is interesting, exploring the z-index. I hope to bring that to Clank so we have a good way to prototype native apps. Due to Apple’s NDA I can’t really talk about this as much as I’d like.
  • I discovered a similar project to Clank called Fries that is alsor released under the liberal MIT license so some of that code might find it’s way in this project (or the reverse)
  • I set a date for the 0.1 release and it’s going to be the end of June, so this month.

I am still looking for contributors to the project. File a github issue, check out the code, let me know if you want to help.

CSS Gradient Strokes

Posted on June 06, 2013 by Wolfr

If you look closely at iOS buttons, you’ll see that they actually have a gradient running in their strokes:

There is no CSS gradient stroke feature in CSS. Fortunately, we can fake it with pseudo elements.

In the first version of Clank, I had extra elements around my buttons to make it work properly:

  <a class="btn"><span><span>Hello</span></span></a>

This is problematic for framework adoption since it’s another thing people will have to learn.

This pretty messy code since changed to:

  <a class="cl-btn">Hello</a>

I did manage the gradient strokes by hooking them to the :before and :after elements. E.g. let’s say you have a button with a green to dark green gradient background:

.cl-btn {
  background: linear-gradient(to bottom, green 0%, darkgreen 100%); /* W3C */
}

If we include two pseudo elements that contains 100% of the space of the original element, we can use these to fake our new background:

.cl-btn:before,
.cl-btn:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  min-width: 100%;
  white-space: nowrap;
}

By using a negative z-index we can order the :before and :after elements:

.cl-btn:after {
  top: -1px;
  left: -1px;
  padding: 1px; /* This makes for 1px gradient border */
  z-index: -2;
}

.cl-btn:before {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
}

Because we used negative z-index, create a new stacking context on .cl-btn so the elements don’t go below the original “page”.

.cl-btn {
    // Create new stacking context for :before and :after
    z-index: 1;
}

Now if we apply our backgrounds to the new pseudo elements, we have gradient borders without extra markup:

.cl-btn:before {
    background: linear-gradient(to bottom, green 0%, darkgreen 100%); /* W3C */
}

.cl-btn:after {
    background: linear-gradient(to bottom, darkgreen 0%, reallydarkgreen 100%); /* W3C */
}

Now, the reality is a bit more complicated.

A simple implementation without z-indexing can be found here (demo).

If you’re feeling brave, poke around in the SCSS source for Clank here.

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