Foundation 6.4.0

[kekkorider]

Foundation 6.4.0 has just been released, do you know what that means? :)

[olefredrik]

I guess that means we should get FoundationPress up to speed with the latest and greatest :) Haven't had the chance to look at 6.4 yet, so I don't know how much effort an upgrade will require. Shouldn't be too hard. Anyway, I'm going on a 3 weeks holiday starting tomorrow. If any of you want to have a go at it, please feel free to create a pull request.

[konsulenten]

Hi Ole Fredrik.
Would it be ok to update the Foundation in the theme to to 6.4 via Bower / NPM?

[olefredrik]

Hi @konsulenten . Foundation can be updated via Bower. But previously I have needed to do a few modifications in theme files as well. For example, in the transition from Foundation 5 to 6, there were so many rewrites that some changes were needed. I have not looked closely at 6.4 yet, so I do not know the details of what it will require with an update this time. Probably and based on experience, it's not a very big job.

[konsulenten]

Thanks, will hav a go with a new project I'm starting now. Have a nice summer and vacation!

[olefredrik]

Thanks! Please feel free to share your findings :)

[colin-marshall]

@konsulenten the javascript is built completely different in 6.4, so I would recommend waiting to try to get 6.4 working with the current release of FoundationPress.

[konsulenten]

@colin-marshall guess I saw your comment a bit late; have started out using 6.4.1 with FoundationPress. Most of what I need is working well. Right now only the Interchange/Responsive images does not work. I guess @olefredrik will update FP when he is done sunbathing and back to the office ;)

[JPOak]

Sort of new to Foundation and Foundationpress. When the theme is updated, does this mean that we will only be able to use the new xy grid or does the legacy float grid still come packaged?

[kavasey]

@konsulenten Hello. I'd like to get started with foundation 6.4 for a new project I'm starting. Would you be kind enough to give me some pointers as to how you got FoundationPress working with Foundation 6.4. Thanks

[kavasey]

Thank you @olefredrik for your great startertheme. Can't wait to use it with foundation 6.4.1.
I tried to wrap my head around the update though but the js files wouldn't compile with webpack stream and all, as my knowledge with the build tools is limited. For now I'm using the dist js.
Thank you once again and thank you for the blog posts too. They really enlightened me and gave me the head start (coming from traditional vanilla css).

Thank you so much for your contribution to the community.

[johnfrancisli]

I second that. Love foundationpress! @olefredrik great job!

[ChrisAynesworth]

@JPOak when the theme is using 6.4, I believe that by default the xy grid is the preferred grid system, but I recall watching a tutorial video from Zurb the other day where they say that the float grid is still included...

[olefredrik]

Hi guys. Just started working on an 6.4.1 upgrade branch last night. So far so good. The scripts and styles are built correctly and my demo site on localhost is loading as expected. Next up is replacing grid-row() and grid-column() with the new XY-grid mixins, as well as going though all the elements in the Kitchen Sink, to ensure compatibility with 6.4.1.

The new XY-grid is based on Flexbox and inspired by CSS Grid. I understand the reason they introduce a new grid system instead of just using CSS Grid (which is awesome, by the way), is browser support. Flexbox is well supported by most browsers people use today. For people who absolutely needs to support legacy browsers (I feel your pain), there's still a fallback to float-mode.

When the upgrade is tested and complete, I will publish a new release and let you all know. Until then, peace out ✌️

[kekkorider]

Awesome news, thanks a lot @olefredrik!

[kavasey]

Thanks @olefredrik for the good feedback. Looking forward to it then.

[JPOak]

@olefredrik @ChrisAynesworth I'd like to read more about the fallbacks. What I did read on their site is "We recommend only using the XY grid on projects that can live with purely cutting-edge browser support."

Sadly, I am not sure this describes some/many of my projects. Will you be able to use the old classes for the float grid or will the fallbacks be baked into the xy gird?

I'm trying to decide if a better strategy for my situation is to use an older Foundationpress release for a little while longer. It's pretty solid for me. If this might be the "safer" course.

Thanks

[ChrisAynesworth]

@JPOak Don't know if this helps you exactly but I did find this regarding using both grids in 6.4:
http://foundation.zurb.com/forum/posts/53433-xy-grid-compatibility-with-float-grid

"The classnames are different so you can include both grids to help port it over to the new one!"

[JPOak]

@ChrisAynesworth That is helpful. I guess if the float grid is not included in Foundationpress, I can just add the sass files myself. I wonder if it would be that easy : ). Thanks.

[olefredrik]

Update: I've spent a few hours (5-6) trying to understand the concepts of webpack - and how it's used in Foundation 6.4.1. To be honest, I'm not experienced with webpack at all. By including webpack, they've added a whole new layer of complexity to the Foundation framework. I'm not saying it's bad. But for those who doesn't have much experience with this technology, it will probably take some time to get used to it.

As I see it, the barriers for getting on board with webpack in Foundation are quite high. The current status of my upgrade branch is that the layout looks as it should. The float grid is replaced with a semantic XY Grid. And it looks nice and tidy. But as a consequence of my lack of knowledge around webpack, the scripts are not bundled correctly (I think).

Will probably take some time to get this update up to 100%. Feel free to hop onboard and give me a helping hand. :)

[bmdinteractive]

I was thinking of giving it a shot. I was going to see if I can marry the setup from their ZURB starter project with what you've already got. I'm still a bit green in setting up Gulp and NPM workflows, but stuff like this is how I learn.

[olefredrik]

@bmdinteractive : I actually got a little breakthrough about an hour ago, doing just that. I installed the Zurb template using the CLI and basically copied a lot of the setup that's used there. There is still need for some polish and testing of course. But I'm far more optimistic now :)

[bmdinteractive]

Well I'll just go ahead and pretend I gave you the idea and take my share of the credit.

[linuxbastard]

I was a little excited to checkout 6.4, so I updated my fork, but can't seem to find the branch for 6.4. AM I missing something?

[olefredrik]

@linuxbastard : I haven't pushed the 6.4 branch yet, as I'm not finished.. When I am, I will push the branch so you all can have a look before it's merged to the master branch.

[olefredrik]

TA-DA #1022 🎉