I realize that we are still in a Beta version of RFF. However, I made three simple websites just to try out RFF. I made each of them from scratch using the "Blank with components" theme.

One was made by customizing the Menu with dropdown and Orbit components from the RFF-supplied list. I published this site under the "Share your websites" thread. The second was made by using the Simple accordion, Row with image tabs, and Dropdown toggle components from the RFF-supplied list. The third was made from some of the new Foundation elements added to the Elements set, and copying similar elements, techniques and values for the Mobile Menu from the "A Festival Event" theme in order to make mine work.

The first two websites were a learning experience, but I was able to determine from the component elements alone how to customize them for my own needs. It was in trying to make my own Mobile Menu component in the third website that really causes me to pose the following questions:

1. Are there plans to add many more, at least basic, components to the RFF-supplied list? If not, will we always have to re-invent the wheel for the more commonly-used website features? This would help to do better rapid prototyping of websites.

2. Where is there some good documentation on the Foundation classes? The http://foundation.zurb.com site seemed only to be in the form of examples for the various elements and this is not as good as a user manual. Will CoffeeCup supply any or additional documentation on these classes in the future?

3. Same problem in 2. above, but on Attributes and their permitted values.

Thanks in advance for any answers you can give me.

As this is a Beta release, we have provided a few examples to showcase a few of the more “cool” things you can accomplish with the Foundation framework. Of course, with time we will add more and more. The great thing about the components, however, is that you can create your own. All things take time, research and development, so expect more to come.


The best resource is the Foundation’s Site Docs, which contain many examples. It would be a lot of redundant work to re-explain this in a manual as they have done a great job with their documentation and examples. Learning how to “deconstruct” one of those examples is done by looking at the elements they are describing and using the class names, attributes and/or ID’s that they reference. Just start at the top of one of their examples and work your way down the code. All of the components built into the Blank with Components theme have been constructed by following their code examples. It takes a bit of practice, but once you do a few, it is incredibly easy. ;-)

Here is a good example of how to work with the Toggler. Later on, this example (and others) will be worked into some knowledge base articles, but for now, here is one to get you started.

Adding the toggle element

The first thing we need to do to create a dropdown menu is to choose which element we want to use to toggle the menu. It needs to be a link element such as Text Link, Button Link, Font Icon Link, Picture Link, etc. In this example, we have used a Font Icon Link. Simply add it to your design and add the data-toggle attribute with the value of view-menu. You can do this via the Attributes section found under the Design pane. That is all that needs to be done to the link; this will allow the menu to expand and contract. Now, we need to add the containers that will wrap the nav links.

http://www.coffeecup.com/files/foundationframer/font-link-data.png

Insert a container

To do that, let's add a container to our design and apply an ID name of view-menu. It will associate the container with the Font Icon Link we created above.

http://www.coffeecup.com/files/foundationframer/container-id.png

Now, we need to provide the first attribute to the container. Select the Attribute section found under the Design pane and add data-animate with the value of slide-in-down slide-out-down.

http://www.coffeecup.com/files/foundationframer/data-animate.png

The second attribute that needs to be added is data-toggler. There is no value needed for this so make sure it is blank.

http://www.coffeecup.com/files/foundationframer/data-toggler.png

Add List Item Container

In the container that was just added drag & drop a List Item Container to assist in keeping the menu links separate and provide finer control over their placement and styling. Feel free to leave this out if it is no extra styling is needed (such as a submenu background color, etc.)

Add Text Links

Now let’s add the links for the menu! In this example we are using Text Link elements. Add a Text Link element in each of the three List Item Containers and you are good to go!

Lastly we have to hide the container so it does not display until the link is clicked! To do that, select the first container we added, and apply Display None to the view-menu ID using the Apply To dropdown.

Ta-Da!
That is all that is needed to make a dropdown menu in the program. Click the Preview on… button (not the Preview button) on the toolbar and test out your creation. If it does not work, retrace the steps above and ensure you have applied each correctly. You can download this project file here.

Remember, you can always learn more about this how this was accomplished by visiting the Foundation Site Docs.

Scott,

Thanks for the feedback.

I actually did all the steps to create my Mobile Menu Toggler just as you described even before I started this Forum thread. Maybe it wasn't clear that I had done just that. But, I didn't think I had to copy someone else's design to make my Toggler work. For example, where do I find what other values could be used for the "data-animate" attribute besides "slide-in-down" and "slide-out-down" or that I have to use two values for this attribute?

I disagree that just presenting SOME examples for each of the Foundation classes and the various attributes and their values is good documentation. Do we just plug in some of those pre-defined Foundation classes into some element and see what happens through trial and error when using RFF? Or, do we have to read the Foundation jQuery library code to see ALL the attributes and their values that are acceptable on some element?

RFF is a good tool, capable of some cool things, but I really think the lack of better Foundation documentation for the stuff I mentioned above will make RFF really difficult to use for a lot of CoffeeCup customers.

This should be your go-to place for information and resources:
http://foundation.zurb.com/sites/docs/


This is only the beta release. We provided a few of these to get you started. As the program develops and moves to an official release, many more will be included.


For now, yes. Again, remember this is a Beta release. However, we cannot re-write every possible thing that Foundation does in our documentation as that would be a massive undertaking given Foundation has already done that. We will take a few of the more popular ones and show how to create them and from there you will use those instructions to build others.


I would recommend it. That is the best way to learn everything that Foundation can accomplish.