Tips and Tricks - Page 1 - Post ID...

User 103173 Photo


VP of Software Development
0 posts

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.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 38185 Photo


Ambassador
25 posts

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!
User 2088758 Photo


Senior Advisor
3,086 posts

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.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

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.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 166871 Photo


Registered User
185 posts

Steve
Very helpful tip thanks
Tom
Vista Tom


User 2840763 Photo


Registered User
4 posts

How can I access the raw css?
User 2484360 Photo


Registered User
3,293 posts

GB Stinson wrote:
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.
User 434929 Photo


Ambassador
938 posts

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
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

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 :)
Attachments:
Guys at coffeecup are awesometacular.
User 2765857 Photo


Registered User
614 posts

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


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
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.