Работа с CSS и Javasctipt для разработчиков

Актуально от 4.9

Инструменты и технологии, которые использует шаблон

Scss как препроцессор CSS стилей
Bourbon - библиотека расширений для Sass
Bootstrap - CSS фреймворк
Jquery - Javascript фреймворк
Jquery UI - Расширения для Jquery
Bower и Npm как пакетные менеджер для внешних библиотек
Gulp как инструмент для автоматизации

Работа с пользовательскими стилями в custom.css

Этот метод нужно использовать, если Вы хотите изменить внешний вид шаблона, изменить цвета, расположение блоков и другие изменения.

Если вы создаете новый шаблон на базе существующего, рекомендуем второй способ с помощью Gulp.

Изменения СSS стилей

Открываем файл /templates/*themeName*/main.tpl
Убираем комментарии  в строке  - http://take.ms/kTQTr
В результате должно выглядеть так http://take.ms/DOHuV
Переходим в файл /templates/*themeName*/_css/custom.css и вносим свои стили сюда. Если нужно внести изменения в существующие стили, просто переопридилите CSS селекторы в этом файле.

Изменение Javascript скриптов

Открываем файл /templates/*themeName*/main.tpl
Убираем комментарии  в самом низу файла в строке  - http://take.ms/bYSRX
В результате должно выглядеть так - http://take.ms/sjzVr
Переходим в файл /templates/*themeName*/_js/custom.js и дописываем свои скрипты.

Работа с исходными Sass и JS файлами с помощью Gulp

Этот метод рекомендуется для продвинутых разработчиков если Вы собираетесь внести существенные изменения а шаблон или делать свой собственный шаблон на базе существующего.

Для того, что бы изменять или расширять Scss и JavaScript код шаблона необходимо установить внешние плагины, от которых зависит работа шаблона. Для этого следуйте следующим шагам.

Установите Node.js версии не младше 5.7 глобально на компьютер (если еще не установлен)
Установить Bower глобально на компьютер (если еще не установлен). Прежде всего необходимо установить Node.js. После того, как Node.js установится, нужно перезагрузить машину. Теперь можно приступить к установке Bower. Для этого в консоли под администратором введите команду: npm install -g bower.
Установите Gulp.js на компьютер глобально введя команду в терминал npm install --global gulp-cli (подробнее)
Откройте консоль (рекомендуем Git Bash, которая устанавливается вместе с Git)
Перейдите в консоли в папку "templates/*themeName*/_assets/" внутри проекта .
Введите команду "npm i", подождите завершения задачи
Введите команду "bower i", подождите завершения задачи
Введите команду "gulp build", подождите завершения задачи
Введите команду "gulp" или "gulp watch", сверните консоль, не закрывая ее.

После этого Вы можете работать с CSS-стилями и JS-скриптами в директории “templates/*themeName*/_assets/components

После сохранения .js или .scss файлов они автоматически будут компилироваться в конечный final.css файл который подключен в html документ страницы.

Примечание. *themeName* - это название папки Вашего текущего шаблона. Что бы узнать какой именно у Вас сейчас активен шаблон перейдите в панели администрирования по пути “Модули->Управление дизайном” и увидите название шаблона - http://take.ms/JXjpy

Непосредственная работа с конечными CSS и JS файлами

Настоятельно НЕ рекомендуем вносить изменения в файлы _css/final.min.css и _js/final.min.js

При внесении изменения в эти файлы дальнейшая работа с шаблоном может быть затруднительна. Все внесенные изменения будут перезаписаны, если после этого метода воспользоваться первым методом с помощью Gulp.

Список gulp задач

gulp или gulp watch

Задача, которая работет в фоне и автоматически собирает css и js файлы проекта.

Во время работы задачи в консоли все изменения в *.scss и .js файлах в папке "templates/*themeName*/_assets/components проекта будут автоматически сохранены и конвертированы в файлы templates/*themeName*/_css/final.min.css , templates/*themeName*/_css/final.css , templates/*themeName*/_js/final.min.js которые подключены непосредственно в основной html файл проекта templates/*themeName*/main.tpl

gulp build

Запускает последовательно следующие задачи:

'gulp css', 'gulp libs', 'gulp js', ' gulp font', ' gulp img'

Обязательная задача при:

непосредственно в начале работы, после установки шаблона и установки зависимостей через команды "npm i" и "bower i"
после добавления новой библиотеки через Bower

gulp css

Компиляция scss файлов, импортированных в файл templates/*themeName*/_assets/components/final.scss в templates/*themeName*/_css/final.min.css и templates/*themeName*/_css/final.css файлы

gulp libs

Собирает все js файлы библиотек, установленных через Bower в один templates/*themeName*/_js/vendor.min.js файл который подключен к проекту. Файл не содержит пользовательских скриптов, только исходный файлы библиотек-зависимостей, например jquery.js, jquery.ui.js

Задача обязательна для использования если Вы установили через Bower новую библиотеку

gulp js

Собирает все пользовательские js файлы из папки templates/multishop/_assets/components и сохраняет из в файле templates/*themeName*/_js/final.min.js

gulp fonts

Задача для переноса всех шрифтов из внешних Bower библиотек в папку templates/*themeName*/_fonts для последующего подключения их к проекту

gulp images

Задача для переноса всех изображений из внешних Bower библиотек в папку templates/*themeName*/_img для последующего подключения их к проекту

gulp sprite

Задача для арботы со спрайтами изображений. Подробнее - github.com