A Prototype

Hey everyone,

The past week has seen a huge amount of progress—there is now a working prototype. Beau and I have settled on the name Elastic, and things are moving forward at a steady pace.

Elastic is separated into two major components: the editor, and the framework. If you decide to download the prototype, the rest of this post should help you see the context behind what you’re using.

The Editor:

The editor is currently the more mature of the two pieces. At this point, its purpose is to allow you to rapidly lay out the structure of your theme.

Key: (implemented/not implemented).

  • Grid-based: The editor currently runs on a customized grid system based off of the Blueprint CSS framework. Grids are fixed-width only, but I plan on allowing fluid and potentially grid-less layouts in the future.
  • Types of Elements: Choose which elements will be your sidebar, content, etc. Currently, types are indicated by background color: header (dark blue), sidebar (gray), content (light blue), footer (dark gray). Eventually, headers and footers will be limited to one per page.
  • Not-quite WYSIWYG: The editor is not-quite WYSIWYG. Since content in WordPress can have an arbitrary height, the layout you draw is optimized to stretch vertically. Elements are grouped into columns wherever possible to prevent an extra-tall element from disrupting your layout. The one downside to this is that sometimes you want to group elements that are next to each other. At this point, there is no way to manually group elements. However, Beau and I have recently decided to tweak the grouping algorithm, so this should become much less of an issue in future releases.
  • Saving/loading themes: Currently, the editor will only modify and load themes in the “/themes/elastic/” directory. Users will eventually be able to save new themes and load any Elastic-editor based theme.
  • Named sidebars: At this point, the editor does not support user-named sidebars, and will name your sidebars for you. This is somewhat frustrating, but will be improved in the near future.
  • Whitespace between elements: Currently, the editor does not render whitespace between elements properly. In the future, users will be able to place elements in the layout with gaps between them and have those gaps preserved in the final layout.
  • The UI: It’s a work in progress. I’ll soon be removing all of the jQuery UI dialog boxes in favor of a more flexible system that requires fewer clicks. Element types and names will become much clearer. The core functions—dragging, resizing, and adding elements—will likely remain the same. However, I do plan on letting the user resize an element on the same click that it is added to the canvas.

The Framework:

The framework is still taking its baby steps. It is currently very basic, and only renders index.php. It’s heavily inspired by Thematic, Sandbox, and Carrington, but will hopefully be its own animal. The framework is being designed to be used with or without the editor—it will hopefully be useful as a standalone product.

  • Object Oriented: Since the editor requires a framework that can create elements in any configuration, I’m taking an object oriented approach to building the framework. The object based layout is defined in layout.php, which is currently not very reader friendly. Don’t get too comfy with the OO classes though—I’m in the process of rewriting the classes to provide tighter integration with javascript and more legible generated files.
  • structure.css: This is output from the editor that defines the structure of the layout.
  • style.css: This is predominantly styles from Thematic (for the time being). When the time comes, everything will be properly enqueued and a bit cleaner.

If you have any questions or suggestions, let me know. Happy coding!

—Daryl