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

Что такое 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:

Пособие по Twitter Bootstrap – Дизайн сайта от и до

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

Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!

Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!