Страница
SIMAI Framework включает в себя универсальный макет страницы, который позволяет создавать любое представление сайта.
Разметка страницы
Разметка фронтенда SIMAI Framework включает в себя несколько инструментов для проектирования макета сайта и его элементов:
- Структура страницы;
- Сетка;
- Утилиты адаптивности;
- Flexbox.
Структура страницы
<html>
<head>
<!-- Область загрузки и установки исходных данных -->
</head>
<body>
<div class="sf-service-top-area">
<!-- Верхняя область служебных данных -->
</div>
<div class="sf-pagewrap-area">
<!-- Обертка страницы -->
<header class="sf-header-area">
<!-- Область шапки страницы -->
<section class="sf-header-area-section"> … </section>
<section class="sf-header-area-section"> … </section>
<section class="sf-header-area-section"> … </section>
</header>
<section class="sf-page-area">
<!-- Область страницы -->
<section class="sf-page-area-section">
<!-- Область верхней включаемой области -->
</section>
<section class="sf-page-area-section">
<!-- Область средней части страницы -->
<aside class="sf-sidebar-left-area">
<!-- Область левого бокового раздела страницы -->
</aside>
<main class="sf-main-area">
<!-- Область центральной части страницы -->
</main>
<aside class="sf-sidebar-right-area">
<!-- Область правого бокового раздела страницы -->
</aside>
</section>
<section class="sf-page-area-section">
<!-- Область нижней включаемой области -->
</section>
</section>
<footer class="sf-footer-area">
<!-- Область подвала страницы -->
</footer>
</div>
<div class="sf-service-top-area">
<!-- Нижняя область служебных данных -->
</div>
</body>
</html>Визуальное отображение областей страницы
Служебная область страницы
Область sf-service-area предназначена для размещения в ней системных или служебных разделов, которые отображаются только в определенный момент. Область отделена от контента страницы и отображается на всю ширину.
Возможные примеры использования блока:
- Панель управления сайтом в административном режиме;
- Панель версии для слабовидящих.
Обертка страницы сайта
Область sf-pagewrap-area предназначена для формирования типа страницы сайта (на всю ширину, или ограниченной ширины).
Модификаторы обертки сайта
.pagewrap-area-layout-wide– обертка страницы сайта на всю ширину..pagewrap-area-layout-narrow– обертка страницы сайта ограниченной ширины..pagewrap-area-container-fluid– контейнер в сайте имеет гибкую ширину..pagewrap-area-container-fixed– контейнер в сайте имеет ограниченную ширину.
Модификаторы задаются в области .sf-pagewrap-area или в body, действуя также на служебную область. Они используются парами: .pagewrap-area-layout-wide или .pagewrap-area-layout-narrow совместно с модификатором .pagewrap-area-container-fluid или .pagewrap-area-container-fixed. Это дает 4 варианта построения макета сайта.
Страница на всю ширину с резиновым контейнером
При сочетании модификаторов .pagewrap-area-layout-wide и .pagewrap-area-container-fluid мы получим страницу, в которой обертка страницы будет на всю ширину, а контейнер с контентом будет растягиваться на всю доступную ширину экрана.
Страница на всю ширину с резиновым контейнером
При сочетании модификаторов .pagewrap-area-layout-wide и .pagewrap-area-container-fixed получим страницу, в которой обертка страницы будет на всю ширину, а контейнер с контентом фиксированной ширины. Если ширина экрана меньше фиксированной ширины экрана, то контейнер занимает всю ширину экрана.
Используйте следующие дополнительные модификаторы для указания ширины контейнера при ширине экрана более 1200px:
.container-size-960– ширина контейнера 960px..container-size-1080– ширина контейнера 1080px..container-size-1200– ширина контейнера 1200px..container-size-1320– ширина контейнера 1320px..container-size-1560– ширина контейнера 1560px..container-size-1680– ширина контейнера 1680px.