Share your tricks or tips for Foundation Framer with others!

This thread is for Tips & Tricks for Foundation Framer - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.

Be sure to check out Components and Symbols in the content pane. These go a long way toward being able to replicate content on additional pages. It would be great if there was a way to store these across multiple sites, but this is still far better than RSD.

Symbols allow you to store an HTML element that you want to stay the same across multiple iterations. You can add a symbol to the library and paste it in another place on a page or in another page entirely. Make a change to a symbol in any one place, and the changes are replicated in every iteration.

Components allow you to store an HTML element you want to display in other areas of the site, but with the ability to change child elements.

Bravo, Coffeecup. Now let's just make a way to be able to store these across multiple sites!

Here is what I learned so far I thought it may help others.

Trying to edit the contents of a built in component:
1. Start a new blank project (with components)
2. Goto the "Content" tab
3. Select Components
4. You should see a list of prebuilt components there ranging from "Full screen modal" all the way to "Row with image tabs" Now click the column you want to add the component too then click the + arrow beside the component you want.

This should add it to the column. In my case I selected the "Simple Accordion". My biggest problem is I could not figure out how to edit the hidden paragraphs. This is how you do it.

Select the simple accordion you just added then goto the inspector. The first thing you will notice is a few eye symbols on every container under the list container. You can either show them one at a time by clicking on the eye to unhide it or you can select the "Show hidden items in this breakpoint" near the bottom.

From this point you can edit all the content in this area and then select the eye symbol again to hide from view.

Making a component a Symbol and using it on other pages.

Using my previous example of an Simple Accordion I just created We will now make that a Symbol and add it to another page.

1. Select the "list container" or if its alone in the column select the whole column.
2. Choose the Content tab then select Symbols.
3. Click New Symbol and rename it something descriptive.

Thats it now go to a new page or a new column any where on your website and click the the + sign by the new symbol you just created and it will add it to your page. Best thing is you only have to edit that one symbol and it will update it across the entire website where that symbol is present.

(pro tip) If you look at the Symbol title it will tell you how many instances its on your website and what pages they are on.

Steve
Very helpful tip thanks
Tom

How can I access the raw css?

You have full access to the CSS once the project has been exported. Simply click the export button and follow the steps.

Building Basic Top Bar Menu With CoffeeCup's Foundation Framer.

https://youtu.be/Yi73Bg1wtvo

Note: I encountered few times that some elements such as container itself and elements inside the container jumps out of container and hopefully admins at coffeecup takes note and for you guys if you need to reproduce same thing please watch out elements hierarchy in inspector panel if you faced such problem.

Thank you

Understanding The Construction of Orbit / Carousel within CoffeeCup's Foundation Framer ( without slide navigation )

https://www.youtube.com/watch?v=srgGF6-upAs

related pdf file is attached here

Enjoy it

Mansour

Thank you I was able to gain some new info (again) and appreciate you taking the time to make and share this with us.
I like that you take your time and I was able to follow all that you did.

Ray