Beau did a demo of Elastic last night at the SF WordPress Meetup, and it was awesome. Daryl, very impressive. Looking forward to seeing the continued evolution of this project.
Tagged: Elastic Toggle Comment Threads | Keyboard Shortcuts
Hey everyone. The past week has seen quite a few improvements to both the framework and the editor. Both are now relatively stable and working together, which is pretty exciting. A big thanks to everyone who tuned in to the dev chat—it was great to talk to you guys and answer your questions.
elastic-0.0.2.1 can be downloaded here: http://code.google.com/p/elastictheme/downloads/list
For those of you that downloaded the editor during the dev chat, this should fix the issue in 0.0.2 where the UI wouldn’t load properly.
I’m going to try and pack in a bunch of new features/improvements before Monday, which is where you guys come in. Let me know what you’d like to see! I’d love to know what you feel would make Elastic most effective.
Here are some of the features I’m planning on adding. All of them probably won’t make it into the editor by Monday, but hopefully a few will. 🙂
[Editor] Typography: Let the user select fonts for the headers and body. This is in progress.
[Editor] Backgrounds: Let the user select background colors (for the body and modules). Background images will eventually be supported (with potential integration with the media uploader), but not by Monday.
[Editor] Fix Whitespace Rendering: Currently, the editor does not render whitespace between modules correctly. Whitespace will basically serve as the editor’s implementation of margins. This is not a simple addition, and will come with a slew of other improvements.
[Framework] Customized Headers: The headers in the framework are very sparse. This will improve by Monday.
[Framework] Better Defaults: Most of the framework’s default views (html and css) are derived from Ian Stewart’s Shape theme (Thematic’s leaner cousin). I’d like to have some more customized defaults, but now may not be the time.
It’s crunch time! Good luck everyone.
Hey all. This past week centered around developing and building a UI for the editor. The UI is focused on being consistent and extensible, so that when features are added they will pop in smoothly. Save and load are both up and running, so the editor (which is currently running with an older, stable version of the framework) can now be used from start to finish.
For the beginning of the week, I’m shifting gears to focus on the framework. The plan is to develop it until it is stable, and then bring the editor up to speed. From there on out, most of my work will be focused on cleaning and optimizing some of the editor core, and adding features to both the editor and the framework.
This week has seen some major progress: I’ve considerably extended the framework’s capabilities, and have completely overhauled the editor’s backend. Customized files are now formatted to be easily readable, and the backend has been separated into three main components: the plugin page, theme customization, and theme install/upgrade. The editor’s theme installer/upgrader is working properly, so installing both the editor and the framework is now unnecessary.
For the coming week, I’m going to focus on improving the editor’s UI / workflow, including integrating the save/load frontend. In addition, I’ll continue to expand the framework—I’ll be working on page defaults and adding missing features, such as context-sensitive headers and dynamic classes.
Fun stuff. Hope everyone’s projects are going well.
This week I began to rework the UI, and added support for named blocks. Beau and I mapped out the features/improvements I’ll add to the editor by the end of the SoC, and spoke at length about different approaches for creating the core of the framework. For the coming week, I’ll be focusing primarily on properly implementing save/load, and building out the framework core.
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 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 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.
- 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!
This week has seen a bunch of progress, a lot of bug squashing, and some brainstorming. The HTML output from the editor is functional, though a few bugs still exist. The editor is now a WP plugin, and I’ve started work on converting the HTML output to a theme, and saving that theme to the server. If all goes smoothly (and as I’m sure you all know, it always does…), I’ll have a very basic prototype (with theme output) for the coming week.
Sorry for the late update—I’ve been working nonstop for the past few days on ironing out a particularly nasty problem (which I’m happy to say is fixed). The basic UI for the editor is complete, and I’ve begun structuring the HTML output of the UI. When that’s done, I’m going to implement the editor as a plugin in the admin panel, and work on developing the output into a full WP theme. Hopefully I’ll have a demo of the editor up sometime soon (and maybe once people see it, they can help me think of a name!).
This week I’ve written the bulk of the UI for the editor. I’ve successfully added grid-based collision detection to the jQueryUI resizable module and am working out the kinks in the jQueryUI draggable module. Aside from that, I need to add a labeling function to the UI, and then a basic working version of the editor’s UI/output will be complete (though there’s always polishing to do, but that can wait—I’d drop the “premature optimization” saying here, but César seems to have that covered). This coming week I need to clean the editor up and implement it as a WP plugin, and then begin converting the output to a WP theme.
Sorry for the late update—I spent the majority of the day yesterday over the Atlantic, and am now back in the US. Over the past week I’ve somewhat solidified how I plan to translate a layout into an actual WP theme, and have worked on the UI and implementation of the live editor, which is currently in a semi-stable state. The coming week will involve putting all of this together and beginning to work on generating the editor’s output. Next week will hopefully bring a more substantial update (and less jetlag!).