Home

Awesome

GrapesJS Blocks Flexbox

This plugin adds the Flexbox block which allows creating easily flexible and responsive columns

Demo

Summary

Options

OptionDescriptionDefault
stylePrefixClasses prefix''
flexboxBlockUse this to extend the default flexbox block{}
labelRowRow labelRow
labelColumnColumn labelColumn

Download

Usage

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-blocks-flexbox.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-blocks-flexbox'],
      pluginsOpts: {
        'grapesjs-blocks-flexbox': {
          // options
        }
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/GrapesJS/blocks-flexbox.git
$ cd blocks-flexbox

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause