Flexbox CSS with Genesis

[JML]

Hello,

I am considering investing in the Genesis Framework. I am also interested in starting to use the CSS Flexbox technique. Does anyone have experience with combining Flexbox with Genesis? If so, how well has it worked out?

Any and all insights and experiences appreciated.

Thanks!
JML

[David Chu]

Hi,
An interesting question! You're talking about that little beauty that is intended to cleanly handle certain layouts better than straight CSS, right? As a CSS guy, this is quite interesting to me. Caveat: I haven't used it yet.

I get around quite a bit, and I haven't seen anyone connecting Genesis with it. That doesn't mean that no one is, though. You could ask on Twitter using the hashtag #GenesisWP.

I will say this. I don't see any reason why it wouldn't work. If memory serves, one can add that via some Javascript libraries, some CSS, and maybe a few other bits. People add things like that to Genesis all the time, such as SASS, LESS, Bootstrap, Foundation, and simpler things like Backstretch, Font Awesome, etc. Flexbox seems to deal mainly with HTML and CSS, so I don't think it would have any adverse effects on plugins, either.

Genesis is a pretty clean framework. I think Flexbox would also work with bigger, more cluttered ones - I won't mention any names. 😉

Shooting from the hip, that's my take!

Good luck,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[JML]

Hi Dave,

Thanks for the input! The Twitter idea is a good one, I'll give it a shot. Thanks!

I've been reading up on Flexbox and it does seem that in theory it should indeed work fine with Genesis. It's carried out purely as CSS, applying it to DIVs like any other styling, but with dramatic effect. I am hoping someone with some experience in applying it to Genesis will pipe up, just to get some first-hand scoop on it.

Still, I plan to invest in Genesis anyway, so if nothing else perhaps I can serve as a canary in the coal mine for others on this topic. 🙂 My web development experience is limited thought, so I might be a pretty dead canary pretty quick, heh.

What I think I'd like to achieve is a Flexbox-based responsive site that gracefully falls back to a more traditional structure for browsers that don't support the new CSS. I know Genesis will do a fantastic job for the fallback, so as long as I can style it with Flexbox as well, it will be an ideal all-occasion solution.

Thanks again for the words on the subject.

JML

[David Chu]

JML,
I hope that works well for you. After your note, I did a bit more reading about it, and as you probably know, it's a bigger deal than just including a library or two and writing some script like other such tools - some server setup and so on.

So I may remain a spectator for awhile and see how things develop. My own CSS is dialed in to my satisfaction, and I know loads of tricks. 🙂 If I procrastinate long enough, flexbox may become better implemented in straight CSS. 😉

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Carlo]

I'm sure there are third-party Genesis themes out there that use flexbox – you just haven't found any yet!

it’s a bigger deal than just including a library or two and writing some script like other such tools – some server setup and so on.

??? No it's not. Flexbox is just a set of CSS codes. It's just a matter of typing them into the stylesheet. There are no libraries or scripts and definitely no server setup.

---

Comprehensive, easy to follow Genesis documentation

[JML]

After your note, I did a bit more reading about it, and as you probably know, it’s a bigger deal than just including a library or two and writing some script like other such tools – some server setup and so on.

Hm, may I please ask for some of the sources about that? In my researches on flexbox I've not come across anything about required set-up such as you suggest. That's not to say I disbelieve you, but rather that if such set-up is required, I'd like to know what I need to do!

Everything I've read so far makes no mention of any set-up, but rather seems to indicate one simply employs the CSS and if the browser supports it, it works. Have I been mislead?

Thanks,
JML

[JML]

Flexbox is just a set of CSS codes. It’s just a matter of typing them into the stylesheet. There are no libraries or scripts and definitely no server setup.

From all the reading I've done so far, that is the impression I've gotten as well. My hope is to use it for supporting browsers with a graceful fall back to a less ideal but still acceptable style for others.

JML

[Porter]

I assume David accidentally stumbled upon another library with a similar name, but who knows.

That being said, this is the ONLY topic on the forums right now about Flexbox, which I've recently discovered myself. I'm hearing a lot of praise about it from various depths of the internet, and am considering trying it out. Has anyone used this yet? Can anyone show a WordPress site using it? (I'd love to dig through the inspector to play with it). All in all, if you have anything to say about it, please do so!

Here's some reading on the subject, which I'll be going through tonight:

Flexbox: The Next Generation of CSS Layout Has Arrived

http://www.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[David Chu]

I'll assume you guys are right, and that one can just include a few libraries.

I could easily be mistaken, and was simply doing some looking around. So those of you who are fired up, take over. 🙂

Ciao

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts