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

Шаблоны для новичков. Урок 21. Основы D2 (меняем модульную сетку)

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

В комплекте шаблона присутствует файл layout02.less, который содержит немного другой вариант модульной сетки, построенной по «классическому» принципу. И поскольку для этой сетки нет «резины», то её адаптивность должна уже определяться в responsive-файлах. Рассматривать этот вариант не будем, поскольку он практически один в один повторяет предыдущие уроки.

По поводу модульной сетки скажу, что это краеугольный камень в построении шаблона. От её выбора будет зависеть вся остальная вёрстка. Рассмотрим вариант, когда для шаблона нужно разместить шапку на всю ширину браузера. В нашем же варианте контейнер div.all имеет ограничение по ширине. Следовательно этот блок не позволит дочернему div.header выполнить поставленную задачу.

Выход в этом случае только один — позволить всем родительским блокам иметь 100% ширину браузера.

Но и это ещё не всё. Шапку можно задавать в виде div.header или только блоков компонентов. Возьмём в качестве примера мой сайт:

Пример шапки на всю ширину браузера

Шапка представлена в виде компонентов:

  • верхнее меню + иконки
  • лого + название + описание + баннер
  • основное меню

Все эти компоненты ограничены по ширине основного сайта. Вот я их выделил цветом:

Выделенные компоненты

Казалось бы что в данном варианте для задания фона шапки следует использовать div.header, но это будет ошибкой, поскольку фон каждого компонента разный.

Рассмотрите фон компонентов шапки

Ситуация может усложнится и тем, что высоты компонентов могут меняться и не быть фиксированными. Это исключает использование фоновых изображений в родительском div.header. Мы приходим к тому, что ширина каждого компонента тоже должна быть 100% ширины браузера. Только таким образом мы можем задать у каждого компонента свой уникальный фон, без оглядки на остальные блоки.

Ширина компонентов 100%

Модульная сетка, рассмотренная нами в D2 не годится для такого варианта шаблона. Что же следует изменить в layout01.less, чтобы реализовать нужный нам вариант?

При внимательном рассмотрении (а я настоятельно рекомендую досконально разобраться в этом вопросе), у нас задана ширина основного контейнера div.all. В нашей же задаче ширина должна быть только у контейнера для контента и сайдбара — div.main. Таким образом следует перенести стили из div.all в div.main.

...
 
div.all {
}
 
div.all-wrap {
}
 
div.header {
}
 
div.main {
    margin: 0 auto;
    width: 100%;
    max-width: @content;
    .bg(#fff);
}
 
...

На выходе мы получаем ровно то, что нам нужно. С учетом того, что каждый компонент уже сам отвечает за свое расположение в пределах своего родителя.

Разметка компонентов

Типовой вариант компонента всегда такой:

<div class="компонент"><div class="wrap">
 
 ... вывод компонента ...
 
</div></div>

Если компонент состоит из нескольких блоков, то разметка будет примерно такой:

<div class="компонент"><div class="wrap">
 
    <div class="r1">
     блок1
    </div>
 
    <div class="r2">
     блок2
    </div>
 
     <div class="clearfix"></div>
</div></div>

Название css-классов не имеют значения, но возможна ситуация, когда внутренний блок может содержать другие вложенные блоки. Главное это то, что за позиционирование компонента отвечает он сам.

Рассмотрим для примера компонент menu-login. Вывод html осуществляется через шаблонизатор Page_out:

$pt->div_start('menu-login', 'wrap');
    
    $pt->div_start('r1');
        if ($fn = mso_fe('components/menu/menu.php')) require($fn);
    $pt->div_end('r1');
    
    $pt->div_start('r2');
        if ($fn = mso_fe('components/_login/_login.php')) require($fn);
    $pt->div_end('r2');
    
    $pt->clearfix();
 
$pt->div_end('menu-login', 'wrap');

Данный код приведёт к такой разметке:

<div class="menu-login"><div class="wrap">
 
    <div class="r1">
     меню
    </div>
 
    <div class="r2">
     логин
    </div>
 
     <div class="clearfix"></div>
</div></div>

В div.menu-login, который имеет 100% ширину, мы указываем фон. А для его div.wrap уже выставляем максимальную ширину контента. Вложенные блоки расположены в одну строчку, поэтому для их расположения выставляем соответствующие float.

В упрощенном варианте для фиксированной ширины сайта, стили будут такими:

div.menu-login {
    
    .bg(#777); // фон
    
    > div.wrap {
        width: @CONTENT_WIDTH;
        margin: 0 auto;
    }
    
    div.r1 {
        .left;
    }
    
    div.r2 {
        .right;
    }
}

Правила для wrap-блока следует задавать как:

div.menu-login > div.wrap { ...

— эти стили применятся только к div.wrap, непосредственно прилегающему к div.menu-login. Если убрать символ >, то стили будут применены ко всем wrap-блокам, которые могут быть в компонентах меню и логина.

Для div.r1 и div.r2 мы указываем обычный float, но не указываем ширину. Это небольшая хитрость, которая заставит браузер выставить для этих блоков width: auto. Но это не всегда срабатывает, поэтому нужно проверять по ситуации.

Что касается полурезиновой верстки, то для данного компонента она реализуется точно также, как и для layouts.

> div.wrap {
    margin: 0 auto;
    width: 100%;
    max-width: @CONTENT_WIDTH;
}

Ну а ширина div.r1 и div.r2 определяется уже согласно дизайна. Очевидно, что она должна быть задана в процентах.

LESS-файлы компонентов

Нетрудно догадаться, что стили компонентов располагаются в css-less/components. Поскольку мы используем команду @MSO_IMPORT_ALL_COMPONENTS;, то подключать файлы компонентов вручную не нужно. Всё будет сделано автоматом.

На практике часто оказывается, что не все компоненты используются в шаблоне, поэтому лишние файлы лучше удалить чтобы он не попали в результирующий var_style.css.

Некоторые less-файлы компонентов могут использовать другие less-файлы компонентов. Пример — menu-icons.less, который подключает _social.less. Последний содержит микс .social(), задающий стили для иконок. Такое поведение объясняется тем, что .social() универсальный микс, готовый к использованию и в других компонентах.

Каталог mixins

В этом каталоге содержатся различные миксы и какие-то готовые наборы стилей. Некоторые миксы находятся в shared/css-less/mixins/. Их следует скопировать в cвой шаблон и подключать уже из него. Подключать из shared-каталога можно только helpers.less — это уже «устаканившаяся» версия, которая будет только увеличиваться по функционалу с сохранением совместимости для будущих версий MaxSite CMS.

Прочие less-каталоги

Как я уже отмечал, разделение на каталоги условное, поэтому вебмастер может использовать свой вариант. Стили, которые не попадают ни под какую «тематику» я размещаю в каталоге blocks.

Каталоги menu и responsive

Эти два каталога имеют особый смысл и явно завязаны на файлы menu.less и responsive.less. Такое разделение позволяет несколько упростить поддержку разных вариантов стилей в одном каталоге. Например два меню могут быть в div.MainMenu и div.MainMenu2, но сами стили определены по дизайну: menu-gray.less и menu-red.less.

div.MainMenu {
    @import url('menus/menu-gray.less');
}
 
div.MainMenu2 {
    @import url('menus/menu-red.less');
}

Таким образом можно сделать еще другие меню, переключая их в menu.less.

Аналогично устроен и responsive.less.

««« Урок 22 | Урок 20 »»»

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

2Игорь03-02-2013 21:53

Подскажите где можно менять расположение элементов например строку (2 февраля 2013 г. Просмотров: 178 RSS 1)

3MAX03-02-2013 22:42

Задавайте вопросы, я их рассмотрю в следующих уроках.

4Кирилл.04-02-2013 14:36

Макс, сделай пожалуйста урок, если это конечно возможно по подробному подключению less файлов, у меня постоянные какие-то проблемы с компилятором winless. вроде бы все правильно делаю - а в момент компиляции постоянно ошибки лезут и в результате даже ни каких изменений.

5MAX04-02-2013 14:42

А зачем использовать winless, если есть свой нормальный less-компилятор.

7Кирилл.05-02-2013 06:59

Ай м сорри друзья! =) Это я невнимательный! =) Я делал шаблон на дефолт - по урокам Максима, там он использовал WinLess =) Поэтому думал и здесь так же надо, я заметил файл var_style.php но не придал ему значения. Спасибо за подсказки и тем, кто ответил на форуме! =) Теперь проблем с компиляцией нету! =) Все работает как часы! =)

8Игорь07-02-2013 11:01

напишите урок о создании шаблон полностью с нуля и описание каждого файла и его функцию будет очень хорошая инструкция для новичков. Это убереет некое недопонимание у людей. Заранее спасибо! Движок улет.

9Пономаренко Вячеслав07-02-2013 13:11

Ну так этому фактически и посвящены все 21 урока. Какой смысл их переписывать? В нужных уроках, где произошел переход с шаблона дефаулт на новый Д2 - есть подробные комментарии что поменялось. В том числе и про файлы, и структуру каталогов.

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

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

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

О сайте

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