layout-grid-helper
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Layout grid helper

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

    alt text

    Установка

      npm i layout-grid-helper --save-dev

    или

    yarn add -D layout-grid-helper

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

    import LayoutGridHelper from 'layout-grid-helper';
    
    const gridHelper = 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 - покзать/скрыть сетку
    

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

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

    Keywords

    none

    Install

    npm i layout-grid-helper

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • tak_ne_poidet