Стартовый проект frontend-kit 🔥

🌏 Cайт : http://codbox.ru

👦 Автор : A K

Browser Support

Latest ✔	Latest ✔	Latest ✔	No ✕	Latest ✔	Latest ✔

Стартовый репозиторий .

Установка: npm i.

Запуск: npm start.

Сборка - Gulp 4

Запуск конкретной задачи: npm start имя_задачи (список задач в gulpfile.js)

Остановка: Ctrl + C

Bывод svg sprite

<svg class="custom-class" width="14px" height="14px"><use xlink:href="img/sprite-svg.svg#img_name"></use></svg>

Или можете сделать include в верху сайта ниже тега Body

@@include('img/sprite-svg.svg')

И выводить на странице таким образом:

<svg width="28" height="28" class="custom_class"><use xlink:href="#image_name"></use></svg>

Bывод png sprite

Предоставленные миксины предназначены для использования с переменными

.icon-imagename { @include sprite($image_name); }

Пример использования в HTML:

display: block sprite:

<div class="icon-imagename"></div>

Изменитe display ( display: inline-block;), мы предлагаем использовать общий css класс:

CSS

.icon { display: inline-block; }

HTML

<i class="icon icon-home"></i>