I’ve been recently working on creating an editor that should allow for the user to alter the layout of a theme. I’m working with the Blueprint CSS Framework and jQuery and am currently attempting to create an intuitive UI (and in this process some sort of page-structure standard).

Things I’m working on/problems I’m rolling around in my head:

  • Moving/Resizing columns within the editor: This is somewhat functional. I’ve created a few iterations on the concept, but the primary problem that I’ve run into is how to intuitively integrate width, padding, and margins in an environment where the user should not be required to know the HTML box-model. Mind you, I wasn’t planning on having each of the three independently integrated, but when using Blueprint, if you specify column spacing using padding (i.e. prepend/append) the column size will visually include that padding (if you use a background, for instance). In some instances, this may be desired. In others, users may prefer a transparent buffer between columns (i.e. margin). Finally, how do you know whether a user wants the buffer before the column or after the column (prepend/append)? I don’t want to give a user too many options, but if there is not a clear and clean implementation of margin, padding, and width, the flexibilty of the framework could suffer greatly.
  • User-customizable grids: Allow the user to specify the column count, column width, and gutter widths and generate a grid accordingly. Currently, this is functional within the editor. However, I will ultimately need to compile the CSS for the theme output, and that implementation will need to be slightly different.
  • Integrating all of this into theme structure: So now you’re wondering–what are you going to do with this editor? Currently I’m looking through the Sandbox code and documentation, and will (at the end of this first stage) hopefully have an output that resembles a customized Sandbox. More on that later.

Questions and comments are welcome!