Как верстать 18 колоночный макет?

Приветствую.

Попался макет, красота, конечно, неописуемая, но с версткой явно будут проблемы. Дизайнер сделал 18-колоночную сетку, при этом ширина контентой части получилась 82%, макет для 1920px. Кто бы как это чудо верстал? Заказчик при этом требует, чтобы на 1024 сайт выглядел точно так же, как и на 1920. Возможно ли такое и как? Спасибо за любую обратную связь, макет тут
  • Вопрос задан
  • 1455 просмотров
Решения вопроса 1
@esvlad
Веб-разработчик
В чём проблема? Верстай не колонками, меньше проблем, больше управляемости. Заказчика убеди, что на 1024 будет УГ, а не сайт, пусть дизы делают макет на 1024 нормальный и 640(320) для мобилок, для таких сайтов обычно просят ещё макет на 1366 (ведь тексты никуда не денешь), припомни им, что на планшетах есть ещё и книжный режим на 768 и меньше, как тогда сайт должен выглядеть?, если агрятся и цена меньше 100k шли их куда подальше, сэкономишь нервы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
mroforolhc
@mroforolhc
умственно отсталый
1. npm install bootstrap
2. Создаёшь файл bootstrap_custom.scss и _settings.scss

bootstrap_custom.scss

// Settings
@import "./settings";

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

// Optional
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/utilities/display";
@import "../../node_modules/bootstrap/scss/utilities/flex";

Можно подключить что-то ещё, по желанию.
_settings.scss

$grid-columns: 18;  // количество колонок

$grid-gutter-width: 30px; // отступ между колонками (по желанию можно для каждого брейкпоинта указать свой отступ

$grid-breakpoints: (  // брейпоинты
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$container-max-widths: (  // максимальная ширина контейнера
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);


А дело всё в том, что в исходниках бутстрапа после каждой переменной указан флаг !default, благодаря которому значения по умолчанию присваиваются только если эта переменная не была раньше инициализирована. Поэтому мы можем создать конфиг и импортировать его раньше, чем исходники бутстрапа.
Ответ написан
Комментировать
@AL89
Используй em, rem и будет у тебя 1024 как на 1920
Ответ написан
Комментировать
vilka_2009
@vilka_2009
Верстаю
Тру решение для 1024 - scale всей страницы ))))
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы