Страница

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.