I have been away for a bit and did not have time to dedicate to learning from your post. Thank you for the video and the write ups. However, I am trying to do something else, specifically, what is linked in the first post of this thread. The example in the Zurb University says this:
This differs from the traditional off-canvas because it is not attached to the body., rather it is attached to the viewport. This means it overlays your content rather than pushing it over. You can have it open top, right, bottom, or left.
This example uses a button to toggle a panel, to transform into the viewport and be on top of content without moving any content,and the button toggles it back out.
The problem still remains that the creator has to assign a selector class to an element and can not call it when needed because classes must be assigned to elements in RFF. I believe there is a work around, but it can't be done in the with the intent of the example, and the creator has to make that .simple-panel.is-active class at astarting posiiton and transformation, which makes it coupled to a specific direction of overlay. Right now, the .simple-panel.is-active bring the panel to the center. But with RFF, it has to start off grid from a particular position or code written to disable that class when the website is loaded. So instead of using Foundation to activate class and bring it to the page from any original direction from the toggle button, it has to start off at a specific position. It can only be done as intended if sone can write the .simple-panel.is-active class to the style sheet itself.
