The 3.0 UI: A better framework for your ideas

Posted by Ingo Schommer on 23 November 2011

SilverStripe has always regarded the CMS as a natural extension of its framework, enabling developers to tailor it to the needs of website authors. You can add form fields, customise the behaviour of the WYSIWYG editor, add custom icons for the page tree, as well as create completely new sections via the ModelAdmin class. On the other hand, deeper interface customisations were hard to achieve due to the complexity of the code behind it. The 3.0 release provides us with a rare opportunity to consolidate and simplify here. 

The CMS is built using most of the tools and techniques SilverStripe developers are already familiar with when creating websites with the framework; object-oriented controllers and utility classes like CMSMenu, templates which inherit based on PHP classes, and the Form/FormField APIs. This symmetry is important to us, and the reason we decided against using full-fledged JavaScript frameworks which would define all of this on the client. Instead we’re relying on a base set of common tools such as jQuery and jQuery UI, coupled with the principles of ‘progressive enhancement’.

Behind the scenes, we’ve rewritten pretty much all JavaScript powering the CMS, in a library called jQuery.entwine. This rewrite allows us to structure larger applications like the CMS in a meaningful way, by using an inheritance structure based on CSS selectors, and exposing functionality via methods on the DOM elements. As an example, you could “subclass” the JavaScript responsible for rendering the CMS menu items, and get it to show a badge of unpublished pages automatically. And as we’re increasingly relying on custom JavaScript events, you could keep the badge updated on a form submission event. 

Overall, we’re using fewer external JavaScript libraries and try to select them based on the principles guiding jQuery UI. The new layout engine (jLayout) is a good example of this; panels and their alignments are defined through CSS classes and HTML5 data attributes, rather than explicit JavaScript calls. This makes it easier to add new panels simply by overloading a SilverStripe template. We demonstrate this in a short howto on creating a “bookmarks toolbar” in the CMS, allowing quick access to the CMS views of often edited pages. 

The CMS style-sheets were also written from scratch, with a keen eye on limiting scope and creating isolated styling components and a consistent naming structure. In version 2.4 of the CMS it can be difficult to overload styles in a way that doesn’t have side effects, for example, changing the form label alignment to allow for more editing space. Thanks to the power of CSS3, there are fewer hacks necessary to achieve these effects. In addition to simply having fewer lines of style-sheet declarations, the SCSS language extensions to CSS3 helped us to organise it in a way fitting to the needs of a large web application.

As with the previous discussions about the 3.0 design, we’re also looking for feedback on the way we’ve put the UI together technically. Particularly if you’ve extended the CMS in any way before, either as a module or custom code, we’re interested to hear your thoughts on the new directions and possibilities over on the silverstripe-dev mailing list.

Post your comment

Note: Comments are moderated and won't show until they are approved

Comments

  • And because the SilverStripe platform is open source, you are not locked into a particular vendor.

    Posted by Kenston, 3 years ago

  • Yet another jewel from SilverStripe. Thank you guys, you rock! I'm checking it out as we speak.

    Posted by Kliff Gone, 3 years ago @rittagoneyahoose

  • I might give it a try for a custom code I have to deal with. Looks like a great way to work with!

    Posted by Miller Homes, 3 years ago

  • Hey Duncan, that particular line has already been drawn: https://groups.google.com/forum/#!topic/silverstripe-dev/PqKKHretB3k. In short: No IE6, basic operational in IE7.

    Posted by Ingo, 3 years ago @chillu

  • Really pleased you've gone the progressive enhancement route and are using jQuery.
    Looks like corporate clients still stuck on IE6 are not going to be doing much editing though with all the HTML5? Personally, I think you've got to draw a line in the sand somewhere and look to the future.

    Posted by Duncan Kendrick, 3 years ago @youngbreaks

RSS feed for comments on this page | RSS feed for all comments

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.