Вёрстка, сетка для дизайнеров

Наша команда использует фреймворк 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. Можно открыть по ссылке или посмотреть на этой странице.

Поделиться: