Сергей delphinpro

Так же, как и с любым другим фреймворком/плагином/ит.п. - открытая страница с официальной документацией.
До сих пор копи-пастю оттуда код модалок =)

3) тут основной минус в том, что ячейки таблицы (даже заданные через display:table-cell) не могут быть relative, а это иногда нужно. Приходится добавлять лишние внутренние обертки.
Второй, не менее значимый - ячейки таблицы не могут быть перенесены на след строку, что в эпоху адаптивного дизайна не хорошо.
Однако эти минусы, понятное дело, не всегда имеют значение. Так что если метод решает задачу - используйте.
Из плюсов - простое вертикальное выравнивание, если требуется.

Вообще сайты по разному могут адаптироваться к размеру экрана. По-хорошему,об этом должен подумать дизайнер и набросать несколько макетов, чтобы можно было проследить за его мыслью. В особо сложных случаях он же составляет сопроводительное описание макета с объяснениями поведения дизайна, либо прикладывает анимации/видео.

Но допустим, что задача у вас стоит именно так как вы обозначили - сайт всегда масштабируется к размеру экрана (пусть к ширине, это чаще бывает). Тогда вам следует все величины, задающие расположение и размеры блоков на странице, рассчитывать и указывать в процентах (%), либо вьюпортах (vw). Отдельно нужно будет проработать типографику. Здесь тоже только ремы (rem) и емы (em). Так будет проще сделать несколько контрольных точек для изменения шрифтов. Также можно обратить внимание на метод отзывчивого размера шрифта с использованием calc и rem.

Еще один обязательный пункт - максимальное использование векторных изображений, логотип и иконки, как минимум (хотя этот пункт для любой верстки уместен).

https://www.w3.org/TR/html52/document-metadata.htm...

Конкретнее по вопросу здесь и, соответственно, здесь.

Когда говорят о связке bootstrap + sass, имеют ввиду обычный bootstrap только у которого исходники в sass?

Имеют ввиду это https://github.com/twbs/bootstrap-sass

Насколько удобно это сочетание?

Настолько же, насколько удобна сборка из дефолтного less.
Если вы имеете ввиду по сравнению с css-версией, то тут зависит от того, насколько хорошо вы умеете использовать препроцессор. Имхо, намного удобнее, небо и земля.

Верстая bootstrap с исходниками sass нужно и все остальное кроме сетки стилизовать обязательно на sass?

Всё что используете. Лишнее просто отключаете (закомментируете импорты в bootstrap.scss)

удивительно что ошибок в консоли нет

Как это нет?

я не чего не менял в js файлах

Ну да, наверное "оно само" =)



Этот оператор правильно записывать надо так <=

Гугл примерно так и делает. посмотрите исходник страницы.

И вовсе это не неудобно. Разработка ведется как обычно - в разных файлах, потом все склеивается и выкатывается.
Однако, мне видится, должна быть веская причина так делать.

PS Для одностраничника вполне оправданно упаковать все в один файл. Кроме, пожалуй изображений в base64 =).

codepen.io/anon/pen/zomwex

как обычно - position:relative для блока, от которого нужно вести отсчет.

Минимальное разрешение десктопа которое я нашел составляет 1280x1024

Плохо искали podberi-monitor.ru/price/podbor/1024x768/1C.html

%bgtrans {
  background: transparentize($cwhite,0.15);
}
.header {
  @extend %bgtrans;
  &:after {
      @extend %bgtrans;
  }
}

посмотрите локальную историю. может повезет.

расставляйте в тексте переносы.
Так называемые "мягкие переносы" (soft hypens) - символы, указывающие место возможного переноса.
мнемоника - ­ или код сущности ­

Вручную, конечно, это делать утомительно. Можно воспользоваться онлайн-сервисом (например, первый из гугла - quittance.ru/hyphenator.php#effectus) или встроить алгоритм в свою систему.

возникла проблема с серой обводкой. если делать через border, то при указании прозрачности вылазит background самого блока.

background-clip: padding-box; 
/* или content-box, по умолчанию стоит border-box */

для контейнера
display:table;
table-layout: fixed;

для детей
display: table-cell;

для среднего
text-align:center;

для правго
text-align: right;

Ответ профессионала: Загугли книжку "ИКФ - инлайновый контекст форматирования". Там абсолютно всё про инлайны. Книжка бесплатная, небольшая, распространяется в электронном виде. Первоисточник - css-live.ru

Укажите, что изображению нельзя сжиматься - flex-shrink: 0;
В контексте флексбоксов любой элемент ведет себя как флекс блок. Ширина такого блока рассчитывается исходя из содержимого и параметров flex-grow, flex-shrink, flex-basis.
Можно еще использовать для ограничений max-width, min-width, но я считаю, в данном контексте это костыль.

По-моему во всех трех популярных препроцессорах нет никакой принципиальной разницы. Чуть-чуть различается синтаксис, но это дело привычки. Я не ощущаю никакого дискомфорта при работе с любым из них, хотя большую часть времени приходится работать с sass.

Абсолютное позиционирование тут конечно же ни причем :)
Просто запутались с селекторами.

codepen.io/anon/pen/zBZLVG

Да. Почти.
У вас здесь два блока (БЭМ-блока)

.callback {}
.callback-form{}

Лучше писать писать их отдельно. А элементы вполне норм.