Как верстать пиксель перфект на bootstrap?

Question

[lodas]

Предположим в макете есть моменты которые не вписываются по сетке бутстрапа на 12 колонок, например:
1) Левый блок col по ширине может быть равен 2.5(два с половиной стандартных столбца) или 3.7(стандартных столбца) - правый блок 7.8(стандартных столбца).
2) Точка медиа-запроса если блок не стандартный тоже будет другой.
3) Ширина основного container не бутсраповская к примеру 1750px.
4) Как вообще верстаются сайты не нарисованные под сетку bootstrap по pixel perfect. Как вариант можно предположить, что местами перекрываются стили фреймвока или есть другие решения.

Все значения взяты для примера. Как наиболее правильно обрабатывать такие моменты?

Comments

[alex-1917]

Перекрывать стили bs? Лучше попробовать самому, чтобы понять, какой это ад)))

Answer 1

[Сергей delphinpro]

Левый блок col по ширине может быть равен 2.5(два с половиной стандартных столбца)

И что здесь не вписывается?

.col {
  @include make-col-ready();
  @include make-col(2.5);
}

аналогично популярная тема с пятью столбиками

.col-1-of-5 {
  @include make-col-ready();
  @include make-col(1, 5);
}

Bootstrap — это не только ценный мех скаченный bootstrap.min.css, это еще и куча полезных миксинов.

сайты не нарисованные под сетку bootstrap

нет «сетки bootstrap», есть «сетка в бутстрапе». И с этой сеткой можно творить всё что угодно.
Отсюда вывод: если дизайн нарисован по сетке (неважно как), то его можно сверстать в том числе и с помощью сетки из состава бутстрапа.

Comments

[lodas]

Не совсем понятно правильное использование ваших примеров, если я правильно понял в первом варианте мы должны создать новый класс .col-new
.col-new{
@include make-col-ready();
@include make-col(2.5);
}
Тогда колонка с классом .col-new станет 2,5 стандартного столбца. Как эта колонка будет взаимодействовать с другими столбцами на разных разрешениях? нужно будет писать под нее свои media точки останова? Где можно посмотреть живой пример реализации нестандартных колонок?

[Сергей delphinpro]

Я не знаю вашего кейса, но зачем вам придумывать новую колонку? У вас уже есть блок. Ну я не знаю, например анонс статьи

<article class="article">
  <figure class="article__preview">
    <img class="article__image">
  </figure>
  <div class="article__content">
    ...
  </div>
<article>

И картинка пусть занимает 2,5 колонки.

.article__preview, .article__content {
  @include make-col-ready();
}

// в мобиле — в столбик (это можно опустить, в принципе)
.article__preview { @include make-col(12); }
.article__content { @include make-col(12); }

// если есть место — в колонки
@include media-breakpoint-up(md) {
  .article__preview { @include make-col(2.5); }
  .article__content { @include make-col($grid-columns - 2.5); }
}

// а на широком — картинку побольше
@include media-breakpoint-up(xl) {
  .article__preview { @include make-col(3.5); }
  .article__content { @include make-col($grid-columns - 3.5); }
}

Answer 2

[alex-1917]

Полуторные и прочие колонки реализуются на раз-два-три, наверху правильно подсказали. Другое дело, что может понадобиться и например, 2,125))) Тогда только выбрасывать бутстрап, так как придется добавлять еще по пачке стилевых условия для каждого медиа-запроса!
На практике использую бутсnрап - для 12-grid-макетов и еще пару, не буду озвучивать, выбери сам, вобщем 14-grid есть и себе наляпал 24-grid!!)) покрывает 90% приходящих макетов...
По сути сама сетка - это 40 строчек css, все остальное уже от лукавого, таже не забывать, что в бутстрапе миллион встроенных штучек - слайдеры, табы и т.д. лучше грузануть один bs.js, чем ляпать на каждый эффект по библиотеке.
А вообще рисовальщик (сиречь дизайнер), который не может уложиться в 24-grid - крайне паршив! Если вписывается в 12-grid - рисовака идеален!!))

Comments

[lodas]

Полуторные и прочие колонки реализуются на раз-два-три, наверху правильно подсказали.

Из того что в верху подсказали пока не складывается общего понимания как оно работает. Где можно почитать инфу по нестандартным колонкам на бутсрапе или возможно у вас есть живой пример решений, где ширина для определенного блока кастомизированна?

[alex-1917]

lmap.ru/toster/bs3

[lodas]

ваш пример очень понравился, хочу понять как он сделан - если не трудно можно ссылку на скачивания исходников примера

[alex-1917]

lodas, блин там же в исходном коде все видно))))

[alex-1917]

Смысл - во вложенности, берем блок шириной 3 колонки и вкладываем в него блок шириной 10 колонок (я ж классы не зря подписал) - вот эти 10 колонок берут свой отсчет от ширины в 3 колонки!)) на пальцах.
С учетом, что 100% ширина - это 12 колонок, итого выходит, что при таком вложении ширина вложенного блока будет 10/12 по отношению к блоку в 3/12, т.е. итого 3/12 * 10/12 = 2,5

[lodas]

alex-1917 я имел в виду less/sass))

[lodas]

но в целом идею по комментарию выше понял, спасибо)

[Александр Маргинал]

lodas, скачайте исходники с сайта bootstrap и посмотрите их. Там все предельно понятно

Answer 3

[iBird Rose]

1) не использовать col бутстрапа и сделать свои колонки?
2) ну тк ставь свои точки
3) тут кастомизируется все, что пожелаешь getbootstrap.com/docs/3.3/customize
4) см. п. 1

Answer 4

[dom1n1k]

Вопрос звучит примерно следующим образом - "как лучше и удобнее надевать штаны через голову?"
Ответ - "не надо надевать штаны через голову".
Не надо использовать Бутстрап там, где логика макета противоречит его конструкции.