Структура проекта
Копать в ядро UIkit и узнать о чем это все.
GitHub
UIkit представляет размещенные на GitHub и лицензированный под MIT лицензия. Вы можете использовать его для всех ваших личных и коммерческих проектов. Чтобы открыть все исходные файлы, просто клонировать репозиторий на GitHub или скачать последнюю версию.
Файловая структура
UIkit построен на Less, В CSS препроцессор, который добавляет переменные, миксины и многое другое для CSS. Он компилирует код, написанный в Less в CSS. Главная файловая структура UIkit следующим образом.
| Папка | Описание |
|---|---|
/docs |
Содержит данную UIkit документацию на русском, сейчас Вы её просматриваете. |
/src |
Содержит все Less и JavaScript файлы компонентов. |
/tests |
Содержит тестовые файлы всех компонентов. |
/themes |
Содержит все дополнительные тематические файлы организованы в папки. |
/vendor |
Содержит внешние библиотеки, такие как jQuery и другие, которые используются по UIkit. |
Все компилируется и минимизирован CSS и JavaScript файлов, а также Less и Sass файлы могут быть найдены в отдельной Bower UIkit репозитория. Проверьте документацию на Less и Sass файлы Для получения дополнительной информации.
Автоматизация предварительной обработки
Для автоматизации процесса компиляции Less файлов в CSS, мы используем Gulp, А Node.js задача бегуна, который наблюдает исходного каталога, с которым вы работаете. Всякий раз, когда вы сохранить изменения в исходных файлах, Gulp автоматически компилирует все файлы в одном единственном CSS файла.
Во-первых, необходимо установить узел и установка gulp как глобальной установки. Наконец, переключитесь на UIkit каталог и установить узел зависимостей.
npm install -g gulp
cd uikit
npm installТеперь вы можете запустить Gulp построить и модифицировать релиз. Встроенный версия UIkit будут введены в /dist каталог. Проходим тему имя параметра, чтобы только построить заданную тему.
gulp [-t themename]Вы также можете использовать Gulp для просмотра вашего рабочего каталога, он предварительно обработает ваши файлы автоматически всякий раз, когда Вы нажмете "сохранить". Передайте параметр темы чтобы смотреть только в указанной теме, чтобы ускорить процесс сборки.
gulp watch [-t themename]Загрузить новые темы и стили в настройщик.
gulp indexthemesТесты
UIkit обеспечивает тестовые файлы для каждого компонента. Каждая из этих страниц содержит тестовые случаи из его компонент и дает вам обзор всех возможностей, которые поддерживаются из коробки.
UIkit использует BrowserSync, чтобы ускорить рабочий процесс. Запустить gulp sync и вы сможете увидеть изменения на лету, не только в браузере, но на нескольких устройствах, при работе на свою собственную тему или редактируя существующие. Вы можете переключаться между всеми компонентами и темами в рамках тестов и даже переключатель в режиме "справа налево".
