- Устанавливаем nodejs https://nodejs.org/en/download/
- По инструкции устанавливаем https://yarnpkg.com/lang/en/
- В терминале для Windows yarn add global gulp и для Unix sudo yarn add global gulp
- Клонируем git clone https://github.com/linedotwww/mockup.git
- Переходим в папку, там командой yarn install устанавливаем все
- Теперь подключать файлы в templates/main/source/styles/style.scss не нужно, все подключается автоматом
- Пользовательские стили могут лежать тут templates/main/source/styles/users, либо в компонентах
- В компонентах можно создавать json файлы, пример лежит в меню и потом работать с данными в шаблоне
- В стилях путь к картинкам не прописываем, только название файла, пути в html файлах можем прописывать как
html <img src="{{src}}logo.png" alt="" class="logo__pic">
- Папка templates/main/source/js/libs и templates/main/source/js/static все содержимое переносится, в libs только библиотеки должны лежать. Папка /templates/main/source/js/plugins/optional/ , тут файлы, которые исключены для сборки.
- Этот файл templates/main/source/js/static/frontend-works.js специальный, сюда складываем ajax и т.д, что в будущем программист перенесет на сайт, так как он потом при натяжке подключаться не будет
- Для иконок svg используется сервис https://icongr.am/ , подключается в стилях просто
css background: url(https://icongr.am/fontawesome/ambulance.svg?size=34&color=000000);
, плюс использовать можноcss background: svg-load('auth.svg', fill='#c70000') no-repeat;
для него файлы svg сохраняем в папку templates/main/source/images/svg-icons - Настройки лежат тут main.config.json
- Все повтояющиеся блоки выносим в компоненты
- Две команды есть, gulp и gulp build