Using Fluid Responsive in Webflow with Finsweet

Responsive design has become a standard for creating modern websites, but finding the right method to make your website "responsive" can be a challenge.

Fortunately, the use of"Fluid Responsive" can make this process much easier. In this article, we will explore what Fluid Responsive is and how to use it in Webflow with Finsweet.

What is Fluid Responsive?

Definition of Fluid Responsive

Fluid Responsive is a web design technique that allows a website to smoothly (fluidly 😁 ) adapt to different screen sizes using proportional scaling.

This technique for designing websites with flexible designs that can be adapted to all screen sizes generally uses percentages rather than pixels to define the dimensions and margins of page elements.

Unlike fixed designs, which have predefined sizes for each element, fluid responsive allows elements to resize and reposition themselves according to the user's screen size. Thus, a website designed with this technique will automatically adapt to all devices, whether it is a desktop, a tablet or a smartphone.

What is responsive design?

The units of the responsive fluid

To implement a "fluid responsive" design, it is important to use relative units (percentages, em or rem) rather than absolute units (pixels). This allows you to define dimensions and margins according to the size of the display window, rather than an absolute size.

It is also possible to use the vw (view width) and vh (view height) scales. However, there are several problems with this:

• All elements must be in vw or vh. This implies a lot of classes and a lot of management.
• If the screen is very large, you can have huge elements or margins and vice versa.
• The vw and vh do not take into account the preferences of users and therefore pose problems of web accessibility.

To create a responsive fluid, it is also necessary to definebreakpoints from which the page design will reorganize itself to fit smaller screen sizes. The breakpoints allow you to define the layout rules and styles of each element according to the width of the screen.

Implementing a Fluid Responsive on your Webflow project

Contextualizing Fluid Responsive with Client-First and Finsweet

Before we start, we'll point out that to implement fluid responsive on a Webflow project, there are several methods. In this article, we will focus on the best (and surely the easiest) way to implement it in a project. This method will follow the Client-First principle and the tools provided by Finsweet.

If you know anything about Client-First, you know that when developing a project, we use REMs rather than other size units (understand the difference between REMs and pixels).

To summarize, REMs are a unit of measurement used in CSS to define the size of elements on a web page. Unlike pixels and other absolute units of measurement, REMs are relative to the size of the HTML root of the page rather than the parent element.

This means that sizes set in REM will remain proportional to the default font size of the page, regardless of which parent element they are in. Therefore, using REM is a recommended practice for creating "fluid responsive" designs that fit all screen sizes.

By default, 1 REM = 16px, but we can change this root font value.

That's why for its Fluid Responsive, Client-First uses"root-font scaling". This way we can control all sizes in your project globally.

Generate a Fluid Responsive Client-First in Webflow

To generate a fluid responsive, you will simply need to add a CSS code in your project settings. The code can be added at the end of the project when your development is complete and only takes a few minutes to set up.

To do this, you must first install theFinsweet extension for Webflow. Once the extension is installed, you will need to :

1. Enter the Designer of your project
2. Click on the Finsweet extension icon
3. Click on "Client-First
4. Click on "Fluid Design Generator
5. Setting up your Fluid Responsive

Setting up a Fluid Responsive Client-First in Webflow

When you are on the Client-First fluid design generator in Webflow, you have several options to set up your responsive.

Modify breakpoints

By default, you have 3 breakpoints (479px, 1440px and 1920px).

First, you can delete, add or modify the default breakpoints.

• To add more, you can click on one of the pluses between the existing breakpoints.
• To remove them, you can hover over a breakpoint and click on the red cross next to it.
• To modify, you can simply click on the value of a breakpoint and modify it.

Modify the values of the root font by breakpoint

After changing your breakpoints, for each of them, you can define the "start" value of the root font and its "end" value.

For example, if we have a breakpoint at 1920px and another at 1440px, we can define that at 1920px the root font value is 18px (not 16px by default) and at 1440px is 16px.

So between 1920px and 1440px, the value of 1 REM will decrease in a linear way from 18 to 16px. This means that at 1680px, 1 rem will be equal to 17px or that at 1560px, 1 rem will be equal to 16.5px.

In short, we can vary the size of a rem according to the width of a screen thanks to our breakpoints and linear lines.

Another example of custom Fluid Responsive:

Additional options

The generator offers us additional options to go further:

• Stop Scalling at max breakpoint: to keep a fixed size after the biggest breakpoint
• Add editable variables to code: Allows to modify values "more easily" directly in the code without having to go through the generator
• Remove style tag: to keep only the pure code without the style tags

Integrate the CSS code

Once your configuration is ready, you can directly copy the code thanks to the dedicated button andintegrate itin the custom code of your project (in the head tag).

If you want to see the code directly in action and you have a Client-First project, you can insert it in theGlobal Styles component embed (otherwise you will have to publish the project).

css code fluid responsive client-first webflow

‍

Benefits of using Fluid Responsive with Finsweet

• You are free in its implementation or not in a Webflow project
• No constraints on development
• Easy management
• Accessible

Conclusion

In conclusion, we can see that Fluid Responsive is an effective web design technique to make one's website "responsive". Thanks to Finsweet, it is easy to add this technique to any Client-First Webflow project without the need for complicated calculations or custom CSS code. So if you are looking for a simple way to make your website responsive, try Fluid Responsive with Finsweet!