How to use

Как пользоваться данной библиотекой

Существует 2 отличных подхода для работы с данной библиотекой и по сути они не отличаются от других. Первый и, вроде бы самый простой — использовать скомпилированный файл, скачав или подключив его по ссылке. Данный формат доступен уже для скачивания. А ссылку мы добавим позже. Когда разместим у себя на сервере стабильную версию.

Оптимальный способ

Данная библиотека разработана на препроцессоре SASS. !НЕ SCSS, а именно SASS, хотя для компилятора это не сильно существенно, что объединять, для пользователей это может составить некоторую проблему при работе. Например перечень массива в SASS и SCSS ощутимо отличается.

Итак. Мы разработали библиотеку на препроцессоре и далее опишем, как мы используем ее:

Обычно первым делом мы создаем проект нуля (для существующего алгоритм не меняется)
Далее настраиваем gulp и систему папок
Создаем свой файл с настройками, практически полностью игнорируя дефолтный. Просто копируем и вносим необходимые нам данные из дизайн-гайда.
Создаем файл для стилей, например style.sass, в котором подключаем в следующем последовательности файлы:

    @import class
    @import config
    @import mixins

    [Необходимые зависимости]
    [Ваш дизайн]

    @import base/ghost
    @import base/utilites
    @import base/display

Так как мы разработали не только модули, но и некоторые миксины, «призрачные» классы и утилиты, мы их также используем в верстке дизайна.

«Призрачные», утилиты и классы отображения необходимо подключать в конце файла, чтобы у них был больший приоритет в каскадности. Так как в них отсутствуют маркеры !important.

Советы

Файл настроек можно расширять, например добавляя элементы в массивы:

$colors : ( primary : $color-primary, secondary : $color-secondary, alert : $color-alert, warning : $color-warning, ok : $color-ok, black : $color-black, white : $color-white , light : $color-gray__light , dark : $color-gray__dark, pink: 'pink' )

Так вы получите больше функционала на выходе.