Code Monkey home page Code Monkey logo

grapesjs-blocks-bootstrap4's Introduction

GrapesJS Bootstrap v4 Blocks Plugin

npm

Summary

  • Plugin name: grapesjs-blocks-bootstrap4
  • Components (see Options for list of Blocks)
    • Layout
      • container
      • row
      • column
      • column_break
      • media_object
      • media_body
    • Components
      • alert
      • badge
      • button
      • button_group
      • button_toolbar
      • card
      • card_container
      • collapse
      • dropdown
      • dropdown_menu
    • Typography
      • text
      • header
      • paragraph
    • Basic
      • image

Options

{
  blocks: {
    ...
  }
  blockCategories: {
    ...
  }
  labels: {
    ...
  }
  ...
}

Blocks

Option Description Default
default Rebuild default component with utility settings true
text Rebuild text component to re-inherit from default true
link Rebuild link component to re-inherit from default and give toggle setting true
image Rebuild image component to re-inherit from default true
container Container (fixed/fluid) true
row Row true
column Columns of all sizes true
column_break Column-break (div.w-100) true
media_object Media object true
alert true
badge true
button true
button_group true
button_toolbar true
card Card with settings for images, image overlay, header, body, & footer components true
card_container Layouts: group, deck, columns true
collapse Collapse component that can be toggled via link component true
dropdown Dropdown true
header H1-H6 true
paragraph P tag with "lead" setting true

Block Categories

These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false exclude entire groups of blocks (as well as the associated components).

Option Description Default
layout Container, row, col, col-break, media object true
components Bootstrap's Components--alert, button, card, etc. true
typography Text, header, paragraph, etc. true
basic Link, image, etc. true

Labels

Same keys as Blocks, but value is the label for the block.

Option Description Default
text 'Text'
header 'Header'

etc.

Other

Option Description Default
gridDevices Add devices based on BS grid breakpoints true
gridDevicesPanel Build a panel in the top-left corner with device buttons (use with editor showDevices=false) false

Download

  • NPM
    • npm i grapesjs-blocks-bootstrap4
  • GIT
    • git clone https://github.com/z1lk/grapesjs-blocks-bootstrap4.git

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-bootstrap4.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-blocks-bootstrap4'],
      pluginsOpts: {
        'grapesjs-blocks-bootstrap4': {
          blocks: {
            // ...
          },
          blockCategories: {
            // ...
          },
          labels: {
            // ...
          },
          // ...
        }
      },
      canvas: {
        styles: [
          'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'
        ],
        scripts: [
          'https://code.jquery.com/jquery-3.2.1.slim.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js',
          'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js'
        ],
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/z1lk/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause

grapesjs-blocks-bootstrap4's People

Contributors

artf avatar hoainam12k avatar z1lk avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.