Synergy with angular-ui/bootstrap

pkozlowski-opensource commented 10 years ago

Hey guys!

Pawel from https://github.com/angular-ui/bootstrap here. You are doing some grant work here. Would you be interested to working more closely with us in order to not duplicate work?

We had support for Foundation on our mind for months but never had enough time / courage to do it.

In any case, if you see possibilities / interest of working together let's discuss it here.

jbrowning commented 10 years ago

Hey Pawel, thanks for reaching out! It'd be great to work together if we can find a way.

I've browsed your discussions on the angular-ui side and see that there have been a few discussions about making ui-bootstrap more css-framework agnostic. Have you settled yet on a direction? I'm curious how you plan to deal with differences in html and css structure across frameworks.

pkozlowski-opensource commented 10 years ago

@jbrowning I think the hardest part is to isolate all the CSS classes and markup specificities from the actual JavaScript code. We are trying hard to keep markup out of JS but there are cases we didn't manage, mostly due to animations and lack some missing elements / ideas (ex.: how to support different templates per directive instance).

At this point I would love to hear your feedback from the process of converting those directives to Foundation. What was the biggest pain point? What worked well?

sorich87 commented 10 years ago

Hey Pawel!

Pain points

Dropdown component

This was the biggest one. It expects a very Bootstrap-specific markup structure: dropdown toggle and menu all wrapped under the same parent element and an open CSS class added to that parent element to toggle the visibility of the menu. We thought the recent rewrite (programmatic trigger, etc.) would have improved things but we're still figuring it out.

I think, to be more framework agnostic, the component should:

allow a way to target a dropdown menu from the dropdown toggle instead of relying on them being under the same parent element. We modified it to work as dropdown-toggle="#target-menu-element" but I'm not sure it's the best solution.
directly toggle visibility of the menu instead of relying on an open class.
handle the positioning of the menu (like in the typeahead component) instead of relying on the framework CSS.

Collapse component

It's so coupled with the Bootstrap CSS that we simply removed the dependency from the accordion component instead of trying to convert it.

Tooltip component

Foundation doesn't center the tooltips and popovers relative to the target element like Bootstrap. Instead, it aligns them to the left. It looks like your recent improvements to the positioning made it easier to swap the positioning code (it may even work with Foundation out of the box), I haven't tried yet. We also needed a programmatic trigger and had to add a very simplified solution. I commented on the relevant issue in the UI Bootstrap repository to figure out if your team had decided on a solution and to offer my time to code it up and I'm still waiting for a reply.

Animations

Foundation doesn't have CSS animations. We adapted the Bootstrap fading animation code and put it in our documentation as a quick solution. It would be great if UI Bootstrap had its own way to handle animations instead of relying on Bootstrap classes. It looks like you are already planning or doing some work in that direction, right?

What worked well

Except the pain points mentioned above, almost everything worked! There were other very small incompatibilities but most of our work was to replace the templates and adapt the components tests.

MrOrz commented 10 years ago

@sorich87 :+1: Great summary! I have been replacing a few angular-ui templates with Foundation classes in my projects before I meet the angular-foundation project today. The widgets I tried to convert were:

Modal / Reveal

Worked perfectly by replacing the bootstrap classes with foundation ones. As Ulrich mentioned above, foundation does not have animation classes so I copy-and-paste bootstrap's animation classes to my project to get it work.

Carousel / Orbit Slider

The original Foundation Orbit is really fancy. However most of its magic is done in javascript so I have to copy-and-paste the prev, next and active classes to get the most basic carousel functionality. I've also spent hours before I realize that I have to turn off ng-animation.

Tooltip

I was fine with the centered tooltip. Instead I rewrited my CSS to center the tips in all four directions. I also patched my copy of ui-bootstrap to support programmatic trigger.

kencaron commented 10 years ago

Very interested in seeing this develop. Maybe a good starting point would be to start tagging releases so these projects don't get too out of sync?

yalabot / angular-foundation