This example shows how to set up Bulma Grid for Article. See more about the grid setting.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- content custom block -->
<script src="/your-article-dist-path/blocks/block.content.js"></script>
<!-- content plugin js -->
<script src="/your-article-dist-path/plugins/bulma-content/bulma-content.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
plugins: ['bulma-content'],
css: ['/your-article-dist-path/article/arx-frame.min.css'],
custom: {
css: ['/path-to-bulma/bulma.min.css']
},
grid: {
classname: 'columns',
columns: 12,
offset: {
left: '0.75rem',
right: '0.75rem'
},
gutter: '1.5rem',
patterns: {
'12': 'column is-12',
'6|6': 'column is-6|column is-6',
'4|4|4': 'column is-4|column is-4|column is-4',
'3|3|3|3': 'column is-3|column is-3|column is-3|column is-3',
'2|2|2|2|2|2': 'column is-2|column is-2|column is-2|column is-2|column is-2|column is-2'
}
}
});
</script>
</body>
</html>