This is great! I will say finsweet have a webflow extension that makes this exact same process a lot quicker and easier, but I do like your grid system for webflow and might try it on my next project.
4:02 In figma, I would do this by scaling the entire frame down with the K tool. this will give you a more precise value for the font size. not sure if you can scale frames / artboards in adobe xd though.
7:48 it took me a second to understand what a prototype width is, and why a container width would be greater than a prototype width. I eventually realized this is specific to webflow, bc webflow doesn't natively have a desktop XL breakpoint. so with your custom code embed, you're adding an XL breakpoint. is that right?
Exactly ! I don't like to add breakpoints on webflow so this is a way around it, i hope the video will be usefull don't hesitate to dm me if you have any question or advice so that we can make this more understandable for people :)
Thanks for sharing Fluid Responsive, having line-breaks scaling is great for typographic control. But is there a reason you haven't included Mobile Landscape in the calculator, so 480-767? I've been doing this breakpoint manually, unless I have missed something in your instructions?
Just wondering, if you have paragraph text set to 1 REM (16 px) will it also scale down on smaller breakpoints? Because it will get too small to read, no?
is that the current webflow interface? I don't see that design feature on there where you can have 3 layouts where you copy one over. what program is that?
Merci encore, combiné à votre styleguide, ça va bien faciliter les choses ! Juste une petite question, en mobile vous règlez tout en rem à la mano en fonction des tailles sur la maquette c'est ça ?
@@alextourgis Dans le code ca resemble a quoi sur mobile? Ou vous editez les elements directement dans webflow pour que ca ne soit pas trop petit, et vous ne touchez pas au code?
We just add the possibilty to manage it on mobile too :) We gonna do more video about it, because it's true that for the moment we didn't talk a lot about it :)
Trying to do good work requires effort and things don't come easy! Fluid responsive is not an easy subject and we're trying to make it more accessible and share tools we use everyday. If you make the effort to actually try to understand it you'll see that it's really not that hard
Most simple and most effective solution out of them all. Thanks so much, I will use just this tool from now on.
Thanks so much Ljubo 😊🙌don’t hesitate to share to us your project made with this 😊
This i exceptional! So many youtube webflow videos. BUT your channel is a gem.
Nice, thank you! I will introduce your tool in one of my tutorials as well. 👍
OOOO this is interesting. Great to have a clear system the agency uses
Wow, seems to be a great solution, can't wait to try it. Thanks a lot!
Glad you like it :)
Update: I used it on a project I just delivered and the client is loving it. I will start using it on all my projects. Thanks!@@alextourgis
Amazing !
Very useful tool :)
thanks for it! cheerz
Thankssssss
This is great! I will say finsweet have a webflow extension that makes this exact same process a lot quicker and easier, but I do like your grid system for webflow and might try it on my next project.
4:02 In figma, I would do this by scaling the entire frame down with the K tool. this will give you a more precise value for the font size. not sure if you can scale frames / artboards in adobe xd though.
Hi Neil, thank you for the tip !
so will that code affect all fonts and scale them to the same proportion?
How would it work if you wanted to also use breakpoints like mobile landscape or mobile portrait?
It would work the same than for desktop and tablet we did not create it for the moment but maybe in the futur !
7:48 it took me a second to understand what a prototype width is, and why a container width would be greater than a prototype width. I eventually realized this is specific to webflow, bc webflow doesn't natively have a desktop XL breakpoint. so with your custom code embed, you're adding an XL breakpoint. is that right?
Exactly ! I don't like to add breakpoints on webflow so this is a way around it, i hope the video will be usefull don't hesitate to dm me if you have any question or advice so that we can make this more understandable for people :)
7:06 can the same method be used for fluid responsive on mobile as well? not just desktop / tablet?
Yes, i will update this soon to add the possibility ti use it on mobile
Thanks for sharing Fluid Responsive, having line-breaks scaling is great for typographic control. But is there a reason you haven't included Mobile Landscape in the calculator, so 480-767? I've been doing this breakpoint manually, unless I have missed something in your instructions?
No specific reason, we'll add it in the next version, thank you for your feedback :)
This is amazing thank you for sharing your knowledge and ideas, they help me a lot!
Thanks a lot for your comment, it give us a lot of energy
thank , merci
Just wondering, if you have paragraph text set to 1 REM (16 px) will it also scale down on smaller breakpoints? Because it will get too small to read, no?
That can be an issue, the solution would be to see at what width your font start to be to small and change it to a fixed px value in the custom code
is that the current webflow interface? I don't see that design feature on there where you can have 3 layouts where you copy one over. what program is that?
It's a page we built, you can find it here : fluid-responsive-tambien.webflow.io/
Hello, nice method! How you scale in XD? I can not scale my elements with text field proportional. I try every short-cut on mac os. Tahnks
You need to select automatic width in your text settings
Very cool tool 👍
Is there an option not to set a maximum prototype value, but to have the page scale indefinitely?
We can't do that, we need a minimum and a maximum value to make it work ! You can achieve that by using em but you'll get some accessibility issues
Merci encore, combiné à votre styleguide, ça va bien faciliter les choses ! Juste une petite question, en mobile vous règlez tout en rem à la mano en fonction des tailles sur la maquette c'est ça ?
Sur mobile on remet une font-size de 16px pour le html donc on change simplement les valeurs de nos différents éléments à la main effectivement !
@@alextourgis Dans le code ca resemble a quoi sur mobile? Ou vous editez les elements directement dans webflow pour que ca ne soit pas trop petit, et vous ne touchez pas au code?
hey very nice! how does it work on mobile? and is this just for font, not images?
We just add the possibilty to manage it on mobile too :) We gonna do more video about it, because it's true that for the moment we didn't talk a lot about it :)
I Don't mean anything . but how does this differ from timothy ricks wizardly
just curious
Your system is very complicated
Trying to do good work requires effort and things don't come easy! Fluid responsive is not an easy subject and we're trying to make it more accessible and share tools we use everyday. If you make the effort to actually try to understand it you'll see that it's really not that hard