Bootstrap vs Foundation - два основных CSS-фреймворка
В этой статье мы сравним два фреймворка: Bootstrap и Foundation. Подробнее о том, как использование фреймворка может ускорить и упростить процесс разработки, можно прочитать ниже:

Что такое CSS Framework?
Разработка сайта или приложения может потребовать много времени и усилий. CSS-фреймворки обычно используются разработчиками и веб-дизайнерами как инструмент для ускорения рабочего процесса.
CSS-фреймворк также иногда называется интерфейсной платформой. Он представляет собой пакет, состоящий из определенных HTML, CSS и JS, которые можно использовать при создании веб-проекта. Благодаря этому не нужно вводить код каждый раз, когда создаете сайт или веб-приложение. В этой статье мы уделим особое внимание интерфейсным фреймворкам.
CSS-фреймворк состоит из следующих компонентов:
- HTML-код, который помогает создать структуру страницы;
- Стили типографики;
- CSS для визуального изменения элементов (стандартный набор простых в использовании классов);
- JavaScript для изменения динамических элементов, таких как выпадающие меню и т. д.;
- Адаптивные медиазапросы;
- Исправления ошибок кроссбраузерной совместимости.
Если мы посмотрим на Google Trends для CSS фреймворка Bootstrap 4 (альфа-версии) и «Foundation 6» (последней версии), похоже, что с Bootstrap работают гораздо активнее. В этой статье мы сосредоточимся на сравнении Bootstrap 4 и Foundation 6. Первый Bootstrap 4 alpha был представлен более года назад и на данный момент он почти запущен:

Согласно данным BuiltWith, 11,8% из 100 тысяч лучших сайтов используют Bootstrap. И 2,3% - Foundation Framework.
Преимущества и недостатки использования фреймворков
Существует множество преимуществ использования CSS-фреймворков. Одним из них является возможность не начинать каждый проект или сайт полностью с нуля. Наличие хорошей базы может сэкономить много времени.
Вот несколько других преимуществ:
- Легче поддерживать код с помощью сниппетов и библиотек;
- Лучшая организация и более простая установка;
- Более простые решения, которые уже созданы для вас;
- Адаптивные медиазапросы и исправления ошибок кроссбраузерной совместимости;
- Большинство из них бесплатны и имеют открытый исходный код;
- Стабильный и протестированный код от сотен разработчиков;
- Возможность участвовать в Github;
- Регулярные обновления, исправления ошибок и новые функции.
Но использование фреймворка Bootstrap 3 на русском может быть сопряжено с рядом недостатков:
- Иногда требуется настроить много параметров, чтобы заставить его работать;
- Нужно ознакомиться с документацией для изменений при обновлении;
- Может отсутствовать необходимая функция, с помощью которой нужно ввести сторонний актив;
- Наличие ненужного кода.
Bootstrap
Bootstrap, который первоначально назывался Twitter Blueprint, был создан Марком Отто и Джейкобом Торнтоном и выпущен 19 августа 2011 года.
"Небольшая группа сотрудников Twitter начала улучшать внутренние аналитические и административные инструменты нашей команды. После предварительных обсуждений этого продукта мы поставили перед собой более амбициозные задачи по созданию инструментария для тех, кто может использовать его в Twitter и за его пределами. Таким образом, мы намеревались создать систему, которая помогла бы создавать новые проекты на ее основе, так и появилась идея Bootstrap." - Марк Отто

Это внешний интерфейс с открытым исходным кодом, состоящий из HTML, CSS и JavaScript. Он имеет модульную структуру и в версии 3 состоит из таблиц стилей LESS. Но начиная с Bootstrap 4, разработчики перешли на использование препроцессора Sass CSS.
Он основан на сетчатой системе 1,170 пикселей, которая представляет собой адаптивный макет. В пакете фреймворка Bootstrap 3 (в настоящее время доступна версия 4.0.0-alpha.3) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями:

Фреймворк Bootstrap поддерживает последние стабильные версии основных браузеров и платформ. Что касается Windows, то поддерживаются Internet Explorer 9-11 и Microsoft Edge, но не IE8. Если нужна поддержка этого браузера, используйте Bootstrap 3:

Foundation
Адаптивный frontend фреймворк, созданный ZURB. Он имеет открытый исходный код. Foundation был выпущен в 2011 г. по лицензии MIT. Данный фреймворк имеет модульную структуру и состоит в основном из стилей Sass. Он построен на основе сетки в 940 пикселей, которая является адаптивным макетом.
Foundation также предоставляет пользователям стартовые шаблоны, позволяющие быстрее создавать веб-проекты. Вот список некоторых известных брендов, использующих Foundation: Adobe, eBay, EA, Amazon и Mozilla:

В загрузочном пакете Foundation (в настоящее время Foundation 6) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями.
В Foundation версии 6 разработчики значительно сократили размер выводимого файла CSS, реализовав примерно 40-50% сокращение кода:

Foundation поддерживает последние стабильные версии всех основных браузеров и платформ.
Касательно Windows: поддерживаются Internet Explorer 9-11. Но Foundation не поддерживает IE8 из-за некоторых свойств сетки, которые он использует, а также JavaScript:

Bootstrap vs Foundation
- И фреймворк Bootstrap 3, и Foundation (последние версии) теперь используют SASS и примеси;
- В обоих фреймворках есть система сеток, но у Foundation есть то, что они называют адаптивными желобами;
- Для сброса стилей в Bootstrap используется reboot.css, а Foundation - normalize.css;
- Оба фреймворка поддерживают до 12 колонок с шириной смещения до 75 em.
Ниже приведено несколько примеров различий синтаксиса.
Синтаксис класса одного столбца
Bootstrap
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-xl-1
Foundation
.small-1.columns
.medium-1.columns
.large-1.columns
.[custom]-1.columns
Контейнеры
Фреймворк Twitter Bootstrap
<div class="container">
или
<div class="container-fluid">
Foundation
<div class="row">
Желоба
Bootstrap
Недоступно.
Foundation (функция от Foundation)
<div class="row large-collapse medium-uncollapse [custom]-collapse">
Медиазапросы
Bootstrap
// Сверхмалые устройства (смартфоны с книжной ориентацией, меньше чем ??? пикселей)
// Не определены медиазапросы, так как в Bootstrap это размеры по умолчанию
// Малые устройства (смартфоны с альбомной ориентацией, 34em и более)
@media (min-width: 34em) { ... }
// Средние устройства (планшеты, 48em и более)
@media (min-width: 48em) { ... }
// Большие устройства (компьютеры, 62em и более)
@media (min-width: 62em) { ... }
// Сверхбольшие устройства (большие мониторы, 75em и более)
@media (min-width: 75em) { ... }
// Примеси Sass
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
Foundation
// Малые
Нет
// Средние
@media screen and (min-width: 40em)
// Большие
@media screen and (min-width: 64em)
// [Пользовательские]
@media screen and (min-width: [custom]em)
// Пользовательские контрольные точки(Sass)
$breakpoints: (
//все значения в пикселях преобразуются в em
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
[custom]: ...px,
);
Вложенные столбцы
Фреймворк Bootstrap
<div class="row">
<div class="col-sm-9">
<div class="row">
<!-- вложенные столбцы до 12 штук -->
<div class="col-xs-8 col-sm-6">...</div>
<div class="col-xs-4 col-sm-6">...</div>
</div>
</div>
</div>
Foundation
<div class="row">
<div class="small-6 columns">
<div class="row">
<!-- вложенные столбцы до 12 штук -->
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div>
</div>
</div>
Столбцы смещения
Bootstrap
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4 col-md-offset-4">...</div>
</div>
Foundation
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
Активность
Оба фреймворка активны на Github. Некоторые из их недавних обновлений вы можете увидеть в таблице, приведенной ниже.
Фреймворк Bootstrap практика адаптивной верстки - второй по величине проект на GitHub - более 98 000 звезд и более 44 000 форков. Foundation имеет более 23 000 звезд и чуть более 5000 форков.
Активность на Github | Bootstrap | Foundation |
Количество открытых обсуждений | 444 | 338 |
Количество открытых вопросов | 185 | 78 |
# действий в последние 30 дней | 40 | 9 |
Заключение
CSS-фреймворки - это мощные инструменты, которые могут помочь упростить процесс разработки и проектирования. Хотя кажется, что Bootstrap используется более широко, на самом деле это не значит, что какой-то фреймворк лучше, чем другой. Все зависит от конкретного разработчика и того, что именно ему удобно использовать.