Сергей delphinpro

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

https://www.yandex.ru/yandsearch?text=image%20map%...

Левый блок 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», есть «сетка в бутстрапе». И с этой сеткой можно творить всё что угодно.
Отсюда вывод: если дизайн нарисован по сетке (неважно как), то его можно сверстать в том числе и с помощью сетки из состава бутстрапа.

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

Можно перехватывать нажатия джаваскриптом, смотреть что там в href и крутить страницу к нужному элементу. Вероятно в вашей находке так и сделано.
Но это опять же не по феншую. Лучше используйте data-атрибут для ссылки на элемент.

Вам нужно использовать встроенные миксины бутстрапа. Все они здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss...

media-breakpoint-up()
media-breakpoint-down()
media-breakpoint-between()
media-breakpoint-only()

В качестве параметров передаётся название контрольной точки (ключи из переменной $grid-breakpoints) - xs, sm, md, lg, xl.

Ну вот так как-то
https://www.sassmeister.com/gist/1791877429a5e794c...

Сначала дописываем недостающие колонки для сетки

.col-xs-1of5, .col-sm-1of5, .col-md-1of5, .col-lg-1of5, .col-xl-1of5 {
  @include make-col-ready();
  width: 100%;
}

.col-xs-1of5 { @include make-col(1, 5); }
@include media-breakpoint-up(sm) { .col-sm-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(md) { .col-md-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(lg) { .col-lg-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(xl) { .col-xl-1of5 { @include make-col(1, 5); } }

Потом просто используем

<div class="col-sm-1of5">1</div>
<div class="col-sm-1of5">2</div>
<div class="col-sm-1of5">3</div>
<div class="col-sm-1of5">4</div>
<div class="col-sm-1of5">5</div>

Disclaimer:
Если не дружите с препроцессорами, то это уже ваша проблема =))

Неизведанные глубины CSS: метрики шрифта, line-hei...

Ну вот базовая схема.

$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}

Функцию можно заменить на миксин, как удобнее. С миксином проще пиксельный фоллбэк сделать (актуально только IE8).

Можно миксины из vertical-rhytm заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.

ну так картинка же не занимает всю ширину блока!

Добавьте в файле style2.css в 362 строке

.grid figure img {
  ...
 width: 100%;
}

@mixin long-shadow() {
    $shadow: "16px 0 0 currentColor";
    @for $i from 2 through 50 {
        $basis: 16 * $i;
        $shadow: #{$shadow}, #{$basis}px 0 0 currentColor;
    }
    box-shadow: $shadow;
}

Как-то так

<a href="#" data-target="#el">...</a>

$('a').on('click', function(){
  var target = $(this).data('target');
  var pos = $(target).offset().top;
  $('html, body').animate({'scrollTop': pos - 100}, 400);
});

Даже если использование одноразовое, вам может потребоваться изменить данный параметр в зависимости от параметров отображающего устройства. А медиазапросы в style вы не напишете. Так что лучше все-таки css.

Что его искать-то, пара кликов мышкой

На уровне копи-пасты бутстраповских компонентов =)
В принципе с арией знаком, основные атрибуты припоминаю со скрипом. В крайнем случае всегда можно подсмотреть здесь.
Но по факту почти не использую. Наверное потому что заказчики не в курсе темы и не требуют в обязательном порядке. Или потому что я пока не знаю как можно проверить страницу на доступность. Скорее даже это можно назвать основной причиной неактивного использования.
Это если речь именно об aria-* атрибутах.

Вариант 1

"devDependencies": {
    "browser-sync": "^2.17.1",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "*",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-data": "^1.2.1",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-twig": "^0.5.0",
    "gulp-uglify": "^2.0.0",
    "require-dir": "^0.3.1"
  }

Вариант 2

"devDependencies": {
    "autoprefixer": "^6.5.3",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.26.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-util": "^3.0.7",
    "node-sass": "^3.13.0",
    "require-dir": "^0.3.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-stream": "^3.2.0"
  },