The mobile application prototyping tool, Ratchet, has been promoted to a full application framework. Version 2.0.2 of Ratchet was has been released and is a complete re-write (from version 1) using the SASS CSS pre-processor. Besides the overhaul, Ratchet now sports iOS and Android styles in addition to the existing Base Ratchet theme. A new icon font called "Ratcheticons" is now available, as well as three example applications to show off the different themes. The documentation has been overhauled for the new release and the project itself has been moved to become part of the Bootstrap GitHub orginization.
Ratchet originated as a set of HTML/CSS prototypes for the Twitter for iOS native application. After seeing how critical these prototypes were to the development process, the team decided to open source it as a mobile prototyping kit. It soon became clear to the team that not only was Ratchet well suited for building mobile prototypes, but also full fledged mobile applications.
Originally written in plain CSS, version 2.0.2 now uses the SASS pre-processor language. Ratchet's co-creator Connor Sears said that the SASS re-write came from wanting the "flexibilty of a preprocessor". Connor notes that he chose SASS simply because it was what he was most familiar with it. The Bootstrap project itself (of which Ratchet is now a part) uses the LESS pre-processor for CSS.
Ratchet originally had only one style that could be tweaked with CSS. There are now three styles to support multiple form factors. The original Base style is still present, but there are now iOS and Android styles which better suit their respective operating systems. For the most part, this just involves styling, but there are some components such as the Popover which behave very differently given the specified platform.
Ratchet does not try and do anything specific in terms of platform or browser with the CSS. It aims to keep things simple so that it is easier to understand and implement.
The new Ratcheticons icon font contains 45 common application icons. These icons are displayed with HTML Pseudo-elements. For instance, a gear icon can be displayed with a simple span and a CSS class.
<span class="icon icon-gear"></span>
The class for the gear icon contains the Unicode for the designated font character which is displayed in the :before Pseudo-element.
.icon-code:before { content: '\e812'; }
Three full fledged application examples are now available with the overhauled Ratchet documentation. These examples allow developer to test Ratchet on their mobile devices as well as provide a starting point for new applications. Right now, Ratchet has Movie Finder(Base Theme), iOS Mail(iOS Theme) and Android Notes App(Android Theme) examples.
Ratchet has also now been moved to the Bootstrap GitHub repository. Connor explained this move saying, "Ratchet has always been kind of a 'little brother' to Bootstrap. It just felt natural to move Ratchet into the Bootstrap org." He pointed out that while Ratchet has been moved into the Bootstrap org, there are no plans to "merge" the frameworks. "we'll continue to bring our [Ratchet and Bootstrap] CSS architecture into parity. Basically, I want people who are familiar with Bootstrap [to] feel at home using Ratchet's CSS.
Ratchet has gained a lot of popularity on Github now with over 7,900 stars. Bootstrap itself has over 66K stars by comparison. It can be downloaded from the official Ratchet site, or the twbs Github repository.