Stable version 5.0 release details
- Row for columns - Layout element
- Column - Layout element
- Container - Layout element
- Slide Element - Interactive element
- Accordion tabs container - Interactive element
- Sidebar browser
This page is to detail the latest changes and updates regarding DX8 version 5.0 and to give you an overview of how this may affect your experience with the platform.
DX8 version 5.0 has moved to flex-box from float. This change allows you to take advantage of flex based styling.
Row for columns - Layout element
The Row for columns element has changed to have it's default CSS display property changed to flex. This change allows you to use all of the features of flex-box on your Row for columns element.
The Row for columns consists of two separate HTML div elements. The inner HTML div element has a default CSS display property of flex, and the outer HTML div element has a default CSS display property of block. Any styles that you add are applied the inner HTML div element.
The Markup tab adds styles to the outer div rather than the inner HTML div element, and this is so you can control the row from the highest level HTML div element.
The Styles tab is now available to the Row for columns layout element. Flex container properties are exposed by default when you open the Styles tab, this allows for quicker flex customization.
Column - Layout element
We have combined Basic and Advanced columns into one 'Column' element, and due to the nature of flex-box, it just has one HTML div element as there is no need for two.
The Column layout element becomes a flex item when added to a Row for columns. With this in mind, there are now more options in the column width settings that make use of the flex-box features.
Flex item properties show by default within the Styles tab, and this makes altering your flex item properties quicker with flex-box. By default, the width of every column is set to 'undefined,' meaning that the column fits the space that is available to it automatically.
Container - Layout element
We have combined Basic and Advanced containers into one 'Container' element, and due to the nature of flex-box, it just has one HTML div element as there is no need for two.
Slide Element - Interactive element
We have combined Basic and Advanced slides into one 'Slide' element, and due to the nature of flex-box, it just has one HTML div element as there is no need for two.
The sidebar browser used to use a three tab menu; however, this is now a vertically expanding menu that expands upon clicking the menu element. The sidebar browser now includes component content as an option.
Upgrading to DX8 version 5.0? Take a look at this guide here to upgrade.