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

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

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

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

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

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

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

Вот пару иных преимуществ:

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

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

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

Bootstrap

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

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

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

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

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

Foundation

Адаптивный frontend фреймворк, созданный ZURB. Он имеет в себя открытый исходный код. Foundation был выпущен в 2011 г. по лицензии MIT . Данный фреймворк имеет в себя модульную структуру и состоит в основном из стилей Sass . Он построен на основе сетки в 940 пикселей, которая будет адаптивным макетом.

Foundation также предлагает посетителям стартовые шаблоны, позволяющие быстрее создавать веб-проекты. Вот список некоторых известных брендов, использующих Foundation : Adobe , eBay , EA , Amazon и Mozilla :

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *