Content wrappers
Content wrappers are wrapping elements that contain content that needs to be styled in a specific way. This is done to avoid a heavy reliance on utility classes when the nature of the content tends to be dynamic, relies on handling in a way conflict with base styles such as font sizes, margins, padding, etc..
Content wrappers break a little bit with our application of BEM syntax in that block class is not needed in the element’s class list. We just want to indicate that the element is a content wrapper and the type of content wrapper.
When to use
- You need strict styling on base elements that differ from certain base styles, such as margins and padding
- Applying design system utilities is difficult to implement, or not realist because the content is dynamic
- If the alternative would be creating parallel or single-use components that do not align with the system at large
- There is a strong rationale. This should be communicated here in the documentation for any content wrapper that is created.
When to consider something else
- If you are simply making visual changes to components in the design system if they can be reused in other contexts. Consider creating variants of those components with modifier classes.
- You are wrapping only a small number of elements. Consider creating a component.
- Using design system utilities is easier to do
- There is no strong rationale.
Types of content wrappers
Content wrapper for forms
The forms in Certify tend to be complex because of the nearly unlimited combination of how form fields and text can be organized and nested. The base styles, which are derived from a legacy codebase do not permit a clear hierarchy or elegant presentation of content within a form.
One of the key shifts in visual presentation appears on radio buttons and checkboxes, in that they provide a much clearer affordances than the base elements.
<div class="sba-l-content-wrapper--form">
<!-- Content here -->
</div>