Сетка

Сетка Flexbox Grid. За основу взята сетка flexboxgrid.com. Сетка была расширена необходимыми классами и немного адаптирована под мои нужды.

Для работы адаптива сетки, необходимо установить пакет с медиа запросами - scss-media-queries-system

Навигация по документации сетки.

• Сетка
  • Установка
    • Подключение Nuxt.js
  • Документация Flexbox Grid
  • .flex-grid
  • .col-#
  • .col-offset-#
  • Вспомогательные классы
    • .d-flex
    • .d-flex-inline
    • .start
    • .center
    • .end
    • .top
    • .middle
    • .bottom
    • .around
    • .between
    • .fd-row
    • .fd-row-reverse
    • .fd-column
    • .fd-column-reverse
  • Упорядочивание колонок
    • .first
    • .last
  • Контейнеры
    • .container
    • .container-fluid
  • Отступы

Установка

  npm i scss-media-queries-system -D

Подключение Nuxt.js

Для начала необходимо установить модуль Nuxt Style Resources для работы с SCSS. Затем в файле nuxt.config.js подключить SCSS файл со стилями сетки:

  styleResources: {
    scss: [
      '@/node_modules/scss-flexbox-grid-system/flexbox-grid.scss',
    ],
  },

Документация Flexbox Grid

Сетка имеет 12-ти колоночную систему. Основные классы сетки:

.flex-grid

flex-grid - Базовый контейнер для колонок сетки.

.col-#

col-# - Колонки сетки. Должны быть вложены в flex-grid.

Адаптивные стили колонок

| Selector | | ------------ | | col-xs-# | | col-sm-# | | col-xm-# | | col-md-# | | col-lg-# | | col-xl-# | | col-# |

.col-offset-#

col-offset-# - Селекторы для смещения колонок внутри сетки.

| Selector | | ----------------- | | col-xs-offset-# | | col-sm-offset-# | | col-xm-offset-# | | col-md-offset-# | | col-lg-offset-# | | col-xl-offset-# | | col-offset-# |

Вспомогательные классы

Список доступных вспомогательных классов для работы с разметкой.

.d-flex

d-flex - Селектор для display: flex;.

| Selector | | ----------- | | d-flex-xs | | d-flex-sm | | d-flex-xm | | d-flex-md | | d-flex-lg | | d-flex-xl | | d-flex |

.d-flex-inline

d-flex-inline - Селектор для display: flex-inline;.

| Selector | | ------------------ | | d-flex-inline-xs | | d-flex-inline-sm | | d-flex-inline-xm | | d-flex-inline-md | | d-flex-inline-lg | | d-flex-inline-xl | | d-flex-inline |

.start

start - Селектор для justify-content: flex-start;.

| Selector | | ---------- | | start-xs | | start-sm | | start-xm | | start-md | | start-lg | | start-xl | | start |

.center

center - Селектор для justify-content: center;.

| Selector | | ----------- | | center-xs | | center-sm | | center-xm | | center-md | | center-lg | | center-xl | | center |

.end

end - Селектор для justify-content: flex-end;.

| Selector | | -------- | | end-xs | | end-sm | | end-xm | | end-md | | end-lg | | end-xl | | end |

.top

top - Селектор для align-items: flex-start;.

| Selector | | -------- | | top-xs | | top-sm | | top-xm | | top-md | | top-lg | | top-xl | | top |

.middle

middle - Селектор для align-items: center;.

| Selector | | ----------- | | middle-xs | | middle-sm | | middle-xm | | middle-md | | middle-lg | | middle-xl | | middle |

.bottom

bottom - Селектор для align-items: flex-end;.

| Selector | | ----------- | | bottom-xs | | bottom-sm | | bottom-xm | | bottom-md | | bottom-lg | | bottom-xl | | bottom |

.around

around - Селектор для align-items: space-around;.

| Selector | | ----------- | | around-xs | | around-sm | | around-xm | | around-md | | around-lg | | around-xl | | around |

.between

between - Селектор для justify-content: space-between;.

| Selector | | ------------ | | between-xs | | between-sm | | between-xm | | between-md | | between-lg | | between-xl | | between |

.fd-row

fd-row - Селектор для flex-direction: row;.

| Selector | | ----------- | | fd-row-xs | | fd-row-sm | | fd-row-xm | | fd-row-md | | fd-row-lg | | fd-row-xl | | fd-row |

.fd-row-reverse

fd-row-reverse - Селектор для flex-direction: row-reverse;.

| Selector | | ----------- | | fd-row-reverse-xs | | fd-row-reverse-sm | | fd-row-reverse-xm | | fd-row-reverse-md | | fd-row-reverse-lg | | fd-row-reverse-xl | | fd-row-reverse |

.fd-column

fd-column - Селектор для flex-direction: column;.

| Selector | | ----------- | | fd-column-xs | | fd-column-sm | | fd-column-xm | | fd-column-md | | fd-column-lg | | fd-column-xl | | fd-column |

.fd-column-reverse

fd-column-reverse - Селектор для flex-direction: column-reverse;.

| Selector | | ---------------------- | | fd-column-reverse-xs | | fd-column-reverse-sm | | fd-column-reverse-xm | | fd-column-reverse-md | | fd-column-reverse-lg | | fd-column-reverse-xl | | fd-column-reverse |

Упорядочивание колонок

Список доступных классов для упорядочивания колонок сетки.

.first

first - Селектор для order: -1;.

| Selector | | ---------- | | first-xs | | first-sm | | first-xm | | first-md | | first-lg | | first-xl | | first |

.last

last - Селектор для order: 1;.

| Selector | | --------- | | last-xs | | last-sm | | last-xm | | last-md | | last-lg | | last-xl | | last |

Контейнеры

Контейнер для центрирования контента.

На любом размере экрана мы вычитаем из 50vw (используем vw чтобы ширина считалась не от родителя, а от ширины области промотора браузера.) сумму половины текущей ширины и корректирующего значения в 590px, что позволяет держать контент фиксированно в 1180px, когда экран больше или равен этому значению. Для простоты восприятия, все описанное выше помещается в следующую формулу:

(100% - 1180px)/2 = 50% - 590px

Где (100% - 1180px) — это сумма боковых полей вне контейнера.

| Разрешение | Ширина контейнера | | ----------- | ----------------- | | xs | 540px | | sm | 540px | | xm | 720px | | md | 720px | | lg | 960px | | xl | 1180px |

.container

container - Контейнер с фиксированной шириной.

.container-fluid

container-fluid - Контейнер растягивает контент по всей ширине экрана.

Отступы

Вспомогательные сокращенные классы отступов для изменения внешнего вида элементов. Классы именуются в формате {свойство}{сторона}-{размер}.

Где свойство одно из:

• m - Для установки margin.
• p - Для установки padding.

Где сторона одна из:

• t - Для установки margin-top or padding-top.
• b - Для установки margin-bottom or padding-bottom.

Где размер один из:

• 0 - 0.
• 1 - 1rem.
• 2 - 2rem.
• 3 - 3rem.
• 4 - 4rem.
• 5 - 5rem.
• auto - Для установки свойства margin в значение auto.