Skip to content

Proposal : Improved Theming

peakpg edited this page Apr 29, 2011 · 2 revisions

Building a 'theme' involves multiple artifacts, including templates (pages and partials), images, stylesheets, javascripts.

As of v3.3, theming is split between two sets of users, editors and developers, and its not possible to entirely manage the theme via the UI.

  • Developers - Can store templates as VCS files or create/edit them via UI. Images, styles and js all have to be managed via the VCS.
  • Editors - Can edit templates via the UI (which they like being able to do quite a bit).

Problems

  • Creating templates/partials as VCS files is the quickest way to start a project locally, then push changes to staging/live servers. Creating a UI editable theme however requires: Creating a template in the UI, copying text in, saving then deleting the old file
  • No Versioning - Templates managed via the UI have no versions
  • Weak Editor - Templates managed via the UI have just a basic textarea to edit with.

Feature: Theme Structure/Creation

When a blank project is created, we should also create a 'theme' for that project, including the following directories:

  • app/themes/:name_of_project
  • app/themes/:name_of_project/templates
  • app/themes/:name_of_project/partials
  • public/themes/:name_of_project/styles
  • public/themes/:name_of_project/stylesheets
  • public/themes/:name_of_project/javascripts
  • public/themes/:name_of_project/images

We may have a configuration option to select the 'theme' for the site, which would allow for tags like 'image_tag', etc to automatically find content in the theme. Same for partials and templates.

Feature: Editable via UI

There should be a 'Design' tab in the CMS that allows editors to access a theme to make changes. This could be a single page that lists all assets in a single list, grouped by Type. For instance:

Templates
  [t] Home (erb)
  [t] Subpage (haml)
Partials
  [p] Header (liquid)
  [p] Footer (erb)
Styles
  [s] site.css
Javascripts
  [js] somecustom.js
Images
  [png] header.png

(Key [t] = Template icon, etc)

Editor (with proper permission) could click on any file to edit directly through the UI. We should consider embedding a tool like http://ace.ajax.org/ to improve the editor itself. All templates/assets/etc, will need to be versioned (Which they might be already???) for this to work. We might be able to have a single Model for all text based assets as well (Start from 'DynamicViews', with the following attributes:

  • Name
  • Type (Template, Partial, Stylesheet, etc)
  • Format (Html, css)
  • Handler (erb, haml)

Feature: UI Discovery of Themes

The CMS should be able to detect the presence of theme assets and should display them in the UI, even if they haven't been edited. Editors should be able to start modifying (after which time it should be stored in the database, and marked as a fork), or revert to the original version.

Feature: Editable via WebDAV

Starting with the "WebDAV":https://github.com/browsermedia/bcms_webdav module as a proof of concept, we should allow developers/staff to access the 'theme' directly, under a single folder called 'themes'. While rails splits app and public into two directories, this UI should merge them conceptually.

With a good FTP/WebDAV client, this would feel exactly like working directly on a server via FTP. Images can be uploaded in bulk, moved around, renamed, etc. All of which would be stored in the CMS as content.

References

"See also":https://browsermedia.lighthouseapp.com/projects/28481/tickets/7-create-a-stronger-theming-systemconventions-for-site-buildout

Clone this wiki locally