Есть ли жизнь вне Twitter Bootstrap или CSS фреймворки, о которых вы возможно не знали

Эта статья вдохновлена интереснейшей статьей «Beyond Bootstrap and Foundation: Frameworks You’ve Never Heard Of«, написанной Tahir Taous. Сначала я хотел написать перевод, но в итоге список фреймворков поменялся больше чем на половину.

CSS фреймворки, такие как Twitter Bootstrap, Foundation и другие прекрасно подходят для создания красивых, адаптивных, кросс-браузерных дружественных сайтов, быстро и легко, без необходимости написания множества кода.
В то время как Bootstrap и Foundation являются двумя наиболее известными css фреймворками, есть и другие, о которых многие из вас, вероятно, не слышали. О них и пойдет речь.

Semantic UI

SemanticUI

Самая мощная штука из здесь представленных.

Semantic UI содержит действительно хороший комплект интерфейс инструментов. Обзор отличий Semantic UI вы сможете найти на их странице введения. Фреймворк полностью адаптивный, все компоненты определяются с помощью ems или rems.

Одно из основных ударений фреймворка — семантичность классов.

Компоненты, предлагаемые Semantic UI включают кнопки, анимированные кнопки, разделители, значки, изображения, метки, всплывающие окна, сегменты, кастомизированные checkbox’ы и radio, text loader’ы и многое другое. Есть интересные приемы в этом фреймворке. Например вы можете использовать метки, чтобы отобразить «ленточку» в углу элемента.

Другие особенности фреймворка включают возможность добавить ‘Disabled’ состояние картинкам и значкам, в которых могут быть отформатированы разные цвета и размеры. Ряд популярных иконок включен благодаря сервису Fontello.

ПОмимо этого есть целые составленные модули, например лента комментариев.

Скачать Semantic UI


Pure

Pure

Pure — это набор маленьких, адаптивных css модулей, которые вы сможете использовать в каждом проекте.

А еще это самый маленький css фреймворк, который я видел. Но при этом все базовое вроде бы на месте — формы, таблицы, менюшки, сетка.

У ребят тоже есть кастомизатор

Скачать Pure


UIkit

UIkit

UIKit это легкий и модульный front-end фреймворк для разработки быстрых и мощных веб-интерфейсов. Легкий здесь не просто к слову — визуально элементы смотрятся очень скромно и слаженно.

UIKit разработан на LESS и, как многие фреймворки с открытым исходным кодом, предлагает готовые компоненты и дополнения.

The Markdown является одним из уникальных и полезных дополнений. Он позволяет создать reach-markdown редактор в реальном времени с поддержкой HTML и подсветкой синтаксиса.

C Sortable дополнением вы можете создать вложенные списки, которые можно сортировать путем перетаскивания.

Datepicker и TimePicker дополнения также доступны, а также Sticky дополнение для фиксирования навигационных элементов.

У ребят также есть Customizer для изменения базовой темы фреймворка.

У них есть даже autocomplete для Sublime

Скачать UIkit


Kube

Kube

Kube — это единственный альтернативный фреймворк, который я пробовал в работе из всех здесь представленных. И я могу заявить, что он работал.

Хотя к слову признаться я пользовался этим фреймворком в версии 2.0, тогда в нем были еще javascript плюшки (теперь вот выпилены) и он почти не уступал bootstrap2.

Скачать Kube


Ratchet

Ratchet

Ratchet больше ориентирован на разработку мобильных сайтов и веб-приложений. В базовой комплектации поставляются отдельные css файлы для iOS и Android.

Набор элементов широк. На экране все смотрится гладко и сдержанно. Формы, переключатели, поповеры, модальные окна и полноэкранное слайдшоу.

Скачать Ratchet


Ionic

Ionic

Ionic — это красивый front-end фреймворк для разработки гибридных мобильных приложений на HTML5. Он все еще на ранней стадии разработки.

Да, и он очень похож на Ratchet.

Ionic является бесплатным и с открытым исходным кодом, и он предлагает библиотеку мобильных оптимизированных HTML, CSS и JavaScript компонентов для построения интерактивных приложений. Он построен на Sass и оптимизирован для AngularJS. Чтобы получить максимальную отдачу от Ionic, требуется AngularJS, хотя вы все еще можете использовать функции CSS без Angular.

Команда Ionic планирует выпустить Cordova/PhoneGap плагины в будущем чтобы расширить возможности ваших мобильных приложений. Сам фреймворк написан на SASS, так что поклонники SASS могут легко изменить переменные и миксины.

Превьюшка фич сделана «внутри» мобильного телефона, как и у Ratchet.

В общем планы наполеоновские. Но в целом проект еще сыроват.

Скачать Ionic


css-frameworks-comparison

Также ко всему этому есть замечательное сравнение css фреймворков на http://usablica.github.io/front-end-frameworks/compare.html

Полезно(12)Бесполезно(0)

5 Responses to “ Есть ли жизнь вне Twitter Bootstrap или CSS фреймворки, о которых вы возможно не знали ”

  1. спасибо за интересную подборку!

    Полезно(0)Бесполезно(4)
    • Городецкий

      Городецкий

      Рад помочь!

      Полезно(1)Бесполезно(1)
  2. Отличная статья! спасибо

    Полезно(4)Бесполезно(1)
    • Городецкий

      Городецкий

      Спасибо

      Полезно(0)Бесполезно(0)
  3. можно topcoat использовать

    Полезно(0)Бесполезно(0)
Комментарии закрыты.