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



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

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

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

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





    CSS




    Если кому-то будет интересен мой опыт выбора фреймворков: Skeleton использую на самых простых сайтах, Foundation — при верстке адаптивно на Wordpress, а Bootstrap — если надо быстро.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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 — модульная сетка с различающейся шириной колонок.

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