Создание адаптивного сайта на Slaed. Базовые настройки

В предыдущей заметке о создании адаптивного сайта на Slaed говорили о технической подготовке. Теперь поговорим о том, как всё это связать.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Если подобная строка уже есть, но чем-то отличается- заменяем.

2. Теперь нужно указать стили. По умолчанию в Slaed автоматически прописывается путь к style.css, в котором указываются ссылки на файлы стилей.

<link rel="stylesheet" href="templates/Pure/style.css"/>

Открываем этот файл всё удаляем и вписываем:

@import url(css/base.css);
@import url(css/grids.css);
@import url(css/grids-responsive.css);
@import url(css/theme.css);
@import url(css/blocks.css);
@import url(css/media.css);
@import url(fonts/all.css);

Первых три - это Pure:
Кросс-браузерность, сетка, адаптивность.

Далее:
css/theme.css - основной файл стилистики,
css/media.css - управление поведением при разной ширине экрана,
css/blocks.css - оформление виджетов,
fonts/all.css - подключения шрифтов.

Создаём пустой макет.
Принцип шаблонизатора в слаеде основан на файлах именованных по названию модуля. Если нужного файла (т.е. значит шаблона) нет, то подставляется базовый файл шаблона.
По поводу главной страницы есть два нюанса:

1.CMS Slaed позволяет выводить на главную страницу сайта содержание любого модуля, либо же не выводить ничего. Это указывается в настройках
2.Шаблонизатор Slaed позволяет оформить главную страницу сайта в независимости от того как сформирован базовый макет.  Это достигается путём cоздания файла

Итак, создаём файл index.htnl с минимальным кодом:

<!doctype html>
<html lang="ru">
    <head>
        {%HEAD%}
    </head>
    <body>
        {%MODULE%}
    </body>
</html>

В конфигурации системы устанавливаем:
Модуль загружаемый на главной странице: нет
Тема оформления: Pure

Сохраняем. Теперь главная страница отображается пустой, но без ошибок.

4. Создаём базовый макет.

После того, как начало положено, создадим базовый макет. Т.е. определим: что, где и как будет располагаться.
Разделим страницу на четыре блока по горизонтали:

Шапка header
Основная навигация (nav)
Содержание [(b]content[/b])
Подвал (footer)

По вертикали - на два варианта:
Полная растяжка (wrapper)
<li>Фиксированная (wrap)

Всё скомпонуем в один код:

<!doctype html>
<!doctype html>
<html lang="ru">
    <head>
        {%HEAD%}
    </head>
    <body>
    <header class="wrapper">
        <div id="header" class="wrap">
            шапка сайта
        </div>
    </header>
    <nav class="wrapper">
        <div id="nav" class="wrap">
            навигация
        </div>
    </nav>    
    <main class="wrapper">
        <div id="main" class="wrap">
        {%MODULE%} основной контент
        </div>
    </main>
    <footer class="wrapper">
        <div id="footer" class="wrap">
             подвал страницы
        </div>
    </footer>
    </body>
</html>

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

<!doctype html>
<html lang="ru">
    <head>
        {%HEAD%}
    </head>
    <body>
    <header class="wrapper">
        <div id="header" class="wrap">
            шапка сайта
        </div>
    </header>
    <nav class="wrapper">
        <div id="nav" class="wrap">
            навигация
        </div>
    </nav>    
    <main class="wrapper">        
        <div id="main" class="wrap">
            <aside>
                Правый блок
            </aside>
            {%MODULE%} основной контент
            <aside>
                Левый блок
            </aside>
        </div>
    </main>
    <footer class="wrapper">
        <div id="footer" class="wrap">
             подвал страницы
        </div>
    </footer>
    </body>
</html>