—»     —»   10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта
  Раздел: Фреймворки и Платформы   Нет комментариев  

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта



Bootstrap – восходящая звезда, стремительно набирающая популярность. Фреймворк был выпущен в августе 2011 года, и даже Twitter не ожидала такого успеха. К июню 2013 года, проект стал самым популярным проектом GitHub, направленным на разработку с более чем 52 тысячью отметок и более 16 тысяч форкинг-проектов. Bootstrap по-настоящему впечатлит вас, как только вы поймете, насколько просто можно реализовать множество комплексных вещей для веб-сайта. Но можно ли как-то этот фреймворк улучшить? Существуют ли какие-нибудь дополнительные инструменты? Конечно! Сегодня мы хотим поделиться с вами 10 ресурсами, которые помогут вам в вашем Bootstrap-приключении.

01. Jetstrap

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Это не просто инструмент для создания набросков, это премиум-инструмент для создания интерфейсов для Bootstrap.

Если вам нужен вектор в разработке интерфейсов при помощи Bootstrap, или вам просто хочется облегчить себе задачу, то вам определенно точно подойдет Jetstrap. Почему? Jetstrap расскажет вам, почему: «Жизнь слишком коротка для того, чтобы зарываться в документации, когда вам нужно быстро и просто разработать проект. Воспользуйтесь готовыми фрагментами кода для опрятной разметки, и используйте готовые комплексные компоненты. Разрабатывайте с высокой скоростью!» На самом деле, это правда. Так как этим инструментом невероятно просто пользоваться, он отлично подойдет как разработчикам, так и дизайнерам. Суть проекта напоминает другой генератор под названием Divshot. Просто выберите то, что вам нужно, и воспользуйтесь кодом.

Как это работает: это простой drag-n-drop интерфейс, который позволяет вам быстро создавать страницы при помощи элементов Bootstrap. Когда закончите разработку, экспортируйте полученный опрятный код, и готово!
Модель: коммерческая; стоимость от 16$.
Видео: http://youtu.be/AuTo_6id3J8
Веб-сайт: http://www.jetstrap.com

02. Kickstrap

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Полноценный набор для разработки сайтов: первый в своем роде, Kickstrap, представляет собой фреймворк внешних интерфейсов для разработки приложений, шаблонов и дополнений.

Опции данного инструмента немного отличаются от Jetstrap, так как этот фреймворк используется для расширения функционала Bootstrap. Важно отметить, что он позволяет вам добавлять привлекательные javascript-библиотеки (приложения) вроде Raphael.js (демо с Kickstrap), дополнительные свойства вроде Font Awesome, или даже дополнительные шаблоны при помощи Bootswatch.

Как это работает: можно расценивать этот набор как отличное дополнение к Bootstrap, который позволяет вам комбинировать несколько вещей вместе.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе.
Видео: http://vimeo.com/55423707#at=0
Веб-сайт: http://getkickstrap.com/

03. Paintstrap

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Создавайте привлекательные шаблоны Twitter Bootstrap при помощи цветовых схем Adobe Kuler / COLOURlovers.

Этот инструмент, по нашему личному наблюдению, используется очень редко, так как сообщество недооценивает его потенциал. Вот почему: Bootstrap предоставляется с уже установленными цветами, но как часто они подходят под ваши проекты? Очень редко, даже практически никогда! При работе с любой компанией, вам будет представлен строгий корпоративный стиль с определенными цветами и логотипом. Paintstrap не только позволит вам без труда работать с необходимыми цветами, но и также предложит вам воспользоваться COLOURlovers и Adobe Kuler.

Как это работает: введите id шаблона Kuler или id палитры в COLOURlovers, а затем выберите необходимые для ваших элементов цвета (при помощи окна предварительного просмотра в режиме реального времени). Когда закончите, экспортируйте ваш CSS и/или LESS-файл.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе.
Веб-сайт: http://paintstrap.com/

04. Divshot

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Конструктор интерфейсов для веб-приложений на основе drag-n-drop. Экспортируйте готовый адаптивный код HTML+CSS.

Нам кажется, что если и могут быть конкуренты Divshot, то это будет Jetstrap. Основная цель и функционал очень схожи – drag-n-drop элементы и код уже доступны для вас. Divshot, несомненно, отличается тем, с каким трепетом инструмент относится к полученному в результате коду, а также способностью интегрироваться с Bootswatch. Ну и конечно же, моделью ценообразования.

Как это работает: этот простой drag-n-drop интерфейс позволяет вам создавать страницы при помощи элементов Bootstrap шаблонов Bootswatch. Когда закончите разработку, экспортируйте полученный готовый опрятный код, и можно гулять!
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе, так как находился в состоянии бета. Правда, есть большая вероятность, что с выходом официальной версии, проект станет платным.
Видео: http://youtu.be/g9KhSUgf38A
Веб-сайт: http://www.divshot.com/

05. Fancyboot

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Fancyboot: быстро и просто оформляем Bootstrap-проект. Инструмент разработан для любителей Bootstrap.

Если вам хочется поработать над собственными bootstrap-файлами и при этом в режиме реального времени видеть изменения, которые вы вносите, то Fancyboot как раз подойдет вам. Палитра цветов? Есть! Дополнительные переменные? Есть! Предварительный просмотр в режиме реального времени? Есть! Это отличный и простой способ редактировать собственные проекты на Bootstrap, и просматривать изменения в режиме реального времени.

Как это работает: выберите плагины и компоненты, которые вы хотите включить в проект, и воспользуйтесь боковым меню, чтобы определить цвета для проекта. Наблюдайте за вносимыми изменениями в режиме реального времени.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе.
Веб-сайт: http://fancyboot.designspebam.com/

06. Bootswatch

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Bootswatch: бесплатные шаблоны для Twitter Bootstrap

Если вы дочитали до этого места, то заметили, что Bootswatch уже упоминался в тексте. Это потому, что он интегрируется с различными Bootstrap-приложениями. Bootswatch – это простые шаблоны для Bootstrap. Здесь все было предусмотрено заранее, поэтому вам ничего не придется делать.

Как это работает: скачайте CSS-код и воспользуйтесь им. Никакой путаницы с hex-значениями. Импортируйте файлы в несколько приложений, если захотите.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе.
Веб-сайт: http://bootswatch.com/

07. Bootsnipp

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Bootsnipp: дизайн-элементы и фрагменты кода для HTML/CSS/JS-фреймворка Bootstrap.

Bootstrap – это великолепный фреймворк, который значительно упрощает процесс реализации элементов на странице. Но бывают моменты, когда вам нужно использовать сразу несколько Bootstrap-элементов в соответствии, чтобы организовать действительно впечатляющий раздел на сайте. Bootsnipp позволяет вам воспользоваться полезными фрагментами кода Bootstrap, и вставить их на сайт. Среди примерных фрагментов кода можно отметить прейскуранты, формы оплаты и ввода адреса, формы авторизации и многие другие.

Как это работает: кликните по нужному фрагменту кода, и выделите код, а затем вставьте его на сайт.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе (правда, есть возможность пожертвовать символическую сумму)
Веб-сайт: http://bootsnipp.com/

08. Form Helpers

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Bootstrap Form Helpers: возможность расширить Bootstrap-компоненты 12 отдельными jquery-плагинами.

Bootstrap действительно сильно повлиял на процесс разработки, но некоторые утверждают, что и этих изменений недостаточно. Надо добавить еще чего-нибудь. Каким же образом можно дополнить Bootstrap? Например, можно дополнить его удобными сниппетами кода. Теперь вы сможете использовать заранее заполненные списки стран, формы ввода телефонных номеров с указанием формата, блоки выбора с фильтрами и многое другое.

Как это работает: скачайте набор, нажав по большой синей кнопке, скопируйте необходимые файлы и папки, и встройте их в собственный сайт.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе
Веб-сайт: http://vincentlamanna.com/BootstrapFormHelpers/

09. Bootstrap Lightbox

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Bootstrap Lightbox: простой lightbox-плагин на базе bootstrap-плагина modal.

Очень простой инструмент. Вы добавляете функционал lightbox на ваш сайт, основанный на bootstrap. Lightbox также позволяет вам указывать подписи. Это простое дополнение, которое поможет вам улучшить ваш проект на Bootstrap.

Как это работает: опять же, скачайте набор, нажав по большой синей кнопке, скопируйте необходимые файлы и папки, и встройте их в собственный сайт.
Модель: по состоянию на июнь 2013 года, проект распространялся на некоммерческой основе
Веб-сайт: http://jbutz.github.io/bootstrap-lightbox/

10. Сделано на Bootstrap

10 убойных ресурсов для модернизации вашего следующего Bootstrap-проекта

Подборка сайтов и приложений, разработанных при помощи Twitter Bootstrap.

И финальный ресурс данной подборки поможет вам познакомиться с готовыми Bootstrap-сайтами. На самом деле, это сайт-галерея сайтов, организованных при помощи Bootstrap. Эти сайты профессионально исполнены, и на них используются всевозможные прелести Bootstrap. Отличный ресурс для вдохновения.

Как это работает: посетите http://builtwithbootstrap.com/
Модель: проект распространялся на некоммерческой основе, правда со множеством рекламных объявлений
Веб-сайт: http://builtwithbootstrap.com/

Надеемся, что вам понравилась данная коллекция убойных Bootstrap-ресурсов. Может быть, у вас есть что порекомендовать? Расскажите о них в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Twitter Bootstrap
Опубликовал Design FactoRy   Прочитано (раз): 6797   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930