Настройки сетки

В данном разделе описаны ключи, которые мы указываем у объекта, передаваемого вторым параметром в функцию smartgrid при генерации сетки.

const smartgrid = require('smart-grid');
 
let options = {
   /* our settings here */
}
 
smartgrid('path-to-your-folder', options);

На наш взгляд, такой вид задания настроек - одно из преимуществ smart-grid относительно других библиотек.

Тот же bootstrap можно использовать в препроцессорном виде, подключив нужные SCSS-файлы из модуля.

Однако описывать настройки гораздо удобнее в виде js-объекта, чем в виде переменной в препроцессорном файле. Особенно сильно это ощущается для составных опций, таких как container и breakPoints.

В дополнительном меню вы видите отсортированный по алфавиту список доступных настроек.

Ниже расположен объект с настройками сетки по умолчанию.

{
    filename: "smart-grid",
    outputStyle: "less",
    columns: 12,
    offset: "30px",
    mobileFirst: false,
    container: {
        maxWidth: "1280px",
        fields: "30px"
    },
    breakPoints: {
        lg: {
            width: "1200px"
        },
        md: {
            width: "992px",
            fields: "15px"
        },
        sm: {
            width: "720px"
        },
        xs: {
            width: "576px"
        }
    },
    mixinNames: {
        container: "wrapper",
        row: "row-flex",
        rowFloat: "row-float",
        rowInlineBlock: "row-ib",
        rowOffsets: "row-offsets",
        column: "col",
        size: "size",
        columnFloat: "col-float",
        columnInlineBlock: "col-ib",
        columnPadding: "col-padding",
        columnOffsets: "col-offsets",
        shift: "shift",
        from: "from",
        to: "to",
        fromTo: "from-to",
        reset: "reset",
        clearfix: "clearfix",
        debug: "debug",
        uRowFlex: "u-row-flex",
        uColumn: "u-col",
        uSize: "u-size"
    },
    tab: "    ",
    defaultMediaDevice: "screen",
    detailedCalc: false
};