Пользователь
0,0
рейтинг
28 октября 2012 в 04:28

Разработка → Сравнение адаптивных CSS фреймфорков: Bootstrap, Foundation и Skeleton



Недавно Brian Haveri в блоге vermilion.com сделал отличное наглядное сравнение популярных CSS-фреймворков (статья), которые можно использовать для разработки адаптивных сайтов.

За последний год мне удалось поработать со всеми этими фреймворками: Bootstrap, Foundation и Skeleton, и могу сказать, что в свое время такая табличка сохранила бы кучу времени. Поэтому я перевел ее на русский язык, добавив немного своих комментариев. Надеюсь будет полезно хабровчанам.

К сожалению, хабр не позволяет вставлять нормальные таблицы, поэтому вот скриншоты и ссылка на полное сравнение.

Общее сравнение





CSS




Если кому-то будет интересен мой опыт выбора фреймворков: Skeleton использую на самых простых сайтах, Foundation — при верстке адаптивно на Wordpress, а Bootstrap — если надо быстро.
@grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (32)

  • +5
    Foundation V3 очень понравился, раньше немного косячил сборщик custom билда для «ленивых». Но в целом произвел хорошее впечатление.

    Bootstrap До сих пор кажется очень обвесным, и работая с обоими FW, пришел к выводу что быстрее дописать стили для Foundation чем убрать лишние из Bootstrap.
    • +9
      Кстати буквально несколько часов назад Foundation обновился до 3.2.2
      В Апдейт вошли:
      • Плагин Magellan — прилипающее к шапке меню, при скролле.
      • Плагин Joyride — Для создания «Туров по сайту», эдакие пошаговые Popup показывающие куда кликать и что там есть :)
      • UI Pricing Tables — Для красивых прайсов.


      По случаю праздника Разработчики также включили в сборку 5 новых HTML Шаблонов
      Более подробно здесь.
      • 0
        Сейчас ссылки на плагины уже другие.
  • +11
    Хорошие конечно таблицы, но текст картинками меня немного даже смущает ))
  • +4
    Дополню, что поддержка sass в бутстрапе решается установкой npm пакета для node или gemа для руби. Оба актуальные форки less версии.
  • +4
    Для админок использую давно bootstrap.
    А для фронтенда искал что-то более легкое и в текущем проекте остановился на Kube
    Foundation 3 — заинтересовал, в свободное время надо ознакомится поближе.
    • +3
      Kube интересно, но вот Redactor вообще круто!
      • 0
        — платный, см. прайс;
        — не использует айфрейм, т.е. стили админки напрямую будут влиять на оформление текста в редакторе.
        • +2
          — платный, то платный, но за хороший скрипт не жалко заплатить.
          — может быть минус, но у меня админка использует стандартные стили, это не страшно
          • 0
            Я не спорю, просто делюсь опытом. Сам недавно вынужден был искать wysiwyg. Я их терпеть не могу, но тут не обошлось. Остановился на Cleditor.
      • 0
        Я тоже очень обрадовался. Правда потом выяснилось что он платный. А к примеру elrte.org/demo не хуже. К тому же у него превосходный файловый менеджер elfinder.org.
        • 0
          К слову файловый менеджер с Redactor мне больше понравился. Он менее функциональный, но для редактора намного лучше подходит. Но придется пользоваться тем что есть.
          • 0
            Для некоммерческого использования он бесплатен.
            github.com/dybskiy/redactor-js
            • 0
              К сожалению такое использование мне не подходит.
            • 0
              на гитхабе версия 8.0.3, а на сайте — актуальная 8.1.1
    • +1
      Спасибо за наводку на Kube — понравился.
    • 0
      И как субъективно Kube?
      Всё порываюсь его попробовать.
      • 0
        Использую уже в двух текущих проектах.
        По началу были непривычны имена классов в сетке. Но по мере разработки привык.
        Есть весь необходимый (мне) минимум для разработки фронтенда.
        При этом очень легкий — в скомпилированном виде css занимает меньше 16 кб.
  • +6
    У вас написано, что одним из основных изменений 3 версии Foundation — это… поддержка IE7., однако в таблице наоборот, вторая версия поддерживает IE7+, а третья IE8+. Где же истина?
    • –1
      Там не написано, что они делали эту поддержку, они могли её и удалять. Долго. С кровавыми соплями :)
      Как раз на целую версию хватило.
  • –6
    Делать ад ап т иную верстку Самому настолько просто, что меня иногда удивляет вся эта бешеная популярность готовых фреймворков И темплейтов
    • +4
      Зачем изобретать велосипед? Для кого-то быстрее воспользоваться готовым решением, а кто-то просто не хочет заморачиваться с версткой и вдобавок получить приличный вид (той-же админки например)
    • +2
      > Делать ад ап т иную верстку Самому настолько просто

      Не надо рассказывать сказки
    • +7
      Делать-то просто.
      Отлаживать на куче девайсов муторно.
  • +2
    Всё-таки не зря бутстрэп так популярен, он сильно отличается от других фреймворков внешним видом и продуманностью. Его можно без изменений использовать на сайте, тогда как другие без допилки выглядят весьма посредственно.

    А вообще, хотелось бы увидеть в сравнении больше фреймворков. Их ведь сейчас целая куча, может, есть и такие, которые ни в чем не уступают бутстрэпу.
  • +1
    Bootstrap использую для быстроты, это да. Но если честно, если мне нужна просто сетка и сайт не в стилистике бутстрапа, я использую исключительно BluePrint. Более удобной сетки, я для себя просто не находил. Она ведет себя именно так, как я ожидаю.
  • +6
    99lime.com/ — HTML KickStart тоже ничего. На небольших сайтах просто на ура работает.
    • +4
      Вот в чём весь кайф хабра, так это в комментариях.
      Спасибо. Мне очень понравилось. Лёгкий и удобный. Во многом даже удобнее бутстрапа, хоть и без обширной инфраструктуры последнего.
  • +1
    Склетон хороший для простых сайтов, жаль что автор на него подзабил — на гитхабе висит куча пулл реквестов и ишей.
  • +2
    Я выбрал SUSY.
    — позволяет задавать блокам семантические классы;
    — заменит дефолтный blueprint в следующей версии compass;
    — легковесный, не содержит элементов интерфейса, как foundation и bootstrap.
    • 0
      Пользуюсь Susy, очень доволен. Responsive модульная сетка. SASS — требуется.

      Также стоит упомянуть Singularity — модульная сетка с различающейся шириной колонок.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.