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