discussion: v7

[DanielRuf]

Description

Foundation v7 will likely be a monorepo and contain different packages. Compiler, design system, theme & customizer, the different components, plugin system.

We might also create codemods for easier migration of a few things plus some foundation-migrate.js which outputs console information for migrating current code.

Possible Solution

• building-blocks
• cli
• compiler
• core
• components
• customizer
• design-system
• plugin-system
• sass-library
• template-*
• theme

Some compiler like svelte or stencil. We will use yarn workspaces probably or lerna with yarn and a rolling SemVer release process.

https://github.com/semantic-release/semantic-release

• releases: semantic-release
• repo structure: monorepo (lerna with yarn)
• versioned docs: docusaurus
• kitchensink, examples: storybook (plus https://github.com/panosvoudouris/storybook-addon-versions)
• videos: remove
• tests: jest with puppeteer
• IE support: drop
• publish: only npm
• JavaScript: pure ES6 - migrate away from jQuery

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[SassNinja]

@DanielRuf do you already have a solution in mind for managing the packages? maybe lerna?

[DanielRuf]

I propose lerna with yarn.

[DanielRuf]

I think we can already experiment with the new monorepo and move some current parts to it (plugins for example).

[paulfelton]

Has anyone considered whether it might be possible to generate web components as a target for foundation's components? Or stencil components that could be transpiled?

This could make it easier for components to be versioned individually, and incorporated in the end-designer's design systems (regardless of the technology they base it on). Likewise for the developer, they could use the components regardless of whether they're generating an Vue, Angular, React (to a certain extent) or vanilla site?

[DanielRuf]

Has anyone considered whether it might be possible to generate web components as a target for foundation's components? Or stencil components that could be transpiled?

This is one of our plans.

[DanielRuf]

I added the link to semantic-release.
In the future we should publish only on npmjs (and additionally on GPR) - GitHub Package Registry).

Other frameworks and platforms can and should consume npm packages or unpkg files.

[paulfelton]

Out of curiosity, do you have a roadmap to version 7, or aspirations? I've seen the project board.

[DanielRuf]

@paulfelton we had a small one but I would say we should revise / update it.

https://github.com/foundation/foundation-sites/wiki/Project-Roadmap

[DanielRuf]

@joeworkman to which platforms do we currently / until now publish to? I want to check if and how they can consume npm packages and if we can publish only to npmjs in the future.

Bower for example registered the old foundation-sites package to the zurb organization.

[joeworkman]

We will definitely start to organize our thoughts around F7 very soon. It will be a lot of work and hopefully we can get more awesome devs to contribute.

@DanielRuf Right now I only publish to NPM and RubyGems. We used to publish to meteor but that was stopped a long time ago. For F7, we can probably pair that down to just NPM.

As for the npm organization. I sent their support team multiple requests and never heard back. For F7, it would definitely be nice to have our own org. I will keep pestering them. Now that they are ran by Github, it may be easier.

[joeworkman]

This issue has been mentioned on Foundation Open Source Community. There might be relevant details there:

https://foundation.discourse.group/t/foundation-and-css-variables/2469/4

[Geddo]

css-variables would be awesome. I integrated it for a bunch of objects like this:

_settings.scss:
:root{ --current-color: var(--primary-color, var(--default-color,#FF0000)); }

So if the css-variable --primary-color is not set, I use the default color #FF0000 for it. For all other elements which should use the new css-variable I created a mixin then like this:
.header { background: $primary-color; @include colorfrompage("background-color"); }

or like
.h1{ @include colorfrompage("color"); }

And this is my simple mixin:
@mixin colorfrompage($property) { transition: all 0.25s; #{$property}: var(--current-color); }

So with that I can easly set a new primary-color via a css-variable in my pages head and with additional scripts like swup.js I get smooth page and color transitions :-)

[joeworkman]

CSS custom properties are definitely something that we want in v7. I have already started a modified version of v6 that supports them already. Although, it’s just a proof of concept. A big change like this should happen in v7.

[ettoredn]

If I may suggest:

1. focus on the grid system / SCSS framework and release an early version with that only
2. drop as many plugins as there are already well working alternatives for them
3. build the remainder plugins as reusable web components using StencilJS and TypeScript

[dlewand691]

For consideration, using CSS variables, this technique looks pretty intriguing as a way to write less code.
https://propjockey.github.io/css-media-vars/

[joeworkman]

I actually already have a build that uses CSS variables. Its not perfect but it's definitely the way to go moving forward. The side effects is that we cannot use Sass color math for many things when using CSS variables. But a lot of effects can be achieved with CSS filters and other modern css techniques.

[paulfelton]

I'd vote for stenciljs too, possibly then documenting with Storybook

[DanielRuf]

1. We schedule a date sometime around the end of august or september for an open zoom meeting that meets on a regular basis with an agenda.

Who is "we"? Currently only Joe and I are actively working on Foundation.

2. We publish steering meetings to youtube just like Node does.

Much effort and work for such a small project in my opinion.
In general we already have a roadmap for a long time. But no time besides work and other projects.

4. We start a private monorepo until alpha that is invite only to people on the steering committee.

Not a good idea, development will be always in the public. No private repos and no invite only stuff.

5. We solidify our build process, CI

Both work, I see no reason to change anything.

Not sure but most of these points are either not relevant, need more active contributors or repeat what we already have in the roadmap and in the relevant issues.

[DanielRuf]

Also it just took over a month to publish a simple fix to the CLI

Please keep in mind that Joe and I do this in our free time and for free. Just saying.

[DanielRuf]

The whole point of what I'm suggesting is to be constructive and help get more active contributors and re-engage the community so that rather than building out features on a roadmap others suggested and abandon, we take a fresh look and start with DOING it. Nothing about your comment is constructive to your own end goals.

To be honest, what would help us at the moment would be to have more reviews on open PRs, PRs for open issues and issues resolved so we can make a clear cut and start the work on v7. Nothing against you or others, there is just still much to do before we can move on. And to decide. And most things are already decided on the original roadmap + some decisions and ideas mentioned here. Ideas are very welcome but I know that most of the volunteers can and will not attend such meetings - we tried that in the pst with all Yetinauts and it didn't really work.

If you want to organize this (date, time, people, accounts, ...) you are very welcome to do so and help usw. I do not have the time for this and I speak from my past experience (Nodejs org, Foundation and others) and it's not that easy.

[DanielRuf]

Honestly, why would I even want to submit a PR

PRs are always reviewed when I find some time. And we merged some in the last weeks. We have to get the other projects forward too (Foundation emails got some new releases, you might have noticed that).

[DanielRuf]

This is why I've maintained my own internal branches of foundation for sites, email and the cli for the last 3 years rather than submitting a PR.

Gatekeepig will not help us at all to bring this forward togehter. I propose you submit some PRs, we check if the proposed changes would be good and we can plan them for the next releases.

[DanielRuf]

As for PR's I'd be happy to review existing PR's test them and either close them or recommend a merge. But if you are looking for new PR as they relate to foundation/foundation-sites/milestone/40, that's not something I can commit to, Trust me, if I could commit to them, I would.

We welcome reviews and contributions for current and new PRs too. You do not have to contribute new PRs if the issues are too complicated / not that easy to solve.

We all have other priorities at work and at home but I don't believe that PR's or the lack there of should roadblock implementing V7 after a 3 year delay...

Well, users of the other projects ask also for updates so we fight on multiple fronts. Like I wrote, Foundation Emails got a few new releases and other projects too. We should resolve the big issues there before we move on - especially as it makes not much sense to open a big new project (v7) and directly drop support for v6 (with such few active people helping with the current tasks).

And I'm also active in other projects so I can not invest so much of my free time.

We had I think 10+ volunteers on the conference calls for foundation 6 alpha, etc.

Currently all other Yetinauts are not actively involved anymore since the move to a community project. Maybe you might have a better connection to them.

When I joined Nicolas tried to do these meetings but after a while we stopped doing them because no one joined or had time.

[ettoredn]

I have been wondering: why nobody is interested anymore in Foundation? Are better alternatives out there? Does anyone need a CSS grid framework anymore?

Don't tell me Bootstrap is an alternative. Bootstrap is trash.

[dlewand691]

Hi @joeworkman. I'm a huge fan of Foundation and been using it since about version 3. I work for Cognizant and it has been our framework of choice for the last few years. Our company has over 280,000 employees in 37 countries so we rely heavily on the flexibility and speed of rapid prototyping that Foundation gives us. I'd like to volunteer to help out wherever I can, mainly on the CSS development.

I've created a framework for our dev team that expands on Foundation's capabilities and would love to get your (and others) thoughts on it. Take a look at this repo:

https://github.com/dlewand691/_COG-Framework-2020

A high-level wish list of things for V7 I'd like to request/suggest/discuss are:

• Use CSS custom properties instead of Sass variables
• Change @import to @use or @forward
• Use CSS Grid (there's already a branch of this from 2017 but needs work)
• Use native HTML elements in place of custom ones where possible. <details> could replace accordions, dropdowns and modals?
• Should plugins like Orbit be removed in favor of more advanced ones like Swiper?
• Integrate PostCSS to purge unused CSS and other transformations
• Look at other frameworks like Bulma and Codyhouse to get any inspiration for how they're doing things
• Remove IE 11 support since it is now unsupported by Microsoft

Anyhow, please let me know your plans and how I can help. I don't want to see Foundation die, it's too valuable a resource! Look forward to hearing your thoughts. Thanks!

[rahiyansafz]

what's new @joeworkman ??? when will V7 come?

[kylek14]

One of my goals for 2021 is to make good headway on F7. I would like to build a small core group that would like to help push it forward. I am finally wrapping up a couple of big projects from 2020. I have reserved time in Q2 to start working on this more. If you would like to be involved in the process, let me know.

Out of curiosity, what help are you looking for? Interested in helping but more on the supporting side (webdev, docs, etc.)

[IamManchanda]

Very Good Morning, In this Modern Web Tech, If Foundation 7 has to become a reality

This is what we need to do

1. Make Foundation 7 CSS/SCSS on par with Bootstrap 5 CSS/SCSS
2. JavaScript: Remove jQuery Dependency, docs should contain not only html examples but also Vue, React & Angular examples.
3. Just-in-Time Mode https://tailwindcss.com/docs/just-in-time-mode
4. Make Foundation Prototyping Utilities to be on par with Tailwind CSS extensive list of classes and make them available by default with Just-in-Time Mode
5. Make Foundation Building Blocks to be on par with Tailwind UI or https://tailblocks.cc/

[qeet]

@IamManchanda

I just released a library that lets you use all the Tailwind utilities with the current version of Foundation. All you need to do is include a tiny (~8Kb) Javascript in your page and then you can use all Tailwind utilities to style your Foundation components.

See: https://github.com/qeet/foxtailcss for docs & code

[DaSchTour]

@IamManchanda instead of reinventing the wheel maybe foundation should build on top of tailwind and simply provide some nice UI components. There is a lot of effort in building something like tailwind and simply rebuilding it would not do the trick. It will always fall behind tailwind.

[DanielRuf]

@IamManchanda instead of reinventing the wheel maybe foundation should build on top of tailwind and simply provide some nice UI components. There is a lot of effort in building something like tailwind and simply rebuilding it would not do the trick. It will always fall behind tailwind.

Exactly. We know how reinventing the wheel went in the past (orbit, grids, ...) which ended in more problems and work than a small team could do.

[k33n8nc]

Tailwind, Alpine JS and Laravel Mix, ready, set, go!

[dlewand691]

Madosel is a great new framework, currently in alpha, but could be a great inspiration for next steps on Foundation. Take a look here: https://www.madosel.com/

[pboling]

Svelte is the next major framework in Javascript, so integration with Svelte (which already has first class Tailwind support) should be a goal of a future Foundation. Svelte will eat much of React, Vue and Angular over the next couple years.

[IamManchanda]

@IamManchanda instead of reinventing the wheel maybe foundation should build on top of tailwind and simply provide some nice UI components.

I am cool too ... yes reinventing the wheel wouldn't make sense with short team

[joeworkman]

I know that Tailwind is the cool new(-ish) kid on the block. However, I do not see Foundation 7 will be going that way. Utility classes are useful. But there are limits to how far I feel they should go. F7 will be blazing new trails.

[joeworkman]

I will be doing another hangout soon if anyone wants to be a part of that... https://foundation.discourse.group/t/foundation-7-hangout-looking-forward-to-f7/

[rahiyansafz]

I will be doing another hangout soon if anyone wants to be a part of that... https://foundation.discourse.group/t/foundation-7-hangout-looking-forward-to-f7/

Please Joe! make foundation Great again.

[joeworkman]

I have another hangout setup for next week for those that can make it... https://foundation.discourse.group/t/july-hangout-for-foundation-7/4611

[edoardo-bluframe]

Hey everybody!

Mega upvote for:

• CSS Grid
• ES6 Only / Bye Bye jQuery

Can I help as a dev?

[adventdesignllc]

@joeworkman Any updates on F7 progress? Still passionately using F6 and fighting off calls to drop it as a dead foundation for web projects. Tried other alternatives and nothing compares to Foundation!

[maietta]

Hi @adventdesignllc, I'd love to see a version 7 released as well. The project is certainly not dead. It's just a really stable framework.

I have been using Foundation 6.5+ with Vue 3 + Vite for some time now and even build a project base around it at https://github.com/PremoWeb/SDK-Foundation-Vue that is worth checking out if you want to adopt Foundation with Vue 3.

I would absolutely love to devote all my time to open source projects instead of working on client projects but client projects are what pay the bills. I'm seriously considering spending some time before fall and winter to drum up enough sponsorship so I can make the transition to working on projects like Foundation full time. The sooner we have people who can devote serious hours to the project, the sooner everyone benefits. I still feel that Foundation for Sites is the very best front-end framework for modern websites though I do feel there is room for improvement, especially from a web developer's perspective.

It'd be rad to drum up about $4-5k/mo which is nothing these days to devote my time to this. I am by no means a front-end developer but I do have nearly 10 years of experience using Foundation. (Wow, has it really been that long?) I know that I was using Foundation for some time before attending the Foundation 5 software launch party back in 2013. That was an amazing experience getting to meet the people behind the project and pick their brains for all that juicy info about web design, goals, the vision of the future, etc. Those people really know their stuff.

One thing I can offer to the table is complete tooling for every platform (Linux, Windows & Mac), and the ability to integrate into existing frameworks like Vue 3, React, Angular, etc. I can build a website from top to bottom that can replace the existing, overly complicated get.foundation system which I think is built upon proprietary hosting (or at least, it used to be).

My current Vue + Foundation template mentioned above does give me that live hot-reloading capability that first got me interested in the SASS version using Gulp, etc. I had nothing but problems trying to use Foundation's provided tools as things were evolving way too fast. Bowser, Yarn, Gulp, these were all new to me at the time so that was probably my issue.

I've got a version of Foundation that works with Webpack somewhere, but I ran into a strange edge case issue that I couldn't easily resolve, which caused me to look at Vite build system instead, which did solve my issue.

Foundation 7 should certainly be built to operate easily within existing build systems by default. It should be easier to configure and there should be a fresh website with an improved catalog of ready-to-use components.

Mixins should be easier to understand and use. To this day, I still can't figure out how to get mixins working properly within my Vite system. With more time spent on this, I could probably have this hammered out.

Anyway, I don't know what's up with the status of 7, as it's been MANY YEARS since it was first discussed. I really hope we can get some serious interest in it. So far, I really only see one person who works a lot on this project but my guess is he's got to pay his bills too and I don't think this project pays anything at this point. The joys of Open Source!

[adventdesignllc]

I'd certainly be willing to contribute monthly support to help development. I myself would be happy to chip in some hours, though I'm not sure the depth of my skills would be deep enough to be helpful.

@maietta I'm not familiar with Vue but looks like I should look into. Is some sort of instantaneous live-update of sass changes?

Foundation is working great for me at the moment. I understand HTML and SCSS, but like you, Yarn, Gulp etc. are the bane of Foundation based work. I don't understand any of that command line functionality, and have 'broken' the Foundation build system many times over the years, resulting in hours and hours of beating my head against the wall trying cut and paste commands to get the system back up to compile the projects. I've got a core project I duplicate and run "npm start" and it works. "Foundation New" command hasn't worked for me for ages.

I wonder how many front-end coders like me would be more apt to use a system like Foundation if the way to get a project set up and compiled wasn't so archaic.

[maietta]

@adventdesignllc, Firstly, thank you. A willingness to contribute both financially, even a little bit as well as some hours, even if you don't think you're qualified, are both extremely important in my opinion. That is a seed worth planting.

I fully agree that the Foundation SASS edition must be easy to get set up and use, regardless of the operating system or skill level. It was absolute hell for me to get started with it and I'm no spring chicken in web development. Yet I kept going back to the precompiled ZIP or CDN options due to the many problems I kept running into. Thankfully, I broke past this issue and I'd love to see other people adopt my template and improve upon it.

In desperate of needing more action and less talk, I've gone ahead and created a new Github Organization called "Foundation Remix" which will rebuild the Foundation 6.5.x ecosystem using modern cross-platform but minimal tooling, a complete rebuild of the website in Vue 3, tooling, distribution channels, etc. I'll stand up a dedicated community forum devoted to moving to 7 and I'll start assembling talking points from the existing Foundation discussions and issues as it relates to 7, including suggestions for direction, etc.

If you are serious about this as I am, shoot me an email at [email protected]. I'm going to dig around here to see who else may be interested in following along or to help make this happen quickly. Again, it's been YEARS since 7 was first discussed. Time for action.

The new "Foundation Remix" project is now being started here: https://github.com/foundation-remix.

[joeworkman]

@adventdesignllc I have started a discussion thread about F7 and F8 roadmaps. I am not sure if you have seen it... https://github.com/foundation/foundation-sites/discussions/12310

This year has threw me some unexpected challenges, however, I do still feel that a beta for F7 can happen in 2023 as I estimated in my roadmap. Until then I will keep shipping patch updates to F6. I released v6.7.5 last month.

There is a lot more to Foundation than just this repo. There is a lot of underlying repos that make a lot of the magic happen. I have also been spending some time getting some of these updated or completely replacing them with something new. For example, this year I released Proton as a future replacement for panini. I feel that it's a much more powerful, elegant and easier to maintain solution.

@maietta I look forward to seeing what you do with Foundation Remix 🎉

[maietta]

Hi @joeworkman, thanks for the encouragement and I totally understand about unexpected life challenges. For me, they are less frequent than they used to be so I'd like to leverage that. I would much rather put my energy into the existing Foundation but feel that many of the things I want to do will fall outside what this project is aiming for. Perhaps there could be a happy medium here. I am still investigating how I can be of use.

I've read over the roadmap discussion for 7 and 8 and agree with most of it. Perhaps I can be working on knocking off some of the items on the checklist. Admittedly, I'm going to need to get better at Typescript, web components, et cetera.

Proton looks interesting, although I'm not a user of the Pug template system, I can see how it's useful.

As of right now, Foundation Remix is just an idea and will be very much a collection of experiments until such time as it can prove itself viable. If anything, I want it to be helpful to Foundation, not necessarily a replacement. I come from more than two decades in backend development, not front-end, so this is a bit overwhelming, actually.

I'm thinking of porting the Javascript components to Typescript, going native to remove any need for jQuery. If I can do this without bugs, that'd be amazing and I think a good way to help this project along.

[maietta]

I gave up on the project.

I moved away from legacy PHP projects and moved to adopt Tailwind. I'm sorry.

[pboling]

It's ok to let it go. Thanks for the efforts 🙇

[matteorchard]

Ah the memories! Thanks F6 for kickstarting my career!