Александр Казаков

Есть очень много ответов о том в каких случаях не стоит использовать Bootstrap.
Например, если требуется гибкая настройка дизайна, то этого можно добиться только костыльными способами.

Почему-то я не вижу дату создания вопроса, очень странно. Вам нужно было указывать про какую версию бутстрап идёт речь. Допустим, что про актуальную 4 версию или про прошлую 3, это также подходит.

Вы где-то нахватались неправильной информации. Я сделал много вёрстки сайтов на 3 бутстрапе, и ещё больше на 4. Вот, слова, что якобы в бутстрапе нужны какие-то костыли, чтобы стилизовать его, это неправда. В бутстрап-4 гибкий подход, модульная система. Можно подключать только только нужные части и при этом практически никакого левого кода не будет тянуться в проект и вообще никакого левого UI(!).
Например я чаще всего в вёрстке сайтов беру сетку + модальные окна у бутстрапа, и это всё, ну иногда ещё и табы. Кода бутстрапа при таком подходе в проект подтягивается мизер, вёрстка сайта летает!

Как же сделать так, чтобы не быть чайником и использовать бутстрап грамотно? Ну во-первых стоит документацию бутстрапа читать, вот например: ссылка - она недвусмысленно намекает, что можно брать только то, что нужно.
Во-вторых нужна система сборки проекта, например Gulp. Один раз настроил и всё подтягивается автоматически, просто выбираешь нужные модули.
Вот например как у меня организовано подключение CSS бутстрапа:


Вот подключаются скрипты:


Вот пример как настраивать сетку бутстрапа под нужные требования:

^^ как видишь выше, вписывай нужные значения и вперёд, никаких костылей, всё там продумано грамотно.

При этом выше на скриншотах я показываю классическую сборку для обычной вёрстки на нативном JS и jQuery. Весь JS там собирает Webpack, а проект целиком собирает Gulp.
Вот кстати моя сборка из примеров выше: ссылка - но это вам мало что даст, так как такие вещи собираются под себя. Моя например сборка даже AMP-страницы может автоматом собирать!

Итого: забудьте дичь, что для бутстрапа какие-то там костыли нужны, и не передавайте эту ложь никому. Оставьте это чайникам, что подключают бутстрап целиком, а потом рассуждают, дескать как его настроить. Учитесь использовать системы сборки, типа Gulp, и у вас проблем не будет с бутстрапом.

Ну а насчёт Vuetify, к ответу profesor08 мне пока нечего добавить.

Дизайн-макет делается до или после технического задания?

Вопрос стоит заведомо неправильно, впрочем как и рассуждения, например следующие:

Мне видится, что делать ТЗ до макета не правильно, поскольку это лишает дизайнера свободы.

Какая свобода о чём вы здесь говорите? Большинство дизайнеров совершенно не разбираясь в вёрстке начинают рисовать дизайн-макеты, да ещё и адаптивные. Результат закономерен.

1). Дизайнер должен хорошо разбираться в вёрстке, иначе должен рисовать дизайн вместе с верстальщиком.
2). Естественно, до начала любого процесса, должен быть чёткий план действий и техническое задание. В вёрстке сайтов, помимо картинки ещё есть жёсткие технические требования, как-то: быстрая скорость загрузки, кроссбраузерность, оптимальные решения по коду. Дизайнер не может рисовать, что ему вздумается, всегда есть определённые рамки.

Разные там обсуждения и доработки есть практически всегда. У вас видимо неверное представление о ТЗ, как оно строится и какое бывает.

Здравствуйте.

На самом деле здесь нет однозначного ответа и правил, когда что использовать. Часто например в русскоязычном сообществе можно услышать мнение , что мол mixins решают, а include стоит использовать только в редких случаях, например для подключения на страницу этих самых миксинов, однако я не разделяю в полной мере данную точку зрения.

Сам я занимаюсь вёрсткой сайтов, пишу, что использую сейчас:

extends core/layout.pug

block vars
  - var pageTitle = 'Название'
  - var pageDescription = 'Описание'
  - var pageKeywords = 'Ключевые слова'
  - var userState= 'logout'

block content

Данный код у меня идёт в начале типовой страницы. Как видно вначале я подключаю базовый шаблон(layout) на который подключаю: миксины, bemto, HEAD с содержимым, скрипты(перед закрытием body) и тому подобное(ниже есть пример).
Далее у меня идёт набор переменных. если взять последнюю переменную, то можно понять, как это может быть удобно(в данном случае когда имеет несколько состояний: залогинен пользователь или нет).

Можно подобным образом вынести в шапку страницы кучу переменных и затем уже не так важно, что вы будете дальше использовать: миксины или инклюды. В зависимости от переменных можно писать условия и в инклюдах и в миксинах.

Конечно больше я всё же использую миксины, возможно привык. Но вообще здесь куча вариантов, даже например в том, в каком виде передавать значения в миксинах. Я всем желаю не бояться Pug.js а начать писать на нём многостраничный сайт и вскоре вы сами всё поймете, что для вас удобнее.

Как писал ранее, сам я использую библиотеку миксинов bemto, мне нравится, но использовать её не обязательно, это больше индивидуально.

Осталось рассказать про block

Вначале стоит начать использовать block только в шаблоне(layout) , вот например у меня(сопоставьте с примером выше):

include ../bemto/bemto
include   mixins

doctype html
html(lang="ru")
  block vars
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta( name="format-detection" content="telephone=no")
    link(href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,700,700i&subset=cyrillic" rel="stylesheet")
    title #{pageTitle}
    meta(name='description', content= pageDescription)
    meta(name='keywords', content= pageKeywords)
    link(rel="stylesheet" href="css/bundle.min.css")
  body
    block content


    +b.overlay(id="overlay")

    include ../blocks/product-card-modal
    include ../blocks/cart-modal
    include ../blocks/login-modal

    block scripts 
      script(src="js/bundle.min.js")

Это вариант моего шаблона, который я использую для типовой страницы(смотрите первый пример).

Верстая, вскоре научитесь передавать block в миксины, это элементарно(Илья Ростопка привёл пример), жизнь заставит научиться :)