Suggestions for Foundation Framer -...

User 2840763 Photo


Registered User
4 posts

I love the concept of this software, but the difficulty in selecting elements while designing visually is driving me crazy! Not being able to differentiate between nested elements (because the visual display in the editor places their borders on each other) makes it really difficult to select and work with. Maybe add a "Expand' display button to put a one or two pixel space around the elements in the design window so they can be easily selected.

This video created by Mansour illustrates the same problem from a slightly different perspective.
https://www.youtube.com/watch?v=K0LzsUoJAig
I think this would make it much better for everyone.
User 2846109 Photo


Ambassador
341 posts

GB Stinson wrote:
I love the concept of this software, but the difficulty in selecting elements while designing visually is driving me crazy! Not being able to differentiate between nested elements (because the visual display in the editor places their borders on each other) makes it really difficult to select and work with. Maybe add a "Expand' display button to put a one or two pixel space around the elements in the design window so they can be easily selected.

This video created by Mansour illustrates the same problem from a slightly different perspective.
https://www.youtube.com/watch?v=K0LzsUoJAig
I think this would make it much better for everyone.


I don't mind too much having to click on the name of an item to bring up the drop down menu to have to select some items that are nested inside each other but one thing that would make selecting much visually clearer for me would be after an item is selected it remains highlighted even if you hover over another item. Right now you can have an item selected while a completely different item is highlighted which makes the process confusing and one can easily be confused as to which item is actually selected.

One way to possible handle this would be to have selected items remain highlighted and also have items that you hover over temporarily highlight. This is the way that (can we say this here?) Webflow handles selections and it seems to work fairly well.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

It would be great to see some instructional videos for RFF eventually either on YT or Vimeo. I think they will really help people find out about the software but also help people get up to speed on using it. Even if there were just a few covering the basic features and then possibly covering the building of a basic single page site.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 232214 Photo


COO
827 posts

The absolute best way of selecting elements and viewing the (nested) content structure is using the DOM tree on the Inspector pane. Here are some of the reasons:

— It shows elements that might be hidden (at a breakpoint) and allows you to temporarily make the element visible,
— It shows additional information about the element such as dimensions, selector in the preview window (and the CSS — collapsed in the screenshot below),
— It allows you to select elements that are behind other elements (for example when using an absolute positioned container overlay — you see how that works in this tip (second image - a theme with this will come your way soon too))
— When a different element is selected it is automagically scrolled to in the preview window,
— It is easy to reorder elements or adding elements to a container using drag & drop right in the tree,
— In case you want to edit styles simply double click and the design pane for that element is brought up.

Try visiting it on a regular basis using the keyboard (cmd-5 on OS X), after a while it will be really easy and fast to go there and it will be a great help :)

http://framer.coffeecup.com/storage/misc%2Dassets/inspector-selection.png
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 232214 Photo


COO
827 posts

Videos are in the works btw :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2681734 Photo


Registered User
8 posts

Bob Visser wrote:
Videos are in the works btw :P

Can't wait - and as much as I prefer the (usually) higher quality experience on Vimeo, I also think posting them on YouTube is handy too since there's better speed controls (1.5x etc). Unless someone has a way to control speed on Vimeo. thanks!
User 2844004 Photo


Registered User
225 posts

Please collect media/images in a separate folder, just like css and js files. Images now populate my root folder, and I find that a major pet peeve.

–Richard
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + 2x LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS 14.3 Sonoma
User 103173 Photo


VP of Software Development
0 posts

rvanheukelum wrote:
Please collect media/images in a separate folder, just like css and js files. Images now populate my root folder, and I find that a major pet peeve.

–Richard

You have control over that now under the Resources. You can select where these types of files reside.
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 2844004 Photo


Registered User
225 posts

Scott Swedorski wrote:
rvanheukelum wrote:
Please collect media/images in a separate folder, just like css and js files. Images now populate my root folder, and I find that a major pet peeve.

–Richard

You have control over that now under the Resources. You can select where these types of files reside.


Wow, I didn't realise (it works like) that. And the way it's set up it's even more sophisticated than I imagined. Thank you Scott!

–Richard
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + 2x LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS 14.3 Sonoma
User 2846109 Photo


Ambassador
341 posts

Suggestion to add a "New Solid" button to the "Background" section. So we would have a:
New Image
New Gradient
New Solid
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

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.