Page Builder Plugin Development

sdk

#1

So I’m starting a new project and invite anyone who wants to help out to join up. The concept is simple, building a drag and drop GUI editor for Bootstrap inside of Cloud9. I am starting with bootstrap, but then we can expand it out to include other popular frameworks as well (Foundation, skeleton, etc???).

My inspiration comes from Bootstrap Studio

The github link is here: https://github.com/shadowcodex/c9.ide.editor.drag-and-drop

You can join my slack team to chat at Join Slack.

I look forward to any help, and I’m going to move forward with this project and make a neat addition to the IDE.

Thanks!
Shannon Duncan


#2

Instead of just doing what everyone else is doing with drag and drop web page editors I am going to go a different route. I am going to build this as a page builder. That way you can rapidly create a bootstrap mock up.

You will be able to do things with bootstrap default components, or later new modules could be created that use bootstrap to do different stuff (Say items from bootsnipp?). So you could create a blurb module that uses an image, text, and such to create a complex object. You then could add that module into a slot.

Hierarchy goes as follows.

  • Content Section (Full width or fixed width) (orange)
    • Rows (blue)
      • Columns (white)
        • Object (purple)

Objects can be rows which then would start over on the hierarchy at rows.

Here is a mock up of the main editor screen:

Here is a mock up of the screen that would overly when you clicked the plus area for a column. It would allow you to pick the object that goes in the space. In the case of finer tweaking one can always just add a html content block.

Here is a mock up of the options screen for the Hero Unit. When you click on that object to create it or double click it in the page builder then it would bring up the overlay. Which allows you to edit the contents of the hero unit easily. One can make this options box do anything, and thus we can have different options setup for each object. (Carousel could have a list inside it which contained the properties for the images to use, etc…).

  • Title (Allows you to change what you see in the page builder so you can name your objects more specifically)
  • Custom Class (Allows you to add custom classes to your object so you can change their rendering via your own style sheet).

I’ll edit this post with more mock ups once I do them.


#3

Really didn’t investigate this enough to know if this would be useful but just saw this popup on Hacker News so thought I’d share it: Drag and Drop So Simple It Hurts.


#4

Oh yeah, that is an awesome plugin that I intend to use! And it doesn’t depend on jQuery which makes me like it even more!


#5

There is also this InteractJS


#6

Just want to keep feeding resources here: https://github.com/artf/grapesjs


#7

Just initial look during super bowl game, looks awesome!