Skip to content

Стартовый проект frontend-kit для быстрой сборки фронтенда

Notifications You must be signed in to change notification settings

sinups/frontend-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

version MIT License

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

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

👦 Автор : A K

Browser Support

Chrome logo Edge logo Firefox logo Internet Explorer logo Opera logo Safari logo
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>

Releases

No releases published

Packages

No packages published