Scss-flexbox-grid-system NPM

Сетка

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

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

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

Сетка

Установка

  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) — это сумма боковых полей вне контейнера.