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.
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.
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?
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
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
Remember, you can always learn more about this how this was accomplished by visiting the Foundation Site Docs