Pro 5, X 9, Cornerstone 6 - Responsive Styling

Beta
#1

Hi beta testers! We’re in the final stages of the Responsive Styling update. You’ll finally be able to change styling values at different breakpoints! This is one of the biggest backend refactors we’ve done to date. I must stress that we do not recommend using this beta version in production (see breaking changes and known issues sections below) as there is still work to be done before it is considered fully stable. I know there are some people (you know who you are) who don’t mind the risk, but I would advise extra caution with this beta until we close the known issues. There’s still some work to be done, but we didn’t want to wait any longer before letting you jump in to play around with the new mechanics.

Status

  • 8/18 - The official release is live! Read the Release Notes. Should you discover any new issues, we welcome you to continue sharing feedback here in the beta forum. We will however be prioritizing support tickets, so please use that channel if anything is urgent.
  • 8/17 - Release Candidate 3 now available. We anticipate this will be the final release candidate, with the official release going to manual updates within the next 24hrs.
  • 8/16 - Release Candidate 2 now available.
  • 8/13 - Release Candidate 1 now available.
  • 8/6 - Beta 3 now available.
  • 7/30 - Beta 2 now available. Some notes have also been added/updated below.
  • 7/28 - Progress report updated
  • 7/7 - Progress report
  • 6/25 - Beta 1 now available.

New Features

Read the Release Notes for a detailed tour of the new features. It’s a work in progress and will change before the official release but it will help get you up to speed in the meantime. Here are some of the highlights:

  • Clicking one of the device icons in the bar will activate responsive styling. Changes made to styling controls in this mode will only effect the current breakpoint.
  • The preview can be resized and scaled. When responsive styling is active, it will lock you to the range of the selected breakpoint.
  • Due to the UI mechanics of indicating and managing values that changed at different breakpoints, we needed to remap Inspector controls to ensure everything has a label. You’ll find less controls compactly placed side-by-side.
  • Using dynamic content in styling controls is still a planned feature for this release but it is not fully wired up for this beta release.
  • Under the hood, the entire generated CSS system has been rebuilt from the ground up.

Breaking Changes

There are a few potential breaking changes that only effect using custom CSS or element CSS.

  • Element CSS - Previously the unique class for an Element was added to many different sub DOM elements. We’ve changed this to only output on the root DOM node of each element. You may need to add additional selectors to your Element CSS to target nested elements.
  • In many places our generated element CSS no longer includes qualifying selectors. For example a selector like.e1-2.x-something might be reduced to .e1-a. This means you won’t have to fight uphill against the base styles as much when making changes.
  • CSS Load Order - Prior to this version, there wasn’t a consistent order that all styles loaded in. This made it difficult at times to target elements and often additional selectors were needed when they otherwise shouldn’t have been. We now have an official load order that will be enforced by Cornerstone. All generated CSS is output first, then all Custom CSS comes after that. Element CSS is considered part of the “Generated CSS” but is always added at the end. Having a consistent order will let us avoid unintentional breaking changes down the road when we do the Theme Options update. Here’s an example of the load order with numeric priorities:
    • Generated CSS
      • Global / Theme Options 0
      • Layout 10
      • Header 20
      • Footer 30
      • Page 40
      • Global Blocks 50
    • Custom CSS
      • Global Custom CSS
      • Layout 70
      • Header 80
      • Footer 90
      • Page 100
      • Global Blocks 110

If you run into other styling inconsistencies not related to these changes, please let us know as they are possibly regressions we will need to address.

Still in development

  • Background Layers, Box Shadows, and Text shadows can not be changed responsively at this time. We’re going to be ripping out the existing implementations in the next update to allow adding as many background layers as you like, and also multiple shadows which is supported by CSS but not our control system. If we made these values support responsive styling now, those breakpoint values could potentially be lost when the new version with layers is added.
  • Dynamic Content is not enabled for styling controls. Once this is finished we will release it in another beta of this cycle. Beta 2 Update: Dynamic Content has been added for color and unit picker controls. You will have to manually enter (or copy/paste) dynamic content directives. We won’t be adding the UI this cycle as it is going to be reworked to allow access to a new global variable system coming with the Theme Options reboot.
  • Yes, it will be possible to change the breakpoint values, but not until the Theme Options reboot. The new generated CSS backend has been designed to allow changing those values, but it isn’t compatible with the current stacks (Integrity, Icon, Renew, Ethos) since there are many hardcoded media query styles.

Reporting Issues

  • Please let us know of any bugs, regressions, or even just things that don’t feel quite right to you.
  • To make a report, open a new topic here in the beta forum.
  • Related items or a collection of feedback on the same subject can be combined into a single topic.

Thank-you in advance for helping us with this most important testing phase!

10 Likes
#6