Love seeing others use a column system like this! 🙌 I have also been using this same approach for years and after coming from using it with the Bootstrap CSS framework before Webflow.
The CSS window that you show at 1:45- what happens if this is removed from the webflow file? What is the point of this section? New to webflow, thank you!
Great system, still adjusting to it. One question thou: How do you use it in CMS grid? for example I have strip section with 3 divs - pulled from CMS collection with image on top and text component beneath it. Can you make video for this one PLEASE?
Great. So the fluid system is integrated in this style guide. One question for the reponsivity of the page what was the reason to use REM and not EM. Will definitive use it.
It Woolf be great if we had a build tutorial or in the coming course to see the style guide in a “making a webpage” example. Do you have create a figma styleguide that mirrors the webflow one? Kind a common logic?
We are using percentage as a width for our columns. For exemple when using a 12 columns grid layout, 1 column is equal to 100% divided by 12. We are using padding instead of flex-gap because padding are added inside our col element and not outside so we don't have to recalculate the width of 1 col every time we change the gap between 2 col Don't know if it's clear, let me know if it's not i'll make you a loom :)
Ca a l'air bien de pouvoir utiliser ce sytème, mais ce que je ne comprends pas c'est comment concrètement tu l'appliques avec ton vrai contenu. Cela ne risque-t-il pas d'enlever de la flexibilité sur ce que l'on peut faire avec les éléments se trouvant à l'intérieur de ces colonnes?
On va faire une video prochainement ou on construit en live avec ce système comme ça tu pourras te faire un avis. En tout cas nous en interne on gagne un temps fou 😊
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Love seeing others use a column system like this! 🙌 I have also been using this same approach for years and after coming from using it with the Bootstrap CSS framework before Webflow.
Thanks a lot Corey 😊
This is awesome, thanks for sharing!
Oh my word how good was this. I will be using this for sure. Can't wait until Monday now!!!!
Let us know 😊 Hurry to see the results Anthony
Mais... c'est juste incroyable ce que vous avez créé la ! Merci pour votre taff les gars !!
Merci beaucoup Nusty 😊😊
Bravo c'est juste génial !
Super merci beaucoup ! Trop hâte de la prochaine vidéo 🤩
Salut toi !
The CSS window that you show at 1:45- what happens if this is removed from the webflow file? What is the point of this section? New to webflow, thank you!
Great system, still adjusting to it. One question thou: How do you use it in CMS grid? for example I have strip section with 3 divs - pulled from CMS collection with image on top and text component beneath it.
Can you make video for this one PLEASE?
You don't need to use the column system in a grid system..
I'm so trying this on my next project! Thanks you✨
Love how simple this is
Thanks mate, no extra and useless classes, we just use column system and that's it :)
Thanks for posting! What's the difference between using this system and using the Webflow Grid component to build a 12-col grid system?
It's a bit faster to build a page this way and the responsive is easier to set up ! :) Let me know if you give it a try and what you think about it
Great. So the fluid system is integrated in this style guide. One question for the reponsivity of the page what was the reason to use REM and not EM. Will definitive use it.
We use REM and not EM because for people who need to scale the whole website to read better, REM is more accessibility friendly
It Woolf be great if we had a build tutorial or in the coming course to see the style guide in a “making a webpage” example. Do you have create a figma styleguide that mirrors the webflow one? Kind a common logic?
Videos about this are coming this week :)
What happens when I have 2 columns in one row, that will need to be stacked vertically on a mobile breakpoint?
You wrap them in one div and set to flexbox vertically
How do you handle vertical spacing when elements start stacking on top of each other, are global margin/padding classes enough for the job?
global margin/padding classes add complexity in term of combo class.
Nice thanks for sharing! It would be great to see how you build with this adding images, and sections - anymore videos planned on this?
Coming Soon 😀
Amazing!! I've one question. Can we use flex-gap propertiese to create the gutter instead of padding on flex-child's element?
We are using percentage as a width for our columns. For exemple when using a 12 columns grid layout, 1 column is equal to 100% divided by 12. We are using padding instead of flex-gap because padding are added inside our col element and not outside so we don't have to recalculate the width of 1 col every time we change the gap between 2 col Don't know if it's clear, let me know if it's not i'll make you a loom :)
How does this work with the client-first system?
We didn't try, but I guess yes, because it's just class allready created :)
🙌🙌🤩
Ca a l'air bien de pouvoir utiliser ce sytème, mais ce que je ne comprends pas c'est comment concrètement tu l'appliques avec ton vrai contenu. Cela ne risque-t-il pas d'enlever de la flexibilité sur ce que l'on peut faire avec les éléments se trouvant à l'intérieur de ces colonnes?
On va faire une video prochainement ou on construit en live avec ce système comme ça tu pourras te faire un avis.
En tout cas nous en interne on gagne un temps fou 😊
@@alextourgis Hâte de voir ça ! Car c'est un peu flou de mon côté pour le moment :)