This sample uses Calcite to create an application layout suitable for a configuration workflow or authoring experience. Many applications have workflows that require users to focus on creating or editing content, and configuration or authoring experiences are a common example of this.
Using layout components such as Shell, Panel, and Action Bar, offer an interactive configuration experience, which enables users to preview their work while accessing necessary controls and information.
Layout considerations
Configuration experiences require the content or canvas to be the focal point of the application. In this application, you can nest and style a Shell within the main content slot of a parent Shell, which serves as a preview of the work the user is editing.
Application behavior
In this sample application, the user can add content using Actions. There are controls for adjusting the inset Shell's width, allowing a user to preview their content at different sizes. Additionally, the user can perform various actions, such as undo, redo, save, and publish.
The Shell Panel slotted in the main Shell's "panel-start" slot contains a configuration Panel and an associated set of Actions.
Responsive behavior
Responsive behaviors are built into many Calcite components. In this application scenario, the "Add Content" Action Bar will overflow automatically as the container runs out of room. At smaller container sizes, these Actions are appended to an Action Menu automatically. In this sample, at the point where the viewport preview Actions are removed, the Action Bar will adjust to show more icons before collapsing again as the viewport shrinks.
This is a configurable behavior — it is not always desired to have Actions overflow — for example, to ensure critical or primary actions remain visible. In this application, the "Undo / Redo / Save" Action Bar has overflow set to true to ensure these critical actions remain visible at all screen sizes.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes. This often involves moving content to different slots, changing component properties, or even hiding content altogether. In this sample, we use a combination of CSS and JavaScript adjustments to component properties to create an adaptive experience:
-
In Shell Panel, you can set the
displaytoMode "overlay"at smaller sizes to ensure the Panel remains usable and doesn't always take up space. Users can toggle the Shell Panel using associated Actions. You can also adjust theexpandandDisabled collapsedproperties of this Shell Panel as the viewport changes. -
In the Navigation Logo, the
descriptionproperty is removed, and in the Navigation User, thefullis removed to save space on smaller screens.Name -
Because there is no need to see certain preview Actions at smaller screen sizes, we programmatically hide these preview width Actions as the screen size decreases. Finally, at the smallest screen sizes, we hide the preview size selector altogether, as there is no need for it at that viewport size.
-
Primary and critical Actions such as "Undo", "Redo", and "Save" remain visible at all screen sizes to ensure users can always access these important controls.
-
To provide enough room for those controls, the
primaryproperty of the "Publish" Split Button is removed. Supplementary actions were slotted into the Split Button at all screen sizes, so no change is needed.Text
While it is generally a good practice to keep controls available to the user at all screen sizes — by adaptively relocating them or relying on built-in response behaviors — in some cases some content is not crucial enough to keep in view. For instance, use CSS to hide a Chip showing superfluous information about the viewport size.
Implementation details
This sample relies on CSS and JavaScript to create an adaptive experience. Using JavaScript, viewport width can be monitored in order to make adjustments to component properties, move content, and set conditional styles. CSS is used to hide and show elements and to adjust the styling of components based on classes assigned with JavaScript.