Client-first spacing
Make intelligent spacing decisions inside your project with Client-first
Use global spacing classes to create less custom classes and move faster.
Apply spacing to custom classes when it helps you better manage the element.
Global and custom example
This paragraph is inside of a global margin-top class because we don't want to create a custom class specifically for this spacing. It's text, it doesn't have a custom class. We don't want to create a custom class for this.
The home-stats_image-row and home-stats_bottom-row have top-margin applied directly on the class. Although it can use global spacing, it's not. We already have a custom class on the image row and we would prefer not to nest it inside another div, as this would create more layers inside navigator. We already require the custom class and we have decided to use it here.
Decisions should be based on your project.
There are no hard rules.
We can also use spacing wrappers around custom classes to create margins and paddings.
Above we have home-stats_image-row with spacing applied directly to the custom class. We can nest this element inside a spacing wrapper if we want to. This should depend on your project, the element itself, how it should behave on mobile, and ease of use in Navigator/Designer.
Below we have nested both custom elements inside spacing wrappers! Benefits of doing this:
- It will receive the default spacing adjustments for tablet and mobile. More spacing values on custom classes = possibly more spacing adjustments at responsive levels. Using a spacing wrapper will automatically make this element adjust the the default spacing across breakpoints.
- If you want to globally manage spacing, and make global updates to spacing values across the project, using more spacing wrappers can be beneficial. For example, if a client says "I want less spacing between all of the sections" - this update can be made much quicker by using global spacing wrappers.
- If you plan to reuse this component throughout the build, you have a decision to make: Do I want all of these components to have the same margin top, globally controlled on the custom class? Or do I want the ability to adjust the margin-top by section by using spacing globals?
The idea of this example and Client-first as a system: Make decisions based on what's best for you, your project, your client, and the next person that uses Designer.
The stats numbers above use CSS grid to create space
The stats_number-wrapper is using CSS grid to create spacing between the number, color boxes, and text copy. Using CSS grid will allow us to make changes to all inner elements, to all stats number boxes, with one style change.
The stats numbers above use global spacing wrappers to create space
Having global spacing wrappers to separate the elements will make it very time consuming to make a single change to all elements. If each element is wrapped in a spacing wrapper, we will have to update each spacing wrapper one-by-one to make a change to the stats numbers.
Why we should use Client-first
Component margin
It is up to you whether you want to have top margin set on the layout9_component or to place the component inside a global spacing wrapper.
Paragraph margin
We have margin-top spacing wrappers around these paragraphs because we don't have to create a custom class specifically for this.
Icon margin
The layout9_icon-wrapper custom class has bottom margin set because it makes it easy to edit all instances at the same time.
Item padding
The layout9_item has padding set instead of adding a div block with a global padding class, because we have a custom class there and it is easy to edit on all instances.
This is
Description about this below.
not recommended
Description about this below.
for inner
Description about this below.
item padding
Description about this below.
Avoid using global padding to create size for inner elements.
Above we have a an implementation of layout9_item that we do not recommend! This implementation uses global padding classes to create the padding around the item content. It looks great, and works in terms of CSS, but this becomes very difficult to edit. As with our stats numbers above, we would have to update each element individually to adjust its inner padding.
We do recommend using global paddings to create paddings for sections and between components. We usually do not want to use them inside components.
Content global spacing
Inside this parent div, we we are using global margin classes because we don't want to create custom classes for each of these. We have full flexibility to make changes using this method. Generally speaking, it's a good idea to use spacing wrappers to space text from text!
Below we have our testimonials3_client-wrapper class that holds the author's name. It has top margin applied to the custom class so we can easily change on multiple instances throughout the project.
Below we have our testimonials3_client-wrapper class that holds the author's name. It has top margin applied to the custom class so we can easily change on multiple instances throughout the project.
The left column is using custom margins on the testimonial1_icon-wrapper and on the testimonial1_logo-wrapper. Allows you to update multiple instance with one style change.
The left column is using custom margins on the testimonial1_icon-wrapper and on the testimonial1_logo-wrapper. Allows you to update multiple instance with one style change.
The spacing on the logo and quote icon in this column is created with global spacing wrappers. Changing multiple instances at the same time is not possible.
The spacing on the logo and quote icon in this column is created with global spacing wrappers. Changing multiple instances at the same time is not possible.
A flexible, globally updated pricing table.
For vertical spacing between pricing plan features we set custom vertical paddings on the pricing2_feature. This can be done with margin as well!
Pricing table changes are common. More features, more items, different styles, adjustments. With a unique custom class created specifically for these pricing table items, it will be very easy to make a change to all rows of the pricing table.
We don't always need custom classes like the pricing table example.
text-style-link is a global class that we want to keep global. If this style changes, we want it to change everywhere on our site. This is not unique like the pricing table feature items.
Setting custom margin on this class would change every single element in the whole project using the same class. We don't want this.
Applying a spacing wrapper parent to each link would make it very time consuming to udpate all links within the faq list. We also don't want this.
Our solution here is to use CSS grid to space them. Applying our element separation through the faq3_link-list parent wrapper will give us the ability to make our global faq changes, while maintaining full global styles of our important text-style-link.