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

Question

[Senseich]

Вопрос, возможно риторический, но т.к. мало с бутстрапом работал. Собственно в задании верстка "пиксель в пиксель" (2-3 пикселя погрешность допустима).

Как сохранить исходные размеры при верстке на бутстрап. Ведь ,допустим, те же отступы блоков "col" у бутстрапа стандартные, вроде 15px, а если в верстке другие расстояния, это и писать везде свои стили? Или к примеру главный контейнер не всегда же у всех сайтов 1140px

Comments

[sim3x]

Дизайн подогнан под бутстрап?

[Senseich]

sim3x, а как это определить? )

[sim3x]

Senseich, Размер колонок совпадает с бутстраповским и дизайнер пямо указал, сколько колонок в дизайне

[Senseich]

sim3x, разве у бутстрапа есть размер колонок, там же в процентах?

Answer 1

[Андрей]

Качаешь исходники: https://getbootstrap.com/docs/4.0/getting-started/... -> Download Source
Смотришь оку по софту и сборке: https://getbootstrap.com/docs/4.0/getting-started/...
Правишь под себя scss и собираешь свой бутстрап с блекджеком и котиками =) Правда надо еще немного scss знать.
Для примера, в архиве: \bootstrap-4.0.0\scss\_variables.scss

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($container-max-widths, "$container-max-widths");


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;

Думаю тут все понятно, вот тебе и сетка и количество колонок и расстояния между колонками...
Там куча всего, можно даже лишнее, что тебе не надо, убрать, с пониманием что делаешь =)

Comments

[Senseich]

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

[Evgeny Zaharov]

Senseich, тогда не используйте бутстрап :)

[Senseich]

Evgeny Zaharov, есть вообще какие то общепринятые правила верстки по бутстрапу. я имею ввиду последовательность

[Evgeny Zaharov]

Senseich, как вам и написали - можно все кастомизировать в scss. А если отступы не везде нужно изменять - можете, например, использовать стандартные классы бутстрапа для маргинов и паддингов (bootstrap 4):
https://v4-alpha.getbootstrap.com/utilities/spacing/

[Андрей]

Senseich
По моему опыту, бутстрап из коробки (css) не самый лучший вариант для верстки чего-то кроме админок и быстрой верстки интерфейсов с простым дизайном. Ну, и еще проекты отрисованные дизайнером изначально под бутстрап по тз. По мне бутстрап избыточен в своих возможностях для обыденной верстки.
В других варианта верстка сложных превращается в "муки" и ваш файл с версткой вырастает до размеров 2000-5000 строк.

Лично я последние 10-15 проектов верстал уже своей сборкой, миксинов для препроцессоров. Использую те же grid миксины что и бутстрап, прям из исходников бутстрапа брал, и кучу еще всего мелкого с разных проектов и фреймворков...

Советую изучить CSS препроцессоры: SASS, LESS, сам использую Stylus. Системы сборки: gulp, grunt, webpack... Сильно облегчит вам жизнь и ускорит разработку.
Естественно для CSS знать и использовать БЭМ, хотя мне БЭМ не по душе, я использую альтернативу для него: rscss.

Можете глянуть мой старый вариант сборщика (Заливал для себя на память) https://github.com/allardcool/gulpbuild
Врятли сразу поймете что там и как, не зная основ. Но, возможно будет полезно.

[Senseich]

Андрей, Я всё это знаю, но очень поверхностно. Очень забавно у меня вышло, я учился в geekbrains на веб разработку, как бы душа больше к верстке лежала, но так получилось, что я толком не поверстав и недоучившись попал в компанию, но не верстальшиком, а программистом 1с-битрикс ))) который сейчас заполонил всю Россию, походу всех подряд берут , а там научим ) Загорелся, думал понравиться, но сейчас понял что не МОЁ ) Вот решил вернуться к истокам, начну пожалуй пока без препроцессоров, хотя знаю, что сейчас это уже норма, буду постепенно освежать и набивать руку. Но спасибо, за наставления, буду в этом направлении двигаться!