Bootstrap vs Foundation - два основных CSS-фреймворка

  1. Статьи
  2. Веб-фреймворки
  3. Bootstrap
0 ∞

В этой статье мы сравним два фреймворка: 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 был представлен более года назад и на данный момент он почти запущен:

Что такое CSS Framework?
Как перейти с Bootstrap 4 на Bootstrap 5

Согласно данным BuiltWith, 11,8% из 100 тысяч лучших сайтов используют Bootstrap. И 2,3% - Foundation Framework.

Преимущества и недостатки использования фреймворков

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

Вот несколько других преимуществ:

  • Легче поддерживать код с помощью сниппетов и библиотек;
  • Лучшая организация и более простая установка;
  • Более простые решения, которые уже созданы для вас;
  • Адаптивные медиазапросы и исправления ошибок кроссбраузерной совместимости;
  • Большинство из них бесплатны и имеют открытый исходный код;
  • Стабильный и протестированный код от сотен разработчиков;
  • Возможность участвовать в Github;
  • Регулярные обновления, исправления ошибок и новые функции.

Но использование фреймворка Bootstrap 3 на русском может быть сопряжено с рядом недостатков:

  • Иногда требуется настроить много параметров, чтобы заставить его работать;
  • Нужно ознакомиться с документацией для изменений при обновлении;
  • Может отсутствовать необходимая функция, с помощью которой нужно ввести сторонний актив;
  • Наличие ненужного кода.

Bootstrap

Bootstrap, который первоначально назывался Twitter Blueprint, был создан Марком Отто и Джейкобом Торнтоном и выпущен 19 августа 2011 года.

"Небольшая группа сотрудников Twitter начала улучшать внутренние аналитические и административные инструменты нашей команды. После предварительных обсуждений этого продукта мы поставили перед собой более амбициозные задачи по созданию инструментария для тех, кто может использовать его в Twitter и за его пределами. Таким образом, мы намеревались создать систему, которая помогла бы создавать новые проекты на ее основе, так и появилась идея Bootstrap." - Марк Отто

Bootstrap

Это внешний интерфейс с открытым исходным кодом, состоящий из HTML, CSS и JavaScript. Он имеет модульную структуру и в версии 3 состоит из таблиц стилей LESS. Но начиная с Bootstrap 4, разработчики перешли на использование препроцессора Sass CSS.

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

Bootstrap - 2
Динамическая карусель на Bootstrap в PHP

Фреймворк 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 (в настоящее время Foundation 6) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями.

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

Foundation - 2

Foundation поддерживает последние стабильные версии всех основных браузеров и платформ.

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

Новый Bootstrap 3 с ориентацией на мобильные устройства

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
Количество открытых обсуждений444338
Количество открытых вопросов18578
# действий в последние 30 дней409

Заключение

CSS-фреймворки - это мощные инструменты, которые могут помочь упростить процесс разработки и проектирования. Хотя кажется, что Bootstrap используется более широко, на самом деле это не значит, что какой-то фреймворк лучше, чем другой. Все зависит от конкретного разработчика и того, что именно ему удобно использовать.

Вадим Дворниковавтор-переводчик статьи «Bootstrap vs Foundation – Top 2 CSS Frameworks»