Documentation
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:
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:
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:
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: