Finar.ru
web.finar.ru
video.finar.ru
Темы для BootstrapNew!

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

стандартизация принципов верстки

Автор: Филипп Казаков, дата: 2013-01-08, просмотров 4216
Тэги

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 с человеческим лицом!

Полезные ссылки:

Плагины для Bootstrap:

Шаблоны Bootstrap:

Почему именно Bootstrap?

Архив

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

Файловая структура

По-умолчанию, все файлы разработок помещаются в директорию /images/

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

Верстка базируется на front-end фреймворке Bootstrap .

  • прежде чем сделать что-то, посмотрите как это предлагают делать разработчики. Скачайте полный пак Бутстрапа  к себе на комп и поковыряйтесь в нем на примерах
  • изучая Бутстрап, не используйте CSS. Вообще. Обходитесь только html-кодом до тех пор, пока блочная структура макета и основной функционал не будут полностью готовы
    • чтобы изменить пропорции сетки сайта, необходимо перекомпилировать Бутстрап  | для продвинутых
    • если мы верстаем сильно нестандартный сайт, есть смысл отказаться от сетки Бутстрапа. Но не от него самого - кроме собственно сетки сайта в нем масса других приятных штук
  • при верстке файл bootstrap.css должен оставаться без изменений, все доработки делаются только в отдельном css-файле
  • аналогично, все JS-файлы остаются без изменений, все новые функции, инициализации и настройки существующих пишутся в отдельный файл
  • конструкции вида style='margin-top;8px' допустимо использовать только для временных, служебных решений.
  • старайтесь соблюдать вложенность и логику внутри CSS:
.phph-footer {
border-left: 1px solid #195e97;
border-right: 1px solid #195e97;
margin-left:0;
background:url(/images/footer.png);
height:24px;
}

    .phph-footer-left {
    border-top: 2px solid #888;
    }
        .phph-footer-left p {margin-top: 2px;}

    .phph-footer-center {
    text-align: center;
    margin-left:0;
    height: 23px;
    /*border-top: 2px solid #888;   */
    }

Оставить комментарий 


Ваше имя:
->