Symphony 2.3 Markup Transition

markup.md

Markup and You

Symphony 2.3 features a significantly improved UI over it's predecessors due to the hard work of the UX Working Group and contributions by other dedicated members of the Symphony community. In making these changes, there's been a number of minor updates to the HTML, CSS and JS throughout the backend. The purpose of this guide is to help document some of these new features, and outline differences that extension developers can implement while updating their extension for 2.3. Eventually a dedicated style guide for Symphony will be available, but this will fill the void for the meantime.

HTML

• Is this the latest markup for the header?

• Something about Navigation

• Something about Breadcrumbs

Apply

In the past adding a With Selected select box to the bottom of your page was done by using the Widget::Select and Widget::Input functions. This is no longer required with the new Widget::Apply function that takes a single parameter, an array of options.

CSS

• Symphony now utilises @media-queries to provide an optimised layout for content editors when the screen size dips below 700px.

• Something about the .tabs styling/structure expected

Columns

Columns need a wrapping element (.columns) and multiple columns (.column). Additionally, the wrapper has to declare how many columns it should display per row. Symphony knows the following classes:

• .two
• .three
• .four

Example:

<fieldset class="two columns">
    <label class="column">…</label>
    <label class="column">…</label>
</fieldset>

The two column mode knows a special setup known from the publish area: a primary and a secondary column.

Example:

<fieldset class="two columns">
    <label class="primary column">…</label>
    <label class="secondary column">…</label>
</fieldset>

The old classes .group and .compact have been deprecated, see symphony.legacy.css.

JS

• The Duplicator plugin
• Something about the new Drawer plugin
• Something about the new Notify plugin

Regarding tabs: Symphony doesn't provide any functionality to add the needed markup to a backend page. This is up to the developer so we should also point that out in the HTML area. I think @nickdunn made the latest changes to the tabs styles and he is the only one who has already implemented the new styles in his extensions (as far as I know) – so I'd leave documenting to him.

My hopefully last comment for now – in the CSS section we should add information about:

• .frame (this class is now used through out the system to provide a consistent layout of boxes, login forms, Duplicators)
• unified button styling
• symphony.legacy.css – a file gathering all style definitions that will be removed in a future Symphony version

I guess writing this up will be my job.

I updated the documentation of the Documenter to provide information about the two different APIs we added recently (applying the plugin to .frame or ol).

Symphony doesn't make use of the new API itself – question is if we change this for RC 1 or if we leave the change for 2.3.1. I'm not sure personally: we might want to move the id for the field editor and for the Data Source filters from the list to the frame element – which would be some kind of a markup change. Thoughts.