New spacer utility classes
This Vote Request is initiated by Finsweet and proposes an additional folder of Client-First utility classes called spacer- classes
Vote details
Important to know:
No utility classes in Client-First will be removed.
No past processes will change. All existing workflows are still Client-First approved if this update is accepted.
This new set of utility classes is simply a new way to apply spacing to your project. There are many spacing organization use cases throughout each project. This new set of classes gives developers an additional set of tools to manage spacing.
Challenge we’ve heard from the community
People love the new “spacing blocks” concept launched in Client-First V2. However, it is time-consuming to apply two classes to a Div Block each time we want to add utility spacing to an element.
Proposed update
Create a new family of spacer- utility classes to use as “spacing blocks” in Client-First. Use one utility class to create a spacing block.
This Vote Request proposes to add these utility classes to Client-First:
spacer-tiny - 0.125rem
spacer-xxsmall - 0.25rem
spacer-xsmall - 0.5rem
spacer-small - 1rem
spacer-medium - 2rem
spacer-large - 3rem
spacer-xlarge - 4rem
spacer-xxlarge 5rem
spacer-huge 6rem
spacer-xhuge 8rem
spacer-xxhuge 12rem
Each spacer- class will have the following CSS properties:
width: 100%
padding-top: [size]
Supporting content
Examples
This Vote Request includes documentation about usage and implementation. The examples below show how spacer- classes and "spacer" concepts can be used and expanded upon inside your project.
spacer- tablet and mobile flexibility
Use is- combo classes to make customizations to base breakpoint utility spacing.
If an element needs spacer-large, but a small breakpoint needs a unique spacing size, we can add a combo class to the spacer- class to customize lower breakpoint spacing. For example, if we need smaller space on mobile only, we can use spacer-large is-mobile-small.
If the responsive customization is focused on a specific element, we can be more specific with our combo class naming, such as spacer-large is-home-tabs. The use of the combo class allows us to maintain global utility spacing across desktop and then make instance-specific customizations for smaller breakpoints.
Create a custom class folder of spacers
The term "spacer" can be used as a utility class (spacer-) as mentioned above — or as a custom class (spacer_) for global spacing. If there is a recurring element where spacing should be managed globally, use spacer_[element] to manage that custom element spacing. This new spacer_ folder is useful for organization of all custom element-specific spacing that should be kept global.
spacer_header
spacer_sticky-nav
spacer_title-primary
spacer_title-subtitle
spacer_footers
Results: April 21, 2023
The vote option "YES" for adding spacer classes was decided through unanimous decision.
Finsweet
Relume
Finsweet Community
Relume Community
Client-First Docs Translators
Twitter (Public)
How to vote for the next one
When a Vote Request is initiated, Company Members that manage community votes must collect votes through "emoji voting" inside their community channel.
Transparent voting results. Voting results are always accessible for all Board of Directors Members. No Board Member voting results can be made private. A third-party application, Airtable, is used to display all votes from Board Members. This Airtable database will be publicly accessible. Finsweet manages Airtable form creation, management, and account subscription of the account.
Community voting. When a Vote Request is initiated, Company Members that manage community votes must collect votes through "emoji voting" inside their community channel. For example, Finsweet will post in the Finsweet Community Slack about the Vote Request, and prompt their community members to use an emoji on the message to submit their vote. This process will help prevent a user from submitting multiple votes. After (1) week, the option with the most emojis represents the community vote. Twitter (Public) community vote is handled through Twitter Polls.
Learn more about Client-First Board of Directors.