Road to Foundation 7 and 8

[joeworkman]

I have been getting a lot of questions about Foundation 7. I have posted some details in various places but never posted a discussion here. I had a pretty grand plan for F7 initially. However, I feel that my ultimate plan for 7 should be more incremental towards Foundation 8. Obviously there is a lot of work to be done from now until then. Therefore, I will guarantee you that plans will change along the way.

Goals for Foundation 7

• Goodby jQuery. Vanilla JS for all plugins
• Migrate a lot of the Sass settings towards CSS custom properties. Sass will still be utilized.
• Move towards Dart Sass (even though support for that was shipped in v6.7)
• Simplify the build process
• Reduce dependencies
• New Website
• Foundation has 3 grid systems. F7 will keep that XY grid and need to come up with something new for CSS Grid. I have been playing around with this quite a bit. There isn’t much great things out there so F7 needs to be a trailblazer on this one. I would love some feedback from CSS Grid lovers out there.
• Remove some components that no longer make sense in today's web: interchange, float grid, etc.
• Evaluate animations inside Foundation components and make them easier to customize.

Goals for Foundation 8

• Web Components are the future. All components will be rewritten to be full fledged web components.
• Native First is going to be a big thing for Foundation. I want Foundation to leverage as many native browser components as possible for things like modals, accordions, etc. This means that we will will be able to keep the framework small and more performant. Similar to how mobile first became a trend, I want Foundation to start this new trend.

Will Foundation go down the full utility class route?

Utility classes are the rage now. Many of the most popular new frameworks are all class based. While I feel that utility classes have their place, I also feel that these new frameworks have gone too far. Foundation will not be following in their footsteps.

What is the ETA on Release?

I do not have any ETA on a release. We should see at least a beta for Foundation 7 in 2023. If you would like to help make this happen faster, let me know.

[tomschreck]

This is awesome. I’m glad to see Zurb Foundation is getting life.

[joeworkman]

One other thing. As of last year, Zurb is no longer participating in maintaining the project.

[ojorma]

i hope so. We have already moved 80% of our solutions away for zurb over the past year and half. Lets see if they can convince of to sustain the remaining ones.

[nitrokevin]

Love this, but why is Interchange not considered to make sense? I use it all the time (rightly or wrongly)

[joeworkman]

A vast majority of devs use interchange for images. Now that we have the picture element and srcset, it's better to use those. Do you use interchange for something different?

[nitrokevin]

I mainly use it for background images, does the picture element cover that use?

[joeworkman]

You can use them along with the object-fit

http://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

[mcoogan62]

I prefer an option to use jQuery or not. Are you considering a Sass build process using @use and @forward and drop the deprecated @import? I build today using CSS Grid and none of the grid systems available in the latest version 6.X. I don’t think you need to do anything with it in 7 or 8. Bootstrap did a poor job of supporting it in their latest version.

[ermolaev]

remove JQuery is good, but Vanilla JS will be hard for support, maybe use https://stimulus.hotwired.dev its great for apps with SSR, it popular in Rails community, example uses in:

• https://stackoverflow.design/product/guidelines/javascript/#creating-your-own-stimulus-controllers
• basecamp

you can see some plugins implemented with stimulus (code is very simple) - https://github.com/skatkov/awesome-stimulusjs
A collection of composable behaviors for your Stimulus Controllers - https://github.com/stimulus-use/stimulus-use

[DarrinRobertson]

As an opinion.
I would consider dropping backwards compatibility. ie As you progress to 7 and 8 you write and use it without consideration for supporting 6 upgrades or implementations.

This is just a community project. There is no one getting paid bucks to do this. (????) To help focus and progress the development by not having to worry about supporting previous implementations will reduce the work load as well as slim down the code base.
In a nutshell it would mean you wont be able to change your script references from pointing from 6 to 7 and expect most things to work.

For those already using 6 but wanting to step up to 7. Writing some good docs about migrating and allowing 6 and 7 and co-exits would be the approach to take. (Not ideal but an option to consider) If a project wishes to migrate they can add F7 and use the docs to look at changing code from XY Grid to CSS Grid as an example. They can migrate pieces and eventually drop F6.

More work for the developer, yes, but the end result is you will truly improve your website by using the latest practices.
Not like with jQuery that just kept getting bigger as it abstracted away more and more issues/compatibility to the point where now people avoid using it.

Don't get me wrong, it would be awesome to magically support and migrate a site with just a click of the rainbow button. But I feel the effort there would be determinantal in the long run to the success of the project. (due to everyone having a day job)

[joeworkman]

@ermolaev I do not see supporting vanilla JS to be an issue. Browsers are very consistent now. I have never seen stimulus before. I do not think that I will be integrating thing into Foundation. It is very opinionated and would make Foundation a lot less useful for many developers out there where stimulus would not fit into their stack.

@DarrinRobertson I do not plan on making 7 or 8 backwards compatible. With the changes that are being made, it simply would not be possible without a ton of bloated code. Thank you for taking the time to provide this feedback though. It's greatly appreciated.

[DarrinRobertson]

@joeworkman Your welcome Joe
What about the concept of allowing F6 and F7 to co-exist? The main thing here would be ensuring the naming conventions don't clash.

My thought here is around helping people migrate away from F6. (Allow them to do it piece meal rather than big bang) They may start by migrating the XY grid to CSS Grid but continuing using the Modal feature until they have time to change that.

The more people that do this means the larger uptake in the F7 community and the less F6 support distractions.

[ThatcherDesign]

I like the goals of 7, and making a larger jump with 8. < button class="button button-thankyou button-shadow button-blue button-large button-type-white" > Thank you for not doing this! < /button > Just .button with SASS will do.

[ThatcherDesign]

When F7 is launched, I vote for documentation and videos for F6 remain hosted and available somewhere. Our company builds web apps with 10-15+ year lifespan. I host a prototype of sample screens, a style guide, and a link back to Foundation docs in Github for the development teams. When there is a quick enhancement on our app needed 2 years after we built it, if the developer can not easily grab code that works with that version of Foundation, they load Bootstrap or jQuery UI on top of Foundation just to add an accordion.

[DarrinRobertson]

I agree

[joeworkman]

The docs and videos will always be available.

[Vhulcan]

Really excited about the roadmap, and so glad you're not going the utility classes route!

Just one question, is BEM still on the list? 🙂

[joeworkman]

I am not sure about BEM. I do like the current class setup. I am not sure that BEM will really matter when things go full components though. We are a ways away from that right now though.

[illiterati]

If I may cast a vote, I would vote AGAINST BEM. I've always felt it was overly verbose, and unnecessary if you set up your inheritances properly.

[joeworkman]

I do feel that Foundation need to be non-opinionated from both a design and development perspective. BEM is definitely opinionated.

[mikefoong]

@joeworkman thanks for maintaining and for the assurance that foundation is moving forward. i was just questioning myself if i would continue to consider foundation in my future projects. I am not the best nor the most popular developer around. i am nothing more than a tinkerer but in the process of developing a product. and I am definitely looking for advice to figure out how to build upon foundation in the future. i am currently working on foundation 6 on a flask application.

truly appreciate this. if there are ways i can contribute back in the future i would do my best.

[Gruffel]

Is there any word/update on the progress of Foundation 7 or 8?

[joeworkman]

I have another project that will take me until at least spring. However, I am working on things here and there in the meantime. For example, I've been playing around with the XY grid I order to leverage flex basis and gap instead of width and margins. This should drastically reduce the size of the code base for grid.

I have been thinking of starting a discord server for Foundation. Does that sound interesting for anyone else?

[glynszasz]

I have another project that will take me until at least spring. However, I am working on things here and there in the meantime. For example, I've been playing around with the XY grid I order to leverage flex basis and gap instead of width and margins. This should drastically reduce the size of the code base for grid.

I have been thinking of starting a discord server for Foundation. Does that sound interesting for anyone else?

A discord server for Foundation would be great

[Kleisli]

For example, I've been playing around with the XY grid I order to leverage flex basis and gap instead of width and margins.
Could you push this to a git branch to collaborate?

While I don't like the utility-classes-only approach of tailwind, it is the only framework I know that allows to use all the flexbox properties with responsive options.

[acald-creator]

I have another project that will take me until at least spring. However, I am working on things here and there in the meantime. For example, I've been playing around with the XY grid I order to leverage flex basis and gap instead of width and margins. This should drastically reduce the size of the code base for grid.
I have been thinking of starting a discord server for Foundation. Does that sound interesting for anyone else?

A discord server for Foundation would be great

Have you already created the Discord server?

I would like to contribute and help to bring Foundation to 7 and 8.

@joeworkman Do you already have a working branch that we could take a look at, or perhaps a roadmap of a sort that I can take a look at?

[Currey]

Any news on a Discord server? I'd love to help beta test Foundation 7 when it is ready.