Flexbox + @kristofer + Webflow = Awesome! I'm Excited!

So I have been using @kristofer’s Flexbox framework for some time now (it’s awesome) and I just didn’t connect the dots…

I didn’t realise you were behind http://flexboxgrid.com/ @kristofer and i have to salute you again :smile:. Now that you have him on board guys I’m just getting a little excited with the possibilities of using flexbox natively in Webflow… @thesergie @callmevlad I know this is cheeky but do you have any updates in regards to this? Maybe even a possible ETA? (I know a long shot haha but thought i’d ask)

Currently I use a forked custom version of @kristofer’s flexbox framework as injected CSS via the HTML embed widget in Webflow. Really helps as i can have full control over my grid structure and the padding / margins of columns which does not limit me to a bootstrap style linear layout.

Exciting times!!

4 Likes

Wow, good job Inspector @tim, looks like you’ve found something interesting (:

Native flexbox in Webflow would be awesome. Flexboxgrid looks very handy.

@tim would you mind showing me examples of why you feel the need to use flexbox in WF, and how you do it? wld be great.

Hey @vincent I will make my Starter Project that i use for grid structure public so you can see an idea of how i work. Will post a link shortly! @callmevlad thanks for the like :wink: haha

2 Likes

Here you go:

https://webflow.com/design/tim-grid-starter?preview=b7c27dc82587a11cf44f86b2d5d4cf51

Had to clean up a previous project but hopefully you get the idea :smile:.

.grid-item handles all the column specific styles and for x, for l, for m and for s handle Webflow specific breakpoints and set column width per breakpoint (much like flexboxgrid).

1 Like

Thanks. I got the idea. i’ve played with the Example page, and the responsivity of it. So, can I ask what’s the benefit for this layout to use your workflow, versus using Webflow’s Row widget?

Aww, thanks @tim !
Very happy to hear you’ve been enjoying flexboxgrid :smile:
I would love to update the grid components in the designer.
We have some other ( OMG CRAY ) features that we are currently working on, but I bet @callmevlad & @thesergie would be just as excited as you to be able to design layouts with flexbox.
Shouldn’t be a hard sell :wink:

Thanks again for the kind words.

4 Likes

@vincent It’s the added functionality of controlling a column width size between the breakpoints. Currently with Webflow if i use a 3 column layout i can only evenly arrange them in mobile view to stack 100% on top of one another. But with my method using css flexbox i am able to control each column individually per breakpoint, stacking them in a way that best fits the content. See below:

An example of this would be the Hero section in the example i sent over. You could set the image column to span 12 columns and the text / link section to each span 6 columns (50%) respectively.

I can rapidly build quite complicated layouts this way and take advantage of the beautiful GUI webflow offers of in browser designing. Maybe a little complex for other users needs but in the long run i really think people would grow to love the flexibility it offers.

@kristofer Your welcome ;)! I’m looking forward to what you guys have in the locker! :smiley: The latest feature update has increased my productivity ten fold, thanks again!

2 Likes

@tim Thanks for sharing. Just so I understand more, are you using webflow just for building out layouts with Flexbox and then exporting the site to work on yourself outside of webflow?

Hey @daniel_cleayweb no not at all… I use Webflow much more than just layouts. I use it for all stylings (i.e. margins, paddings, H1, H2, H3… Lists, Paragraph, Typography, colourings etc) not just for layouts. Using Flexbox in Webflow really helps though, as it allows me great flexibility.

My current workflow is probably a lot different than many other users as I export sites and hand them over to a Senior Front-end Developer, rather than the old workflow of handing over PSDs. Allows me to work directly with CSS in its native environment :smile:.

1 Like

Hi Tim,

I recently looked at Flexbox and I am now also interested. Amazing because I am coming from a design background and by using Webflow it stimulated and helped me to dig into HTML, CSS and Javascript, like Sergie predicted in one of his comments on this forumSo, I am also excited about the possibilities with Webflow.
Anyhow, the link isn’t working anymore, while i could use some help in the combination Flexbox en Webflow.
Are you able to publish the link and perhaps elaborate a little more how you integrate Flexbox with Webflow?

Thanks,

Bert

Hi @BBC2 Thanks fo the message. I actually still have this project live and the example can be found here: https://webflow.com/website/Starter-Grid

3 Likes