MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

Шаблоны для новичков. Урок 11. Прототипирование. Использование LESS

MaxSite CMS / Создание шаблонов (версии 0.8x)Просмотров: 9193 (128)

Первым этапом создания шаблона является его прототипирование. Это что-то вроде чернового варианта, где опущены мелкие детали и можно сосредоточиться на самых важных частях сайта. На этом этапе создается модульная сетка сайта и верстка основных блоков.

Для верстальщика есть один важный момент: прототипирование требуется там, где нет конечного дизайна. Иногда бывают ситуации, когда верстальщику в работу даётся уже полностью готовый макет. Поэтому нужно лишь наложить модульную сетку, как мы это рассмотрели в предыдущих уроках.

Если же стоит задача придумать сайт, то прототипирование будет обязательным этапом.

Программы для прототипирования

Для создания наброска сайта используются произвольные программы, или даже обычный блокнот и карандаш. Я давно приноровился использовать Pencil (советую ставить как «standalone application» по ссылке Downloads). Там же можно скачать и наборы элементов, иконок и т.п.

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

Черновой макет сайта

Для учебных целей я сделал набросок будущего сайта. Это главная страница.

Прототип будущего шаблона сайта MaxSite CMS

Отмечу основные моменты:

  • Шапка содержит два меню.
  • В шапке выводится логотип.
  • Во втором меню добавим поиск по сайту.
  • Шапка визуально растянута на ширину браузера.
  • Основной контент фиксированной ширины 960px по центру браузера.
  • Используется один сайдбар справа.
  • Для главной страницы выводится слайдер вверху.
  • Для главной страницы записи выводятся в две колонки.
  • Сайдбар настраивается стандартно через админ-панель.
  • Подвал содержит два блока: блок колонок и блок копирайтов.
  • Подвал визуально растянут на всю ширину браузера.
  • Четыре колонки в подвале.
  • Блок копирайтов содержит дату, название сайта и т.п.

Этой информации нам достаточно, чтобы приступить к созданию шаблона.

Чеклист создания шаблона

Полный чеклист приведен в wiki MaxSite CMS.

  • Создадим каталог шаблона.
  • Скопируем в него содержимое default/_create_a_new_template.
  • Укажем в info.php данные шаблона.
  • Скопируем default/css/var_style.css в свой шаблон.
  • Скопируем default/css/less/var_style.less в свой шаблон в /css/.
  • Удалим css/add_style.css в своем шаблоне.
  • В админ-панели сайта и переключимся на свой шаблон.
  • Отключим все css-профили, если они были включены.

Компоненты-заглушки

Прежде чем приступать к верстке, следует определиться с компонентами. Очевидно, что вся шапка будет состоять из трех компонентов:

  • Верхнее меню (плюс иконки).
  • Лого.
  • Нижнее меню (плюс поиск).

Из всех этих компонентов у нас нет ни одного подходящего. Поэтому мы сделаем файлы-заглушки в каталоге компонентов.

  • header-menu-top.php
  • header-logo.php
  • header-menu.php

Содержимое файла (на примере header-menu.php):

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
echo '<div>header-menu.php</div>';

После этого в Настройке шаблона указываем эти компоненты.

Для подвала добавим аналогичный footer-top.php. При этом будем (пока) использовать стандартные footer-copyright.php и footer-statistic.php.

Также укажем эти компоненты в Настройках шаблона.

Теперь, шапку и подвал будем делать на уровне файлов компонентов.

Для css-вёрстки используем LESS

Вообще, что такое LESS? Это компилятор расширенного синтаксиса CSS в стандартный CSS. Например в LESS мы можем указывать переменные и выполнять различные арифметические вычисления. Соответсвенно, если нужно будет поменять размеры, в переменной указываем новое значение и LESS сам всё пересчитает и обновит CSS-файл.

Тут важно понять, что LESS - это тот же CSS, только более удобный и функциональный.

Для работы с LESS нужно установить программу WinLESS. Подробнее вы можете почитать в моей статье «Используем LESS (динамический CSS) в MaxSite CMS».

Еще раз подчеркну, что используем WinLESS. В него нужно будет добавить css/var_style.less шаблона.

Перед началом работы с var_style.less откройте его и замените строчку

@import "include/helpers.less";

на

@import url('../../default/css/less/include/helpers.less');

Это позволит подключать хелперы LESS прямо из default шаблона. Если этого не сделать, то компилятор WinLESS будет ругаться на ненайденный файл.

Почему LESS

Первая причина - лучший синтаксис CSS. Прежде всего это касается вложенных селекторов. Например задание ссылок:

a {
    color: #0E5FBF; 
    text-decoration: underline;
 
    &:hover {color: red;}
     
    div.widget & {text-decoration: none;} 
    div.sitemap & {text-decoration: none;} 
    div.type_comments & {text-decoration: none;} 
    div.page_other_pages & {text-decoration: none;} 
}
Символ «&» указывает «этот же селектор». В нашем случае тэг A.

Данная возможность примечательна ещё и тем, что на выходе получается правильный css с контекстными селекторами.

Вторая причина - переменные и математические функции. Мы рассмотрим эту возможность чуть ниже при указании размеров контента и сайдбара.

Третья причина - миксы (mix, mixin) - наборы правил, которые можно использовать в любых других наборах. Например есть микс .border_radius(), который задаёт скругление углов блока. А микс .border()указывает границу.

div.page_other_pages_header, 
div.page_comments_count, 
div.leave_a_comment {
    .border(#DDD);
    .border_radius(8px);
}

LESS спокойно преобразует это в нормальный CSS со всеми moz- и webkit-префиксами.

Изучение LESS

Возможности LESS достаточно большие, но базовые основы схватываются на-лету. Полная документация доступна на официальном сайте.

Задаем структуру сайта

Откроем var_style.less и найдем комментарий «Структура сайта». Здесь объявлены две переменные:

@all_width: 960px;
@sidebar_width: 250px;

Несложно догадаться, что это общая ширина сайта и ширина сайдбара. Ниже по коду можно увидеть использование этих переменных при задании ширины DIV-блоков, а также отступов margin.

Впрочем, для нашего шаблона данная структура (default-шаблона) все равно полностью не подходит, и после того, как вы поиграетесь, секцию структуры можно удалить.

Основные контейнеры

Согласно макета, шапка и подвал должны быть растянуты на всю ширину браузера. При этом каждый компонент пусть будет иметь возможность использования своего фона. Таким образом все наши

  • div.all-wrap
  • div.header
  • div.footer
  • и их wrap-блоки

должны иметь 100% ширину. Мы знаем, что блочные элементы по умолчанию так себя и ведут, поэтому для этих блоков пока ничего на задаем.

Кстати, одной из замечательных особенностей LESS, является то, что в результирующий CSS не попадают пустые наборы правил.

Но нам нужно отцентировать контент и сайдбар. В общем этот блок полностью совпадает с default-шаблоном, поэтому мы его просто оставим как есть.

Готовый код:

// СТРУКТУРА САЙТА
 
@all_width: 960px;
@sidebar_width: 270px;
 
div.main {
    width: @all_width; 
    margin: 0 auto; 
    background: white;
}
 
div.content {
    width: @all_width - @sidebar_width; 
    margin: 0 @sidebar_width 0 0; 
    float: left;
}
 
div.content-wrap {margin: 20px 30px 10px 20px;}
 
div.sidebar {
    width: @sidebar_width; 
    float: right; 
    margin: 20px 0 0 -@sidebar_width;
}
 
div.sidebar1-wrap {margin-right: 10px;}

Для сайдбара я указал 270px.

HTML-структура компонентов

Компоненты шапки должны быть 100% ширины, а вот содержимое отцентировано. Решается это как обычно wrap-блоками.

Откроем header-menu-top.php и зададим блоки и классы.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');?>
 
    <div class="header-menu-top">
        <div class="wrap">
            header-menu-top.php
        </div>
    </div>

И стили:

// компоненты
 
div.header-menu-top {
    div.wrap {
        width: @all_width;
        .block_center();
    }
}

Переменная @all_widthнам уже знакома. А микс .block_center()делает выравнивание по центру. Этот микс будет эквивалентен:

margin: 0 auto;
Посмотреть все миксы можно в default/css/less/include/helpers.less

Точно по этой же схеме делаем остальные компоненты:

  • header-logo.php
  • header-menu.php
  • footer-top.php

Ну и результирующий CSS (все компоненты):

// компоненты
 
div.header-menu-top,
div.header-logo,
div.header-menu,
div.footer-top
 {
    div.wrap {
        width: @all_width;
        .block_center();
    }
}
Компоненты footer-copyright.php и footer-statistic.php мы пока не трогаем, поскольку вместо них будет один общий.

Итого

На этом этап построения модульной сетки сайта можно считать завершенным. Все основные блоки у нас спозиционированы и дальнейшие действия уже будут связаны с функциональным и цветовым наполнением компонентов.

««« Урок 12 | Урок 10 »»»

Комментариев: 2 RSS

1Андрей Морковин10-08-2012 23:40

В LESS/CSS-коде, описывающем структуру сайта, для меня возникает какая-то магия :)

Не могу понять, зачем применяются свойство margin: 0 @sidebar_width 0 0

div.content {
    width: @all_width - @sidebar_width; 
    <b>margin: 0 @sidebar_width 0 0;</b> 
    float: left;
}

и потом margin: 20px 0 0 -@sidebar_width;

div.sidebar {
    width: @sidebar_width; 
    float: right; 
    <i>margin: 20px 0 0 -@sidebar_width;</i>
}

Это нужно просто для демонстрации возможностей LESS?

2MAX11-08-2012 00:13

Да, это что-то вроде универсального кода, на случай, если потребуется поменять расположение сайдбара или добавить еще один. Но для данного варианта верстки он, конечно, избыточен. :)

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

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

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.