Наша команда использует фреймворк Bulma как базис для большинства наших решений.

Сразу ответим на вопрос: почему не Bootstrap?

  1. Bootstrap идет в комплекте с кодом JavaScript, что диктует ограничения в выборе технологического стека для проекта.
  2. На момент выбора фреймворка не было версии Bootstrap 4. Предыдущая редакция сильно проигрывала Bulma: разметка на float, жесткая привязка к jQuery.
  3. Текущий Bootstrap если чем и лучше Bulma, то только в плане наличия готовых компонентов, что не является решающим условием.
  4. У Bulma — классная структура, библиотека легко расширяется, поддерживается автором, имеет большое сообщество пользователей.

Сетка

По умолчанию в сетке 5 разрешений:

Название /
устройство		 Ширина
экрана, px		 Рабочая область, 
ширина		 Рабочая область,
колонки
Mobile /
мобильный телефон		 320-768 272-720px
отступы 24px		 одна
272-720px
Tablet /
планшет		 769-1023 720-975px
отступы 24px		 четыре, 150-226px
между: 24px
Desktop /
Узкий экран		  1024-1215 960px
по центру		 четыре, по 222px
между: 24px
Widescreen /
Средний экран		  1216-1407 1152px
по центру		 четыре, по 270px
между: 24px
FullHD /
Широкий экран		  1408+ 1344px
по центру		 четыре, по 318px
между: 24px

Ресурсы для дизайнера

Мы сделали шаблон с сетками и множеством фреймов в Figma. Можно открыть по ссылке или посмотреть на этой странице.