Верстка сайтов: Bootstrap, NetCat и Less

CSS  - это формальный язык описания внешнего вида сайта.
Bootstrap  - это мощный CSS-фреймворк.
LESS  - это язык программирования для динамической компиляции CSS.
NetCat - это (в некотором смысле) фреймворк для программирования скриптов и работой с Базами Данных.

В данном документе описан стандарт разработки сложных сайтов портального типа с использованием перечисленных выше штук.

Общие положения

Разработка сайта происходит в несколько этапов.

1. прототипирование - создание рабочего прототипа сайта с использованием верстки Bootstrap. Каждый раздел прототипа отвечает за свою задачу. Утверждается логика, структура, URL-адресация, базовая функциональность сайта.
2. программирование функционала - чтобы все спрототипированное приблизительно заработало.
3. дизайн: блочная структура - продумывание расположения всех блоков в ключевых разделах сайта (некоторые любят называть это красивым словом "юзабилити", особенно про сайты из 3-4 статичных страничек). Утверждаются базовые визуальные параметры: сетка сайта, размеры внутренних и внешних отступов, ширины и длины, поведение мобильной версии. Утверждается верстка нескольких ключевых страниц сайта.
4. дизайн: стилинг - стилизация ключевых страниц сайта. Это когда из черно-белой структуры сайт становится "красивеньким" (этап можно безболезненно пропустить :) )
5. верстка - то, что нарисовал дизайнер в Фотошопе, натягивается на работающий сайт
6. отладка, тестирование, открытие - на это уходит половина времени, затраченного на все предыдущее.

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

Поэтому мы используем Bootstrap и динамическое формирование CSS с помощью языка LESS вплоть до последнего этапа разработки, где вся динамика компилируется в статичный файл, который используется в дальнейшем.

Файловая система в контексте CMS NetCat

Все файлы хранятся в директории /images/. Это не очень умно, но сделано ради встроенного в NetCat механизма бэкапирования. В ней:

• !phph-pack (наши разработки)
  • /css/phph-layout.css - скомпилированный CSS всего сайта
  • /js/ - оригинальные JS-скрипты Ph&Ph
    • phph-application.js - функции, требующиеся для наших рецептов + файеры для скриптов бутстрапа. Функции обозначаются по имени ключевого слова рецепта (todo: разделить все по файлам, разработать алгоритм компиляции JS)
  • /php/ - оригинальные PHP-скрипты Ph&Ph
  • /less-components/ - css-файлы для наших рецептов
  • /less-current-site/ - less-файлы для всей уникальной визуализации данного сайта. Файлов может быть много, удобно, когда стиль формы поиска в одном месте, а рекламы - в другом.
  • phph-layout-speedups.less - "ускорятели" верстки, наши доработки в стиле Bootstrap.
  • phph-layout.less - ключевой файл, содержащий подключение всех CSS и LESS-файлов сайта
• !phph-pack-collection - чужие свободные разработки в оригинальном виде. ^update почти в оригинальном. Необходимо:
  • переименовывать .css файлы в .less
  • пути к картинкам менять так, будто бы less-файл лежит не там, где он физически лежит, а там, откуда он вызывается из html-кода

Подключение Bootstrap через LESS в NetCat.

В головном макете дизайна как-либо создаются два режима работы: разработка и рабочий.

В режиме разработка комментируется весь код режима рабочий и активируется следующий код:

<!--РЕЖИМ РАЗРАБОТКИ-->
<link rel='stylesheet/less' type='text/css' href='/images/!phph-pack/phph-layout.less' />
<script src='/images/!phph-pack-collection/js/less.js' type='text/javascript'></script>

<script src='/images/!phph-pack-collection/js-holder/holder.js' type='text/javascript'></script>
<!--//РЕЖИМ РАЗРАБОТКИ-->

, где less.js  - js-компилятор less-кода, а holder.js  - генератор прямоугольных блоков. less.js требует следующих изменений: слово localhost в значении параметра location.hostname должно быть заменено на текущий домен разрабатываемого сайта. Это сделано для отключения кэширования браузера (пруф ), иначе обновления сайта не будут видны в реальном времени.

На заметку: для простых сайтов можно в конце разработки включить кэширование обратно вместо того, чтобы компилировать css. После этого однократно обойти кэширование можно будет добавив "#!watch" в конец адресной строки.

В режиме рабочий комментируется весь код режима разработка и активируется следующий код:

<!--РАБОЧИЙ РЕЖИМ-->
<link href='/images/!phph-pack/css/phph-layout.css' rel='stylesheet'>
<!--//РАБОЧИЙ РЕЖИМ-->

phph-layout.css содержит скомпилированный воедино и минимизированный код всех less- и css-файлов сайта.

Открытие, жизнь и развитие сайта

В момент открытия сайта директории !phph-pack и !phph-pack-collection копируются с сайта, после чего phph-layout.less компилируется в phph-layout.css с помощью Simpless  WinLess . Макет дизайна переводится в рабочий режим.

Доработки сайта производятся в режиме разработка, причем можно легко запрограммить автоматическое переключение режимов для, скажем, Администраторов. Чтобы применить изменения в основном режиме, придется производить компиляцию.

На заметку: для простых сайтов, возможно, разумнее будет в конце разработки просто один раз компилировать весь CSS пофайлово и без минимизации. Тогда с ним можно будет продолжить работать напрямую без необходимости перекомпиляции.

Дополнительная информация про Bootstrap и LESS

LESS можно (и нужно!) использовать при верстке на локальной машине. Добавив <script>less.watch();</script> в код, вы будете видеть изменения в своем браузере в реальном времени, сразу после сохранения файла! Это прямо какой-то Microsoft FrontPage с человеческим лицом!

Архив

Старый стандарт без LESS