Страница

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>

Визуальное отображение областей страницы

body
Область скриптов после открывающего тега body
Верхняя область служебных данных (sf-service-area)
Обертка страницы сайта (sf-pagewrap-area)
Область шапки сайта (sf-header-area)
Область средней части сайта (sf-page-area)
Верхняя включамая область
Средняя часть страницы
Левая включамая область (sf-sidebar-left-area)
Центральная часть сайта (sf-main-area)
Правая включамая область (sf-sidebar-right-area)
Нижняя включамая область
Область подвала сайта (sf-footer-area)
Нижняя область служебных данных (sf-service-area)
Область скриптов перед закрывающим тегом body

Служебная область страницы

Область 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 мы получим страницу, в которой обертка страницы будет на всю ширину, а контейнер с контентом будет растягиваться на всю доступную ширину экрана.

body
Обертка контейнера (на всю ширину)
Контейнер (на всю ширину)

Страница на всю ширину с резиновым контейнером

При сочетании модификаторов .pagewrap-area-layout-wide и .pagewrap-area-container-fixed получим страницу, в которой обертка страницы будет на всю ширину, а контейнер с контентом фиксированной ширины. Если ширина экрана меньше фиксированной ширины экрана, то контейнер занимает всю ширину экрана.

body
Обертка контейнера (на всю ширину)
Контейнер (фиксированной ширины) для режима LG и более. И гибкой шириной при ширине экрана менее LG.

Используйте следующие дополнительные модификаторы для указания ширины контейнера при ширине экрана более 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.