On this page there are examples of how a mixed approach can facilitate and streamline the development of a site.
The first 3 examples make a comparison between the prebuilt layout and the FFK counterpart.
The fourth example demonstrates how the CSU2 approach works.
For the demonstration, I preferred to use rem instead of px for an accessibility issue.
In the Default prebuilt version, the section is called Hero.
That's fine if you use it only once. If these settings are reused (as we will see later), it would be more useful to rename the section in a generic way.
Flex Container in the Default prebuilt version has these variables:
- Display: Flex
- Direction: Horizontal (which on mobile becomes Vertical)
- Align: Center.
If we wanted to change something, we would have to recreate another class, probably with the name "Flex Container 2".
In the long run this system becomes unsustainable.
In the FFK version we have no specific class.
We used 2 Utility classes and 1 Smart Utility, which allow us to have a clear understanding of how the element is configured.
Both the image and its container have two specially created classes.
If the property Width: 100% might also be fine, because maybe we know that all images will be 100%, the other two properties (Margin Right: 40px up to a Tablet, and Flex Child Order: First on Mobile) will surely not always be like that.
This method will lead us to create many variations of Hero Image Mask and Hero Image.
In the FFK version we have used only Utility and Smart Utility classes that we can reuse everywhere.
This hero is built with a flex layout, so the content will grow or shrink to fit the space available in its container.
To change this section’s background, select the “Hero Section,” then scroll to the background section of the Style panel and add a color, image, or gradient.
This hero is built with a flex layout, so the content will grow or shrink to fit the space available in its container.
To change this section’s background, select the “Hero Section,” then scroll to the background section of the Style panel and add a color, image, or gradient.
[Don't do it!]
The section is the same as before (Default prebuilt Layout), but it is duplicated.
In the FFK version it is the same.
In the Default prebuilt version, the container has only one property that changes on mobile portrait.
It is better to use, as in the FFK version, a Smart Utility (which we can rename in a general way to use it everywhere).
When creating grids there are some things to keep in mind.
You can have the (all-in-one) component style approach (used in the Default prebuilt layout), or a mixed approach (FFK).
If the element will be repeated frequently in the site (or does not yet have a final layout), it is better to use an all-in-one approach.
This could be an element that is repeated several times in the site.
It has several properties and none of them vary depending on the device.
In the Default prebuilt version, the image and its container have many different properties, so the approach used is correct.
The FFK approach consists of using only Utility classes (I put in the Utility classes list the class pt-full specifically) and creating a Symbol.
If you don't want to create a symbol, then it's better to opt for a class (2 in this case).
Use these cards when you want to display content with an image, such as a blog post or product. They’re built with CSS grid to enable the 3-column layout. When you select the “Cards Grid Container,” you’ll see a red icon on the top right. Click the icon to edit the number of columns, the column gap, and more!
The card images have fit set to cover, so they fill their masking container without stretching. Try making the “Cards Image Mask” a circle using border-radius or adjusting the size ratio using top padding. Don’t forget to set an alt description for each image, which will help with accessibility.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Use these cards when you want to display content with an image, such as a blog post or product. They’re built with CSS grid to enable the 3-column layout. When you select the “Cards Grid Container,” you’ll see a red icon on the top right. Click the icon to edit the number of columns, the column gap, and more!
The card images have fit set to cover, so they fill their masking container without stretching. Try making the “Cards Image Mask” a circle using border-radius or adjusting the size ratio using top padding. Don’t forget to set an alt description for each image, which will help with accessibility.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
The section is the same as before (Default prebuilt Hero), but duplicated (the difference is the number of classes created and their names).
The FFK version always uses the same one.
For both versions we use the corresponding previous solutions of the Hero section.
In the Default prebuilt version, some properties (Margin Right: 40px up to a Tablet) have been included in the specific class that could instead be reused elsewhere.
In the FFK version there are only reusable Utility and Smart Utility classes.
The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.
You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.
The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.
You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.
In this example, I want to show you the CSU2 approach (Class - Smart Utility - Utility).
This method allows you to use Classes, Smart Utility and Utility classes.
It combines 2 very popular methodologies in the world of CSS (Component CSS and Utility First CSS) and is perfect for Webflow.
In this example, you can see how with only 3 classes: c-example-btn-small , c-example-btn and c-example-btn-big we can get 9 different buttons (and there could be many more), thanks to the use of Utility and Smart Utility classes.
And if we need to, we can create a symbol component by creating a symbol.
Remember that a class, even if it is thought, for example, to be used on a button, is still a class applicable on (almost) any element and is something abstract.
A component, on the other hand, is an element with a series of classes applied to it.
When you need to create a class, a Utility, or structure a component, always keep this concept in mind.
Properties of each button (class):
Result:
+
+
+
Properties of su-w-full-mobile (small and normal button):
Properties of su-flex-child-order-first-mobile (big button):
Result:
+
+
+
+
+
+
+
Properties of bg-color-x (all buttons):
Properties of text-capitalize-all-caps (normal button):
Result:
+
+
+
If you reuse it several times, changing only the text, convert it to a symbol.
This way it will be easier to edit later, like the tags above, which are all symbols derived from ONLY 1 CLASS.
👇
As you could see, the CSU2 approach is a game changer in building elements. Apply it to your next project and save hours!