Создание статических сайтов с помощью Kit и LESS – часть I

В этом посте мы расскажем вам о проекте. В проекте мы создадим статический HTML-сайт и будем использовать Kit Language для создания HTML-страниц и LESS CSS в качестве языка стилей.

Если вы следовали нашей предыдущей статье о введении «Kit», вы обнаружите, что она позволяет нам использовать переменные и импортировать внешние файлы, упрощая управление проектом с большим количеством HTML-страниц.

Поскольку «Кит» является Codekit проприетарный язык, а также единственное приложение, которое поддерживает его на данный момент (на момент написания статьи), вы должны сначала установить Codekit. Это доступно за 28 $. Вы можете попробовать приложение через пробную версию, которая щедро включает в себя все функции и возможности.

Рекомендуемое чтение: LESS CSS Tutorial – Разработка гладкой панели навигации по меню

Начиная
Давайте создадим новую папку для нашего проекта и назовем ее, например, «mysite». В этой папке мы создаем три папки с именами «kit», «less», «assets».

Папка «kit» будет содержать файлы .kit. В нем создайте новую папку с именем «inc», чтобы сохранить частичные файлы .kit, которые впоследствии будут включены в другие файлы.

Точно так же мы создадим папку «inc» в папке «less».

Наконец, папка «assets» будет содержать CSS, JavaScript и изображения проекта. Давайте создадим в нем еще 3 папки: «css», «js» и «img». В конце структура каталога проекта должна выглядеть следующим образом:

• активы
• CSS
  • img
• JS
  — Комплект
  Â € – inc
  — Меньше
  • вкл

Запустить Codekit. Перетащите папку проекта в окно приложения, чтобы добавить его в качестве «проекта Codekit».
Создание файлов
Одно из преимуществ использования Kit – а также других похожих языков, таких как Haml или нефрит – это то, что мы можем разделить документы на несколько частичных файлов.

Мы можем сохранить заголовок документа в «header.kit» или использовать «footer.kit» для нижнего колонтитула документа. Когда мы вносим изменения в «header.kit», например, это отразится на других страницах, где включен «header.kit». Это экономит нам много времени, так как файлы не нужно редактировать отдельно.
Файлы комплекта
В этом проекте мы создаем следующие файлы Kit и сохраняем их в папке «inc»:

• «Doc-open.kit» – содержит материал, который открывает документы HTML, включая DOCTYPE, и тег.
• «Doc-close.kit» – содержит материал для закрытия HTML-документа. Мы поставим а также в этом.
• «Header.kit», «footer.kit», «sidebar.kit», «navigation.kit» – эти файлы соответственно содержат структуру HTML для верхнего колонтитула, нижнего колонтитула, боковой панели и навигации по меню.

И мы создаем эти файлы Kit ниже непосредственно в папке «kit»:

• «Index.kit» – это будет домашняя страница сайта.
• «Page.kit» – это вторая страница сайта.

• активы
   – css
  Â € – img
  Â € – JS
  — Комплект
  Â € – inc
  Ã € Â € – doc-close.kit
  Ã € Â € – doc-open.kit
  Ã € Â € – footer.kit
  Â € Â € – header.kit
• навигация.kit
• Sidebar.kit
• index.kit
• page.kit
  — Меньше
  • вкл

Мы ограничиваем веб-сайт в этом проекте только 2 страницами, поэтому учебник не будет перегружен, но вы можете иметь столько страниц, сколько хотите в реальном проекте.
Меньше файлов
Мы также создаем файлы LESS в аналогичной структуре. Кроме того, мы также будем использовать имя библиотеки LESS mixin LESSHat, Так что мы сможем писать наши LESS-коды быстрее и в более простой форме. На следующем снимке экрана показаны все файлы LESS проекта.

,
– активы
 – css
 € – img
 € – JS
— Комплект
 € – inc
à €  € – doc-close.kit
à €  € – doc-open.kit
à €  € – footer.kit
 €  € – header.kit
– навигация.kit
– Sidebar.kit
– index.kit
– page.kit
— Меньше
– вкл
 € – footer.less
– без заголовка
– меньше всего
– навигация
Боковое
– без стилей

Они также перечислены в Codekit.
Синтаксис KitHighligting
Язык набора – это в основном HTML со специальными функциями. Проблема в том, что расширение .kit неизвестно большинству редакторов кода. Если мы откроем его, редактор кода не сможет автоматически отобразить правильный цветовой синтаксис.

Если вы используете SublimeText, вы можете выполнить следующую уловку, чтобы включить подсветку синтаксиса для языка Kit:

Сначала установите PackageResourceViewer в SublimeText. Этот плагин позволяет нам быстро открывать Основные пакеты SublimeText, Как только он будет установлен, запустите Командную палитру – Cmd + Shift + P – и выполните поиск «Открытый ресурс» без кавычек.
Затем перейдите к HTML> HTML.tmLanguage. В нем вы увидите список расширений, завернутых в тег. Добавьте поддержку расширения .kit, включив Комплект между списком. Сохраните файл и перезапустите SublimeText.
Расширение файла .kit будет идентифицировано как файл HTML, и ему также следует предоставить правильную подсветку синтаксиса цветом как HTML.
Выходной путь
Все файлы, которые мы создали, перечислены в Codekit. Codekit будет наблюдать за всеми этими файлами и компилировать их, когда будут внесены изменения. По умолчанию скомпилированные файлы будет сохранен на том же уровне каталога, что и исходный файлтогда как все ресурсы нашего проекта, такие как CSS, должны быть сохранены в папке «assets».

Итак, нам нужно настроить выходной путь. Давайте включим настройку уровня проекта.
Меньше CSS выходной путь
На странице настроек перейдите на вкладку «Меньше» на левой боковой панели. Выберите опцию «К этому пути:». Введите / assets / css / в качестве пути вывода и установите для параметра «Относительно» значение «Корневая папка проекта», как показано ниже.
Немного прокрутите окно приложения и нажмите кнопку Apply Output Paths, чтобы подтвердить вышеуказанную конфигурацию.
Выходной путь комплекта
Кит компилируется в HTML. Мы сохраним все HTML документы прямо под корневой каталог проекта, Перейдите на вкладку «Комплект». Это похоже на конфигурацию «Меньше», которую мы выполнили выше. Мы выбираем опцию «На этот путь:». Введите / в качестве пути вывода и установите для параметра «Относительно» значение «Корневая папка проекта».
Наконец нажмите кнопку «Применить пути вывода».
Продолжение следует
Это конец нашего урока, часть 1. Подводя итог, мы установили файлы проекта, структуру и конфигурацию. Далее мы начнем разработку сайта с помощью Kit и LESS. Так что следите за обновлениями.