Digital Platform June 2016 Update

Version 16.06 of the UO web platform has the following changes.

Version Numbering Changes

Starting with this release (16.06), Cosmic, UOBanner, and the UO Edit Suite are moving to a monthly versioning system (using the YY.MM numbering similar to Ubuntu Linux). Previously each module had a seperate version number which could cause confusion regarding which version of each to use. From now on developers simply need to keep thier copies of these modules on a consistent version to guarantee expected behavior.

Feature Updates

UO Edit Suite 16.06 adds a new template system that adds many more templates and types of templates as well as more information about templates.

Cosmic 16.06 adds a new set of "hide" classes which can be used and combined together to hide certain content on certain screen sizes. (.hide--mobile, .hide--tablet, and .hide--desktop). These replace the old ".low-priority" class that was used previously.

Bug Fixes

Cosmic 16.06 fixes a lack of side padding on cta-buttons.

UO Edit Suite 16.06 fixes a bug that could cause the dynamic content dialog not to load when arguments weren't present in the dynamic content config.

Required Action by Users

Site Editors

Site editors should receive training on using the new Templates dialog. This new dialog offers use of all the old templates, alongside many powerful new templates. Old template code will cause the template to have a red background in the WYSIWYG editor, if you encounter this on your site, let your site admins know and they can run a tool that will fix this problem.

Site Administrators

To install the latest platform, Site admins should update thier makefile or site repo to use versions of Edit Suite, UOBanner, and Cosmic tagged with 7.x-16.06 in git. Site admins should make sure to run the Edit Suite Find Deprecated Code (and automatic replace) functionality (in the admin/config pages) on thier sites after upgrading to ensure that thier sites are using the latest CSS classes so that there will be no issues on thier sites when the deprecated code is removed in 6 months. Updating the deprecated code will also ensure that UO Edit Suite will continue to function as expected, as of version 16.06 onward will no longer function with the deprecated classnames.

Subtheme Developers

Subtheme developers will need to update thier subthemes to reference the new class names for any style overrides to those classes. They can update thier overrides to use the new class names based on the table below.

Deprecated Features and Code

Old Class Naming Schemes

Prior to this update many classes had a mix of naming schemes. These classes (including those used in UO Edit Suite and template packs) have been updated to a more consistent naming scheme based on the Block Element Modifier (BEM) naming methodology. These classes can be automatically updated in nodes by using the "Find Deprecated Code" feature in version 1.0 of UO Edit Suite. The same feature can also identify where these classes appear in any views or custom content, though they must be updated manually in those cases. The list of classes affected by this change and the new classes to use are as follows:

Old ClassNew Classes
.caption.captioned-photo__caption
.photo.captioned-photo__photo
.captioned-photo-noshade.captioned-photo .captioned-photo--noshade
.captioned-photo-bottom-gradient.captioned-photo .captioned-photo--bottom-gradient
.badge.card
.badge-block.card__block
.badge-label.card__label
.badge-photo.card__photo
.badge-photo-left.card__photo-left
.badge-photo-right.card__photo-right
.badge-title.card__title
.badge-subhead.card__subhead
.badge-teaser.card__teaser
.badge-links.card__links
.badge-list.card__list
.collapsable.collapse-menu
.collapsed.collapse-menu--collapsed
.grid-item.grid__item
.grid-1col.grid .grid--1col
.grid-2col.grid .grid--2col
.grid-3col.grid .grid--3col
.grid-4col.grid .grid--4col
.grid-5col.grid .grid--5col
.grid-2col-40-60.grid .grid--2col-40-60
.grid-2col-60-40.grid .grid--2col-60-40
.cta-button-white.cta-button .cta-button--white
.cta-button-dark.cta-button .cta-button--dark
.cta-button-light.cta-button .cta-button--light
.envelope-standard.envelope .envelope--standard
.envelope-narrow.envelope .envelope--narrow
.envelope-flush.envelope .envelope--flush
.envelope-parallax.envelope .envelope--parallax
.envelope-style-black.envelope .envelope--style-black
.feature-stretch.feature .feature--stretch
.feature-scale.feature .feature--scale
.feature-frame.feature__frame
.feature-background.feature__background
.feature-content.feature__content
.feature-tagline.feature__tagline
.feature-caption.feature__caption
.feature-content-left.feature__content-left
.feature-content-right.feature__content-right
.lead-story-landscape.lead-story-block-landscape
.lead-story-portrait.lead-story-block--portrait
.lead-story-caption.lead-story-block__caption
.lead-story-nophoto.lead-story-block--nophoto
.low-priority.hide--mobile