Clank — HTML/CSS фреймворк для прототипирования мобильный приложений

Clank — новый онлайн инструмент в открытым кодом, который может быстро создать прототип мобильного приложения. Фреймворк написан с использованием SCSS, результат можно сразу увидеть, «обернутый» в мокапы нескольких девайсов: IPhone 4/5, iPad 3, Galaxy Nexus и Nexus 7, причем и в альбомном, и в портретном положении.

Элементы интерфейса очень похожи на UI реальных мобильных приложений, поэтому прототипы получаются очень реалистичные. HTML/CSS компонентов фреймворка достаточно много, подойдет для представления большинства приложений, порадовало наличие alert’ов. Получающийся HTML-код на удивление лаконичен.

<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">Bell</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">App title</h1>         </div>         <div class="cl-content">           <!-- Content here -->         </div>         <div class="cl-bar-footer">           <!-- Footer content here -->         </div>       </div>     </div>   </div> </div> 

С помощью переменных SCSS можно менять внешний вид фреймворка, в том числе для придания вида нужной ОС, например Android или iOS. Что касается поддержки браузерами, то из-за использования таких штук как flexbox, Clank корректно отображается только в современных браузерах.

В планах на будущее: автоматическая создание иконочных шрифтов для проекта из папки с SVG-файлами, поддержка Grunt + Jekyll, генераторы — bash-скрипты, ускоряющие процесс, новые компоненты, лучшая их стилизация под нужную ОС.

Сайт проекта/ Демо / Страница GitHub / Twitter

О похожем инструменте — Ratchet, я уже писал на Хабре, но Clank нравится больше в силу его функциональности.