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

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

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

Пример разметки демо, вывод на экране IPhone 4

<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 нравится больше в силу его функциональности.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html