Client-First V2.1
This Vote Request is initiated by Finsweet and Relume proposes a package of updates to improve the current version.
Proposed updates:
Enhance the project Style Guide with variables
Add color variables to the Client-First Official Cloneable.
We decided to not release size variables because there is no breakpoint feature on the variables panel.
When Webflow releases breakpoints, we will revisit the variables panel. For now, we're starting with the clear benefit of variables—Colors.
Use semantic variables to give more context to developers.
Organized role-based color groupings help you understand which color to use while building.
If you need to add a background color to a section, you can quickly find the project's background colors in the "Background Color" variables section.
Reduce nesting divs and element count
Add padding-section-[size] utility class on padding-global.
The community has asked for reduced nesting in Client-First. Developers want to use less layers of divs in their project. This solution removes 1 layer in each section, while maintaining the powerful Core Structure system.
When Webflow releases variable breakpoints, we will revisit this topic.
Suggestion to use grid/flex gap instead of spacing wrappers.
In this proposed update, we encourage the use of CSS grid and flex with gap to add space between elements.
This suggestion comes from user feedback—and an effort to reduce nesting and total elements on the page.
Optimize advanced utility classes
Remove .div-square::after CSS snippet from global styles.
This CSS snippet can be achieved using aspect-ratio. It is not needed anymore.
Update utility classes with new native style and rename to follow Webflow naming convention:
.pointer-events-off to pointer-events-none.pointer-events-on to pointer-events-auto
Add new utility classes for aspect-ratio:
aspect-ratio-square = 1:1
aspect-ratio-portrait = 2:3
aspect-ratio-landscape = 3:2
aspect-ratio-widescreen = 16:9
Add new inherit-color utility classes to inherit styles from parent element.
Adding this utility class to a section, for example, will allow nested headings, paragraphs, and texts to inherit the color of the section.
Results: December 21, 2023
The vote option "YES" for releasing the new Client-First v2.1 version 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.