Сергей delphinpro

как правильно

Делаем все иконки в svg, собираем в спрайт. Svg будет легко перекрашивать стилями.
Делаем простую разметку ul>li>svg+span

<ul>
  <li>
    <svg>...</svg>
    <span>title</span>
  </li>
</ul>

ul {
  display: flex;
}
li {
  display: flex;
}
svg {
  w16px;
  h16px;
  flex-shrink: 0;
}

Раскраску делаем либо отдельными классами, либо с помощью nth-child()

так? https://codepen.io/delphinpro/pen/ReNpmP

Как обычно https://ru.vuejs.org/v2/guide/list.html#v-for-%D0%...

jsfiddle.net/589szoue

Local gulp not found in ~\Downloads\Папка

Локальная установка галпа не найдена.
npm install делали?
хотя конечно же делали…
Может быть проблема в кириллическом пути к проекту? Я со времен DOS/WIN98 не доверяю кириллице в файловой системе.

Не в ту сторону смотрите скорее всего.
Во-первых, эти отступы актуальны только на больших экранах
Во-вторых, вряд ли принципиально то, что они равны ширине колонки.

Просто сделайте свой кастомный контейнер с фиксированными паддингами, пикселей 70-80.

.my-container {
  max-width: 1300px;
  margin: auto;

  @include media-breakpoint-up(xl){
    padding: 0 80px;
  }
}

В любом векторном редакторе делаете буквы, потом пилите анимашку на css/js

Посмотрите специализированные приложения. Типа AllMyBook.

Оператору и пишите. Если достаточно твёрдо обозначить свои требования, то обычно деньги возвращают (мегафон). А вот если оператор залупится, тогда и надо будет думать, куда обращаться.

Хочется понять, куда обратиться, чтобы им вправили мозг и объяснили, что так делать нехорошо.

А вот это уже бесполезно. Все и так знают, что это нае**во, но оно есть.

Картинка должна быть прямоугольная, без вырезов. Чтобы ее можно было легко заменить. А всё остальное уже делается средствами css

Примерно так https://codepen.io/delphinpro/pen/xaoEZx

Примерно так https://codepen.io/anon/pen/NLVQQm

https://stackoverflow.com/questions/45854169/how-c...

Всё большее кол-во современных телефонов оснащается retina-дисплеями. Т.е. дисплеями с повышенной плотностью пикселей. В таких устройствах css-пиксель отличается от физического. Для определения соотношения этих величин есть API https://developer.mozilla.org/ru/docs/Web/API/Wind...
Вот еще ссылка по теме https://habr.com/post/150071/

Если кратко ответить на вопрос, то рисовать следует в масштабе 1:1 (320 по ширине), но графические элементы делать размерами в 2-3 раза больше и помещать их в смарт-объекты (речь о фотошопе). Сам смарт-объект масштабируется до нужных размеров в макете. Потом верстальщик сможет достать из смарт-объекта оригинал картинки в высоком разрешении и грамотно разместить его на сайте. Картинки (img) размещаются либо через srcset, либо топорно, удвоенного размера исходник, и указание нужных размеров самой картинке в css. Фоны также пишутся либо отдельные через media device-pixel-ratio, либо удвоенного размера с указанием background-size.

Дополнительная информация по запросу в поисковике "как верстать по ретину"