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)
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.