Mura UI Markup Conventions
January 10, 2017
For the release of Mura 7, the admin interface was redesigned to be more intuitive, fluid and future-proof. This required some changes both major and minor to the way the admin pages are structured.
It also included an overhaul of Mura's admin form structure, and the addition of some extra functionality. For example, form input groupings have been greatly simplified, while the new responsive tables with built-in selection menus are an updated twist on a basic html table, with markup conventions varying somewhat from those in previous versions. In addition, Mura 7 introduces major enhancements to the browser-based workflow, most notably the robust "inline edit" mode which allows for content and components, in the form of display objects, to be placed visually on the page, with configurable options managed from a user-friendly side toolbar.
New Documentation Available
When extending the admin functionality through Mura plugins, or adding custom display objects to the inline editor, there are a few standards which must be followed. While it is possible to explore existing code in order to figure out the basics of these patterns, there are a few crucial details when working with each html object type which can make or break an attempt at customization.
To that end, Blue River has published an appendix to the Mura documentation, titled "Mura UI Markup Conventions". This in-depth online guide explores each of the common interface elements used in Plugin UI such as tabs, tables, forms, alerts and icons, along with some general information about page layout and the new responsive grid system used in the Mura 7 admin. Patterns for creating custom "display object configurators" are also covered, complete with working examples and links to additional references. (Display object code conventions were also outlined in a previous post on the Mura CMS blog.)
As with any documentation, details will be added as features are expanded or suggestions are made for improvement. The current published version of the new Mura UI Markup Conventions section includes basic examples of usage for each listed element, along with working code snippets to jump-start custom UI creation and maintain consistency with the overall theme and behavior of the Mura 7 admin area and inline editor.
Additional Documentation and Resources
To facilitate adoption and understanding of these new conventions and concepts, Blue River has published an on-demand webinar titled "Super Fast Application Development with Mura 7". This online class is presented as an introduction to new features, with a focus on demonstrating ease of use and overall development workflow concepts.
Another excellent reference can be found at https://github.com/stevewithington/cfsummit-2016 . Steve Withington's presentation at the 2016 Adobe ColdFusion Summit explains many of the new concepts in Mura 7, and provides useful tips and code examples as part of the downloadable pdf document.
For general Mura 7 information geared towards developers, designers, and content contributors, see the Mura CMS version 7 documentation at docs.getmura.com/v7 .