Хлебные крошки в виде слайдера с использованием swiper.js.
- Устанавливаем Node.js
- Копируем все файлы из репозитория на ваш PC
- Запускаем консоль в той папке, куда вы скачали все файлы
- Устанавливаем все необходимые пакеты с помощью команды: npm i
- Запускаем сборку с помощью команды: gulp
- #src
- fonts
- html
- _head.html
- _index.html
- _scripts.html
- img
- js
- plugins
- function.js
- scripts.js
- scss
- basis
- _FONTS.scss
- _MIXINS.scss
- _NULL.scss
- plugins
- element-theme.scss
- element.scss
- visual-page.scss
- style.scss
- index.html
- dist
- public
- node_modules
- .gitignore
- README.md
- gulpfile.js
- package-lock.json
- package.json
Папка #src предназначина для удобной разработики элементов для будующих проектов. Именно из этой папки собираются папки dist и public
fonts
Здесь размещен основной шрифт, который я использую.
html
Сюда входят три файла, которые подключаются в файле index.html
- _head.html - Тут содержание тега , а также подключение css файлов
- _index.html - Тут вся разметка элемента
- _scripts.html - Тут подключаю все необходимые скрипты
img
Тут могут находится необходимые для работы элемента изображения
js
Сюда входят два файла и папка для плагинов
- plugins - Папка для хранения неободимых плагинов
- function.js - Функция, где описана логика работы созданного элемента
- scripts.js - Запуск js кода
scss
Стили для демонстрации и работы элемента
- basis - Папка для основных настроек страницы
- _FONTS.scss - Подключение шрифта
- _MIXINS.scss - Подключение миксинов
- _NULL.scss - Обнуление стилей
- plugins - Папка для хранения неободимых плагинов
- element-theme.scss - Стили для визульного оформления элемента
- element.scss - Стили, необходимые для работы элемента
- visual-page.scss - Стили, для оформления страницы демонстрации
- style.scss - Тут подключаюстся все вышеперечисленные стили
index.html
Основная HTML разметка всей страницы. Тут подключаются три файла: _head.html, _index.html, _scripts.html.
Папка dist предназначина для удобного копирования, лишь необходимых для работы элемента, файлов.
element-theme.scss - Эти стили можно не копировать, если хотим реализовать полностью свой визуальный стиль.
Папка public предназначина для демонстрации работы элемента.
Нижеперечисленные файлы предназначены для запуска GULP сборки и/или github. Для работы элемента они не нужны. Все необходимые файлы для работы элемента находятся в папке dist .
- node_modules
- .gitignore
- README.md
- gulpfile.js
- package-lock.json
- package.json