Section

Section — утилитарный scss-mixin/компонент, для позиционирования больших блоков контента, в зависимости от ширины страницы.

Анатомия секции

<div class="section">
  <div class="section__container">дочерний элемент</div>
</div>

Позиционирование контейнера

Дочерний элемент внутри секции позиционируется с помощью css-свойства grid-area.

Доступные значения: center, left, right, full

center

offset

container

offset

left

offset

container

offset

right

offset

container

offset

full

offset

container

offset

Настройка размеров

Глобальные переменные для секции хранятся в global.css

src/styles/global.css

:root {
  /* минимальные боковые отступы контейнера */
  --container-padding: 20px;

  /* размер контейнера секции начиная с phone */
  --container-phone: 640px;

  /* размер контейнера секции начиная с tablet */
  --container-tablet: 768px;

  /* размер контейнера секции начиная с laptop */
  --container-laptop: 1306px;
}

Компонент

Готовый компонент <Section/> по умолчанию центрирует вложенный дочерний элемент.

• Директорияsrc/ — исходный код

  • Директорияcomponents/ — все компоненты

    • Section.astro — компонент секции

src/pages/index.astro

---
import Layout from "@components/Layout.astro";
import Section from "@components/Section.astro";
import Gallery from "@components/Gallery.astro";
---

<Layout title="Главная страница" scripts={["front-page"]}>
    <Section>
        <Gallery />
    <Section/>
</Layout>

Позиционирование и адаптив

Компонент <Section/> включает в себя несколько пропсов для позиционирования дочернего элемента, в зависимости от ширины экрана (mobile-first):

• position — позиция дочернего элемента начиная с минимальной ширины экрана
• phone — начиная позиция дочернего элемента начиная с phone
• tablet — позиция дочернего элемента начиная с tablet
• laptop — позиция дочернего элемента начиная с laptop
• desktop — позиция дочернего элемента начиная с desktop
• widescreen — позиция дочернего элемента начиная с widescreen

Значения для пропсов совпадают с доступными значениями grid-area.

src/pages/index.astro

---
import Layout from "@components/Layout.astro";
import Section from "@components/Section.astro";
import Swiper from "@components/Swiper.astro";
---

<Layout title="Главная страница" scripts={["front-page"]}>
    <Section position="full" laptop="center">
        <Swiper />
    <Section/>
</Layout>

Верхний и нижний отступы

В компонент <Section/> включает в себя два пропса для нижнего и верхнего отступов, значения для них нужно редактировать вручную, в зависимости от дизайна:

• top — верхний padding
• bottom — нижний padding

SCSS-mixin

Секцию можно встроить в любую часть вёрстки, например в <Header/>:

mobile header

desktop header

src/components/Header.astro

<header class="header">
    <div class="header__container">
        <div class="header__mobile">mobile header</div>
        <div class="header__desktop">desktop header<div>
    </div>
</header>

<style is:global lang="scss">
    .header {
        @include section;

        &__container {
            grid-area: center;
        }
    }
</style>

Переопределение размеров

По умолчанию все размеры наследуются из файла global.css.

В каждой отдельной кастомной секции можно переопределить размеры через css-переменные:

.component {
  @include section;

  --container-padding: 16px;
  --container-phone: 540px;
  --container-tablet: 920px;
  --container-laptop: 1280px;
}

Адаптив

.component {
  @include section;

  &__container {
    grid-area: full;

    @include laptop-min {
      grid-area: center;
    }
  }
}

Наследование стороннего отступа

Сторонний отступ (offset) каждой секции высчитывается в css-переменную --container-offset, всегда доступную в дочерних элементах секции.

--container-offset может пригодиться для отступа у первого элемента swiper-карусели:

src/components/Swiper.astro

---
import Section from "@components/Section.astro";
import Card from "@components/Card.astro";
---

<Section position="full">
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        list.map((item) => (
          <div class="swiper-slide">
            <Card item={item} />
          </div>
        ))
      }
    </div>
  </div>
<Section/>

<style is:global lang="scss">
    .swiper-slide {
        &:first-child {
            margin-left: var(--container-offset);
      }
    }
</style>