Road to v7 - plugins

[DanielRuf]

Description

It makes not much sense to maintain the plugins on our own. For most there are now native features in browsers (scroll-behavior) and much better libraries.

Following plugins can be replaced by vanilla JS solutions:

smooth scroll

https://github.com/cferdinandi/smooth-scroll
https://github.com/hsnaydd/moveTo

sticky

https://github.com/dollarshaveclub/stickybits

abide

https://github.com/yiminghe/async-validator
native browser API + pattern attribute

interchange

picture + picturefill
breakpoint classes

toggler

pure checkbox input, css + vanilla JS transition / animation with event listener?

orbit

swiper or alternatives

tooltip

tippy or alternatives

...

At least we should focus on design system, pure (accessible) components and reuse available solutions to lower the maintenance burden.

[erredeco]

I can agree for orbit; it is a shame for interchange - the possibility to "interchange" content elements is cool IMHO

[dlewand691]

Interchange is a great plugin and would vote for it to stay. It's unique to Foundation and I use it in most of my projects.

Toggler is also a favorite and would vote for it to stay if possible. The use of data attributes throughout Foundation makes things easy to implement.

Orbit: would agree, Swiper is a much more powerful alternative.

Fancybox could be a powerful replacement for modals.

RFS is an amazing responsive typography plugin. I use it in every project. It's also part of Bootstrap now.

Lazysizes would be nice for lazy loading

[br3nt]

I don't think Abide should be replaced by native or vanilla JS solutions as it acts as a mediator between native validation API, user-initiated events, and marking up of form elements with the required Foundation classes.

Abide hides implementation details and changes to Foundation markup from developers. Without Abide, developers would be exposed directly to changes in the Foundation markup which could unexpectedly break their code.

[DanielRuf]

Fancybox will not be used by us because it is commercial.

[DanielRuf]

Well, v7 would be breaking regarding SemVer. So far this is only a suggestion.

[erredeco]

I always liked Magnific Popup - but it is jQuery-dependent... I don't know what would be a nice not-jquery lightbox... maybe simpleLightbox?
If it were for me, I would choose a solution that has at least this feature that I find in Magnific Popup and I find useful: the option to disable the lightbox behavior If window width is less than a given number.

[dlewand691]

Another option for responsive scaling (not just for type, but for any element) could be to incorporate this styling from here:
https://gist.github.com/fsimmons/e9e64dc2f6f375dbe446c9994022299b

[DanielRuf]

@dlewand691 I think you mean CSS locks.

https://css-tricks.com/css-locks/
https://fvsch.com/css-locks/

[dlewand691]

Yes, but locks for any property, not just type.

[DanielRuf]

My answer was only about the naming of the technique / solution ;-)

[alexkuc]

My personal vouch is to keep Abide. What makes Abide really awesome is that you can easily style your own error messages anyway you like. The HTML5 does offer some crude validation but its major issue is that you cannot (easily) style its error messages.

[alexkuc]

Interchange, while a cool plugin on its own, I think with @DanielRuf that we have native options now to address this (src-set and picture). From SEO & performance standpoint (web vitals), too many elements being resized via JS and you may inadvertently increase your main thread time and total blocking time.

[joelyoder]

I'm with @alexkuc on Interchange. I've already been swapping out places we use interchange with src-set and positioning with grid when I need content over top of the image. I've had issues with various critical CSS solutions breaking interchange and removing the need for JS wherever possible is always a boost for perf.

It was a great idea back when we didn't have a better solution, but with object-fit support in all modern browsers, we don't need to use background-image for high-res background images anymore.

[erutan]

I've been pondering doing something on my own - hopping over to Bulma and then picking some well used JS libs that are styled with SASS and integrate their variables. This would have things feel a bit less disjointed and allow for a more consistently extendable design.

One approach would be to add a section for each plugin in _settings.scss and then have people add an @import at the top of each plugin's SCSS file. Swiper as an example only has theme color it appears: https://github.com/nolimits4web/swiper/blob/master/src/core/core.scss so there's not a huge gain, but it'd be nice if there were some solutions that had more customization (lightbox used to iirc?). With pinned releases using whatever package manager of choice keeping things stable would be trivial, though whether it's worth it or not depends on how many variables each plugin has.

Forking a custom SCSS file with more variables in it would be nice off of external modules would be nice, but could get tedious quickly. That'd cover namespacing conflicts though. I imagine there's some build process way to write over a scss file in the dependencies, though that'd require some diffing reporting between releases.

[katie1348]

I would like to point out that the power of Foundation is that it contains all the bits you need for a typical website without having to search the web for something that might or might not work with a ton of effort.

Then there is the patching and updating all the incomparable items from all over. While Orbit might not be the best, it is far easier to work with than another plugin from somewhere else. Having basic function, rather than the all singing and dancing version is good for everyone.

It would be a real shame if Foundation went away from being a solution. in that case, what does it do, what is its purpose? How will it differ from getting all the solutions from some other place?

I would rather see it stay as a complete solution that is good enough rather than loose all the plugins, just because someone somewhere does one better. That will always be the case.

[joeworkman]

Foundation 7 will move not towards recommending "best of" plugins. It will keep it's plugins "in house" This will ensure a common interface across every component.