Changelog

Stay informed with any updates to the Base System

Discuss with Tom

Buttons - I think it may be unpopular to have so many unique button classes to manage. But too much work to update all our existing collections to use combo classes for managing buttons. Maybe we could create variables to manage all our buttons?

Typography - font-size variables for paragraphs? rename paragraphs to text-size?

Class naming - seems like alot of system differentiate global, custom and combo classes. i.e cc-secondary or is-secondary. Again I think we just had to accept that we wont be doing that

Variables - Element variables? Container variables?

DELETE ME

Containers are not controlled via variables, as we found that we rarely created custom container classes. If we need to add additional styles, we found it easier to add those styles to a new div block inside the container rather than style the container.

If you need additional sizes, you can easily extend the scale. For example: Container 2X Small.

Spacing in web development is a hotly debated topic, with different systems tackling it in unique ways. Some use margin wrappers, others rely on spacing blocks, combo-classes, or custom classes.

The Base System features an innovative approach to spacing, achieved through the use of the flex-gap and repeatable spacing classes. This approach provides a highly effective and intuitive way to control spacing within your designs, offering a level of familiarity for those accustomed to Figma’s Auto Layout system or Columns and Rows in Framer.

When working with combo classes, consider the specific needs of your layout and evaluate whether a custom class might provide a cleaner and more maintainable solution.

The Base System provides spacing utility classes called Columns and Rows. These classes use flex gap that wrap around the elements requiring spacing. For instance, if you want to space an H1 heading and a paragraph 16px apart, you can wrap both elements within a single <div-block> and apply the spacer class Column Regular. Columns and rows are essential tools for managing spacing in layouts without the need for excessive class creation. Whenever possible, apply spacing directly to the parent element to reduce the number of unnecessary div wrappers. Thanks to gap variables, you can apply consistent spacing to any element while retaining full control over the spacing values.

Why should we use flex gap

We believe the flex gap spacing method provides several key advantages over traditional approaches:

1. Minimal Classes

Flex gap allows you to control the spacing of multiple child elements without needing to add any additional classes, simply set a flex a single utility class applied to the parent. This minimizes the number of classes and wrappers needed to achieve your desired layouts, making your project cleaner and easier to manage.

2. Increased Reusability

You can rearrange and reuse elements across your project without needing to adjust their margins. This makes your designs more adaptable and efficient.

3. Familiarity with Figma

The flex gap method closely mirrors how spacing is handled in Figma, where designers use Frames and Auto Layout to apply gap spacing. In the Base System:

• Columns act as frames.

• Spacing is applied as a gap through the class name.

This intuitive approach makes it easier for designers familiar with Figma to transition seamlessly into Webflow.

4. Intuitive Structure

Flex gap promotes a clear hierarchy in your project by grouping related elements within parent containers. This not only simplifies understanding when viewing the layers panel but also helps ensure paired and related items are visually and structurally grouped together.

5. No Deep Combo Stacking

The flex gap method eliminates the need for deep or complex combo-classes. This makes it user-friendly for beginners while remaining flexible and efficient for advanced users.

We don't use the V Flex and H Flex elements, which have pre-applied flex settings that may cause issues if you want to change one of these element to no longer use flex. Although CSS grid is an optional layout for users, it can be considered overkill for one-dimensional (1D) layouts. Webflow grids also impact performance.

From our experience, columns are used more frequently than rows. Rows present additional challenges, especially at specific breakpoints where wrapping is necessary. Attempting to manage wrapping behavior using combo classes can increase complexity and lead to confusion. In such cases, it is often more efficient to create a new custom class. You can easily duplicate an existing class ("Ctrl + Alt + D") and adjust it to create a custom spacing class tailored to your needs, such as "Testimonial Column Small" or "Pricing Feature Row."

Instead of using margin wrappers on individual elements, or spacing blocks, you can apply a gap directly to the parent. This approach provides a highly effective and intuitive way to control spacing within your designs, offering a level of familiarity for those

Responsive Typography

Line height and letter spacing use responsive values that are relative to the current font size of the element. This allows you to easily change font size on different breakpoints without needing to also update line height or letter spacing.

Your websites body text may call for different font weights, colors, line heights and letter spacing etc. As with everything in the Base System, you are encouraged to customize these classes to suit your design needs.

Typically, designs will have body text that is a lighter color than the headings. Adding a text color as a combo class to every paragraph element can quickly become a burdensome experience. We often find it easier to set a font color on paragraph classes. This means your paragraph elements wont inherit any colors but you can add text color combo classes for those situations.