После того, как Вы активируйте частицу-атом Uikit for Gantry5 на странице настроек вашего шаблона, Вы можете устанавливать скачанные бесплатные частицы-исходники (а их у нас накопилось аж 18 штук) - 13 получено с сайта joomlead.com + 5 частиц с сайта inspiretheme.com. Напомним, в вашей папке custom должны быть созданы папки css, js, particles, scss - в них мы будем складывать наши файлы в соответствии с назначением. Основные папки particles и scss. 

Важно !!! При переносе файлов в эти папки страйтесь к названию файла добавлять суффикс с обозначением источника. Например, у вас с сайта joomlead.com получена частица accordion

в ней 4 папки

в них находится соответственно файлы с нужным расширением

Файлы accordion.min.css и accordion.min.js не изменяем - оставляем как есть, а в файлы accordion.html.twig, accordion.yaml и _accordion.scss добавляем суффикс _joomlead ( "нижний апостов" ).

Получим следующее:

accordion_joomlead.html.twig

accordion_joomlead.yaml

_accordion_joomlead.scss

В дальнейшем, именно суффикс поможет вам не запутаться и выбрать нужную частицу, которая будет корректно отображаться на вашем сайте. Частица accordion универсальна и ее часто модифицируют. Название у частицы одно - а функции и настройки могут кардинально отличаться. Это правило относится и ко всем остальным частицам для Gantry 5, которые вы найдете на просторах интернета.

Чтобы использовать новые стили в Gantry 5 предусмотрена особая процедура и особая кнопка Recompile CSS.

Процедура представляет собой создание в папке SCSS  файла custom.scss  внутри которого прописать 

@import "dependencies";
// Подключаем стили частицы ACCORDION - шпаргалка
@import "accordion_joomlead";

После сохранения файла custom.scss надо перейти в раздел Styles настройки шаблона и нажать кнопку Recompile CSS.

На этом этапе возможны несколько вариатов развития сценария:

 процедура рекомпиляции прошла успешно 

 процедура рекомпиляции прошла с предупреждением 

CSS  compiled with warnings outline: 9 file: custom undelined venable € font-weight-light:line: 30. (CSS компиляция с предупреждением контур: 9 файл: пользовательский не определена переменная: font-weight-light: строка: 30)

 ошибка 500 

сайт перестал работать или что-то в подобном роде

Если процедура рекомпиляции прошла с предупреждением, то стили частицы могут работать, но будут отображаться не так, как задумано разработчиком. Предупреждение в нашем примере ссылается на строку 30 (в нашем шаблоне нет облегченного шрифта - light). Чтобы избавиться от предупреждения, надо идти в файл стиля, например _accordion_joomlead.scss найти строку 30 и выбрать, что делать:

• либо поставить перед строкой // (*спорное действие - может отменить нужное свойство)
• либо (в данном конкретном случае) изменить в строчке слово light , например на слово medium ( если Вы не установили ранее нужный размер шрифта - см статью "Установка новых шрифтов на шаблон Helium")

P.S.

В моей практике были случаи, когда после активации одновременно нескольких частиц accordion от разных разработчиков наблюдались сбои в работе в одной из них. (например, пропадало подчеркивание, изменялся размер шрифта и т.д.) - в этом случае ищите причину в стилях частицы, которые активируются в файле custom.scss - отключайте поочередно стили частицы (ставьте // чтобы отключить стиль) - смотрите что получится. Иногда срабатывает замена порядка подключения стилей, но правильный метод заключается в замене однотипных классов css частицы в файле ****.scss на уникальный (замена букв в классе, например  g на ga и т.п.) - смотри урок Лечение частиц Gantry5 от Rockettheme (часть 2)