2.0.1 • Published 2 years ago

layout-grid-helper v2.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
2 years ago

Layout grid helper

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

alt text

Установка

```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 - покзать/скрыть сетку

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

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

2.0.1

2 years ago

2.0.0

2 years ago

1.2.0

4 years ago

1.2.1

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago