Grid

classname

Type: String

Default: grid

This option sets the class by which the grid will be defined in the content.

By default, the grid in the editor has the following HTML:

<div class="grid">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

You can change the grid class like this:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        classname: 'row'
    }
});

Now Article will parse the grid like this in the content:

<div class="row">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

See examples of grid settings for different frameworks:

• Bootstrap Grid
• Bulma Grid
• UIkit Content

classes

Type: String

Default:

This setting defines additional classes when creating a grid from addbar.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        classname: 'row',
        classes: 'mb-4 row-auto'
    }
});

Now when creating a grid such code will be generated in Article:

<div class="row mb-4 row-auto">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

See examples of grid settings for different frameworks:

• Bootstrap Grid
• Bulma Grid
• UIkit Content

patterns

Type: Object

Default: object

Patterns define the grid columns that will be generated when the grid is inserted through popup into addbar. This is the default:

{
    '6|6': 'column column-6|column column-6',
    '4|4|4': 'column column-4|column column-4|column column-4',
    '3|3|3|3': 'column column-3|column column-3|column column-3|column column-3',
    '2|2|2|2|2|2': 'column column-2|column column-2|column column-2|column column-2|column column-2|column column-2',
    '3|6|3': 'column column-3|column column-6|column column-3',
    '2|8|2': 'column column-2|column column-8|column column-2',
    '5|7': 'column column-5|column column-7',
    '7|5': 'column column-7|column column-5',
    '4|8': 'column column-4|column column-8',
    '8|4': 'column column-8|column column-4',
    '3|9': 'column column-3|column column-9',
    '9|3': 'column column-9|column column-3',
    '2|10': 'column column-2|column column-10',
    '10|2': 'column column-10|column column-2',
    '12': 'column column-12'
}

Here's an example of the patterns for Bootstrap grid:

{
    '6|6': 'col-6|col-6',
    '4|4|4': 'col-4|col-4|col-4',
    '3|3|3|3': 'col-3|col-3|col-3|col-3',
    '2|2|2|2|2|2': 'col-2|col-2|col-2|col-2|col-2|col-2',
    '3|6|3': 'col-3|col-6|col-3',
    '2|8|2': 'col-2|col-8|col-2',
    '5|7': 'col-5|col-7',
    '7|5': 'col-7|col-5',
    '4|8': 'col-4|col-8',
    '8|4': 'col-8|col-4',
    '3|9': 'col-3|col-9',
    '9|3': 'col-9|col-3',
    '2|10': 'col-2|col-10',
    '10|2': 'col-10|col-2',
    '12': 'col-12'
}

For example, the 'col-6|col-6' pattern creates grid with two columns like this::

<div class="col-6"></div>
<div class="col-6"></div>

See examples of grid settings for different frameworks:

• Bootstrap Grid
• Bulma Grid
• UIkit Content

columns

Type: Number

Default: 12

This setting helps to calculate the column patterns in grid popup.

If you don't have 12 columns in your grid, make sure you change this in the setting.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        columns: 16
    }
});

overlay

Type: Boolean

Default: true

This setting turns on and off the display of guides for the grid in the content. To disable, set false:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        overlay: false
    }
});

gutter

Type: String

Default: 1.25rem

This option sets the gutter value between the columns in the grid. The gutter setting is only relevant if overlay is enabled for the grid in visual mode.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        gutter: '30px'
    }
});

And here's an example when there's no gutter between the grid rows.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        gutter: '1px'
    }
});

offset

Type: Object

Default: object

Some CSS frameworks use negative margins to build the grid row. To make up for this, specify positive margins in the setting. This setting is only relevant if overlay is enabled for the grid in visual mode.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    grid: {
        offset: {
            left: '15px',
            right: '15px'
        }
    }
});

See examples of grid settings for different frameworks:

• Bootstrap Grid
• Bulma Grid
• UIkit Content