Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Idea Proposal: Responsive grid-based inline editing experience

edited December 2014 in Future

I just pushed a new branch to Github with the start of an idea for a responsive grid-based inline page editing experience for Elefant.

To try it out, grab the branch from Github via:

git clone -b grid_based_page_editing

Inline editing and composing pages to a grid on the fly are both things I've been trying to find more time to tackle for a while now. There's no editing capability implemented yet, but the rendering works and auto-converts existing pages.

Here's a rough mockup of the concept:

Elefant CMS - New responsive grid-based inline editing experience

I've also made a sort of "to do" list left to create the editing experience, which explains a lot of what you see in the mockup.

  • Click to edit logo via {! filemanager/photo !}
  • Update site name under Administration > Site Settings
  • Update navigation under Administration > Navigation
  • Click to edit page title via {! admin/util/editable !}
  • Click to edit any cell (inline wysiwyg editor)

    Note to self: Upgrade to Redactor 10 already!

  • Add row slides down under last row and adjusts scroll position

  • Choose columns, style*, and background image for the row, which live updates the CSS
  • Click the icons in new cells to create common types of content (wysiwyg text box, photo, video, dynamic objects). Each creates an HTML string with an embed code for that cell.
  • Image, video and dynamic objects icons open standard Elefant dialogs (e.g., filemanager/util/browser, and admin/util/dynamicobjects)
  • Deleting a cell collapses the others into the next logical size (e.g., 33,33,33 becomes 50,50, etc.)
  • Edit Page becomes Edit Properties, which no longer needs the wysiwyg editor for the page body.
  • Styles are read from theme's elefant.json via admin\Layout::styles()
  • Backgroud image will display with background-size: cover and using the pre-defined styles you can enable admins to customize their pages on a row-by-row basis in a way that designers can maintain some quality control over.
  • Grid sizes to support:
    • 100
    • 50,50
    • 66,33
    • 33,66
    • 75,25
    • 25,75
    • 80,20
    • 20,80
    • 33,33,33
    • 25,50,25
    • 20,60,20
    • 25,25,25,25
    • 20,20,20,20,20

I'm looking for feedback on the idea as well as anyone interested in helping create this!

Click here to join the discussion.


  • I think it looks pretty cool and I'd be glad to help create it as time permits.

Sign In or Register to comment.