Структура проекта

Копать в ядро 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 и вы сможете увидеть изменения на лету, не только в браузере, но на нескольких устройствах, при работе на свою собственную тему или редактируя существующие. Вы можете переключаться между всеми компонентами и темами в рамках тестов и даже переключатель в режиме "справа налево".

Зайдите в тесты