Bootstrap Touch

One of Twitter Bootstrap's largest gabs is, it's not optimized for touch-enabled devices. Yeah I mean, it's not optimized for these device-types, but it works okay. But sometimes, we as developers have to enlarge the functionality of a BS component. You all know, this is pain-in-the-ass.

For example, a UX expert wants to close the popover component by clicking on the whole document, instead of clicking on the link target again. You add some lines of code to popover.js, your UX expert is enormously happy, but the update capability of that component is no longer available. That sucks monstrous!

The next example is the foundation and the idea of a framework, that is build on top of BS, and I called it Bootstrap-Touch.

The Aim of Bootstrap-Touch

BS-Touch do not change the original BS Library sourcecode. It's a layer for touch interaction and visual improvements, that doesn't work as a standalone framework. The framework has a build-in touch detection and invoke its functionality only on touch or MSPointer enabled devices, like the iPhone or Nokia WindowsPhone. It's not a part of BS, it's an extension that works hand-in-hand with BS.

How it works

You have to load two additional files into your existing BS project.

bootstrap-touch.js
bootstrap-touch.css

If the plugin detects a touch-enabled device, it auto-overwrites the default component behavior and styling. If you are familiar with Grunt.js - the JavaScript Task Runner, you can also use a modified BS build process to integrate/concat BS-Touch directly into your bootstrap files (future Todo).

Project State

Currently, I work on a technical concept of such a framework. I'm trying to find an answer, on how this could be realized. Last Week, I released a early prototype of one BS component for touch-enabled devices. The project sourcecode is available on Github. See the live demo below.

Bootstrap TouchCarousel

[UPDATE] 11.02.2014 Projects page is online: http://ixisio.github.io/bootstrap-touch-carousel/

Next Steps

If you are interested in this project, please help me to find some cool ideas on how to realize something like this, fork the project on Github or just have a talk on twitter. In the following list, you can find a few ideas, bugs and improvements I've already collected. Feel free to complete the list..

Issue Tracker on Github

Comments

Ask me, criticize me, support me, discuss constructively or just share your thoughts on twitter @ixisio