Layout grid helper

Направляющие верстки

Установка

```bash
# Using pnpm
pnpm add -D layout-grid-helper

# Using yarn
yarn add --dev layout-grid-helper

# Using npm
npm install --save-dev layout-grid-helper

Использование

import LayoutGridHelper from 'layout-grid-helper';

const gridHelper = new LayoutGridHelper({
	prefix: 'gh',
	sides: '16px',
	gutter: '16px',
	columns: 2,
	responsible: {
		640: {
			gutter: '20px',
			container: '620px',
			sides: '0px',
			columns: 4
		},
		960: {
			container: '940px',
			columns: 9
		},
		1600: {
			container: '1580px',
			columns: 10
		}
	}
});

Опции

| Имя | Описание | Значение по умолчанию | |-------------|----------------------------|-----------------------------------------------------| | className | Класс блока сетки | layout-grid-helper | | prefix | Префикс переменных | gh | | mobileFirst | Приоритет мобильной версии | true | | color | Цвет | rgb(255 0 0 / 0.2) | | gutter | Отступ между колонками | 16px | | sides | Отступ от края экрана | 20px | | columns | Количество колонок | 4 | | container | Ширина контейнера | 100% | | responsible | Медиа запросы | {[breakpoint]:{gutter?,sides?,columns?,container?}} |

Методы

| Имя | Описание | |---------|----------------| | show | Показать сетку | | hide | Скрыть сетку | | destroy | Удаление сетки |

Клавиатура

CTRL + M - покзать/скрыть сетку

Благодарность

Библиотека сделана на основе видео Вадима Макеева