Настройка LESS

Структура файла

Далее короткий обзор папки /less.

Папка/Файл	Описание
/less/theme.less	Определяет стиль шаблона и импортирует тему UIkit. Этот файл будет скомпилирован в CSS и сохранен в папку /css каждый раз при нажатии Compile LESS в настройках шаблона. В то же время, все стили будут сохраняться в папку /styles/STYLE-NAME/css.
/less/customizer.json	Определяет, какие параметры Customizer-а будут отображены в обычном и  расширенном режиме. Он группирует переменные UIkit, устанавливает, какие элементы можно будет определять с помощью цветового захвата, прямого ввода, выпадающего списка или выбора шрифтов.
/less/bootstrap.less	Импортирует все связанные с Bootstrap файлы(только для Joomla 3). Как и файл  /less/theme.less, он будет скомпилирован в CSS каждый раз при нажатии Compile LESS в настройках шаблона.
/less/uikit	Содержит UIkit файлы темы. Системные файлы UIkit можно найти в папке /warp/vendor/uikit.

Добавление собственной папки LESS

Выполните следующие шаги, прежде чем производить какие-либо настройки LESS. 1. Скопируйте папку /less и переименуйте ее в /less-custom.

2. Откройте файл шаблона config.php и зарегистрируйте новую папку вместо папки /less: 'path'=> array(
'theme'=> array(__DIR__),
'js'=> array(__DIR__.'/js'),
'css'=> array(__DIR__.'/css'),
'less'=> array(__DIR__.'/less-custom'),// Здесь
'layouts'=> array(__DIR__.'/layouts')
),

Совет: Это изменит системную папку LESS. Все стили, которые сгенерируются через кастомайзер, будут скомпилированы с использованием новой папки /less-custom.

3. Импортируйте старый файл /less/theme.less в ваш новый /less-custom/theme.less путем перемещения всего содержимого с последующим импортом правила.
. @import"../less/theme.less";
Только для Joomla 3: В целях проведения нормального обновления в дальнейшем, импортируйте старый файл
/less/bootstrap.less в ваш новый /less-custom/bootstrap.less путем перемещения всего содержимого с последующим импортом правила.
.@import"../less/bootstrap.less";

4. Удалите папке /less-custom/UIkit и /less-custom/bootstrap.

5. Теперь вы можете добавлять свой собственный код в /less-custom/theme.less.

Настройка UIkit

У UIkit собственная документация, которую вы можете найти на сайте UIkit.  Вы также можете изучить документацию по переменным Variables, практике использования Best theming practices и файлу customizer.json. Выполните следующие шаги, чтобы доавбить свою тему UIkit.

1. Выполните шаги Добавление собственной папки LESS, указанные выше.
2. Скопируйте следующие файлы в папку /less-custom/:
   1. /less/uikit
   2. /less/bootstrap.less
   3. /less/theme.less
3. Теперь вы можете настраивать все файлы в /less-custom, также как и во всей папке /less-custom/uikit, файл /less-custom/theme.less или /less-custom/customizer.json, чтобы добавить собственные переменные.

Выбрать свой шрифт в Customizer

WARP дает вам доступ ко всем шрифтам, доступным в папке Google fonts. Но все равно, вы можете добавлять собственные шрифты, которые не обеспечены сервисом Google.

Добавление шрифта из ссылки

1. Выполните шаги по добавлению собственной папки LESS, указанные выше.
2. Откройте файл /less-custom/customizer.json, добавьте опцию собственного шрифта, указав верный путь к списку.  "Custom Fonts": [{"name": "FONT-FAMILY", "value": "'FONT-FAMILY'", "url":""} ], "System Fonts": [ ... ]

Добавление собственного шрифта

1. Выполните шаги по добавлению собственной папки LESS, указанные выше.
2. Создайте папку /fonts внутри директории шаблона и положите туда файлы шрифтов.
3. Добавьте правило @font-face дял вашего шрифта в файл /less-custom/theme.less и ссылку на ваш шрифт: @font-face { font-family: 'FONT-FAMILY'; src: url('../fonts/FONT-FAMILY-webfont.eot'); .... }
4. Откройте файл /less-custom/customizer.json и добавьте опцию своего шрифта на примере:

"Custom Fonts": [ {"name": "FONT-FAMILY", "value": "\"FONT-FAMILY\", Helvetica, Arial, sans-serif"} ],
"System Fonts": [ ... ] На этом все. Теперь вы можете использовать свой шрифт в шаблоне.
Примечание автора: Существует несколько расширений веб-шрифтов. Чтобы создать комплект таких видов для вашего шрифта, вы можете использовать сервис http://www.fontsquirrel.com/ или его аналоги. Хотя я советую Вам именно его. Он позволяет загружать с компьютера свой шрифт, например в формате .ttf или .otf, и генерировать комплект этого шрифта во всех возможных форматах веб-шрифтов, пример HTML страницы с использованием этого шрифта и CSS кодом для его подключения к странице.

Customizer и изображения

Если вам нужно добавить опцию выбора изображения, например, бэкграунда, в Customizer, вы можете сделать это по следующей инструкции. Допустим, вы хотите добавить два различных стиля фона, красный и синий.

1. Во-первых создайте папку /images внутри директории вашего стиля /styles/STYLE-NAME и поместите в нее ваши изображения.
2. Создайте новый файл theme.less по инструкции Добавление собственной папки LESS выше.
3. Создайте новую переменную для стиля тела body и добавьте ее в файл /less-custom/theme.less. @theme_global-body-style:'';
4. Теперь мы создадим комбинацию для каждого бэкграунда. В нашем примере у нас есть комбинация красного и синего стиля. 

   .body-style() when (@theme_global-body-style = red) {
     body { background: url(../styles/STYLE-NAME/images/my-red.jpg) 0 0 repeat; }
   }
   .body-style() when (@theme_global-body-style = blue) {
     body { background: url(../styles/STYLE-NAME/images/my-blue.jpg) 0 0 repeat; }
   }

5. После этого, нам нужно вызвать стиль, который генерирует актуальный вывод CSS.


   .body-style();

6. Теперь мы создадим выплывабщий список для выбора стиля @theme_global-body-style. Просто добавьте следующий код в файл /less-custom/customizer.json. 

   {
    "type": "select",
    "vars": [
        "@theme_global-body-style"
    ],
    "options": [
        {"name": "Default", "value": ""},
        {"name": "Red", "value": "red"},
        {"name": "Blue", "value": "blue"}
    ]},

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

"groups":[
{ "label":"General",
"vars":[
"@theme_global-body-style",
"@global-background",
"@global-border",