Suggestions for Foundation Framer -...

User 2844004 Photo


Registered User
223 posts

One minor cosmetic thing that catches my eye ...
see how list-items are closed differently for plain unordered lists and link lists.

<ul class="unorder-list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
</ul>

The </li> closing tags are all at the end of each line.

<ul class="link-list">
<li class="list-item-link"><a href="#">Link 1</a>
</li>
<li class="list-item-link"><a href="#">Link 2</a>
</li>
<li class="list-item-link"><a href="#">Link 3</a>
</li>
<li class="list-item-link"><a href="#">Link 4</a>
</li>
</ul>

Now the </li> closing tags are all moved to the next line. It would be nice (clean code) if the </li> closing tag was at the end of each line.

– Richard
Ontwerpzaam | Papendrecht, The Netherlands
27" iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM - macOS 10.12.6 Sierra
Switched from Softpress' Freeway to Coffeecup Responsive Design software
User 434929 Photo


Ambassador
938 posts

rvanheukelum wrote:
But no ... even though it might look the same, these 'link containers' don't work for me.
This is what I get:

<ul class="list-container">
<li class="list-item-container">
<a class="link-text" href="#">list item 1</a>
<ul class="list-container vertical menu">
<li class="list-item-container">
<a class="link-text" href="#">sublist item 1.1</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">sublist item 1.1</a>
</li>
</ul>
</li>
<li class="list-item-container">
<a class="link-text" href="#">list item 2</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">list item 3</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">list item 4</a>
</li>
</ul>


Too much clutter, I'll have to remove all classes and clean up the code to get to where I need to be. This is what I'm stiving for:

<ul class="custom">
<li><a href="#">list item 1</a>
<ul class="custom">
<li><a href="#">sublist item 1.1</a></li>
<li><a href="#">sublist item 1.1</a></li>
</ul>
</li>
<li><a href="#">list item 2</a></li>
<li><a href="#">list item 3</a></li>
<li><a href="#">list item 4</a></li>
</ul>


A plain (link) list with a nested (link) list.

I'll have to insert a simple list like this by inserting raw code into an </>HTML element? Just because it contains a nested list? If I'm not missing something here, RFF is. Look how Freeway7 handles this in an intuitive way, this might just be one option to handle this.

– Richard

http://codepen.io/rvanheukelum/pen/GrdZPr


I have made Navigation with submenu without foundation classes

Have a look at sample / I used List Container Element

Attachments:
Guys at coffeecup are awesometacular.
User 122279 Photo


Senior Advisor
13,880 posts

Mansour, that menu you made doesn't show the submenus when I preview it.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 434929 Photo


Ambassador
938 posts

Exported folder which i provide it should work . After export i added single line of CSS code to CSS file.

I will check and update again. Now away from my station.
Guys at coffeecup are awesometacular.
User 2699991 Photo


Registered User
3,911 posts
Online Now

Inger wrote:
Mansour, that menu you made doesn't show the submenus when I preview it.


Inger because you have to add the code to resources (custom css) to make it work.

I have made a RESPONSIVE Dropdown menu (with submenus) in FF if that would be any use
DO IT FOR SOMEONE AND THEY NEVER LEARN

TEACH SOMEONE AND THEY MIGHT LEARN

SHOW SOMEONE AND THEY WILL LEARN

INVOLVE SOMEONE AND THEY WILL LEARN TO UNDERSTAND.

WELCOME TO WAYAN'S WORLD OF UNDERSTANDING
Watch Listen & Learn Video Tutorials
The Help You Need: When You Need It The Most
Website Design & Development
User 122279 Photo


Senior Advisor
13,880 posts

You're right! I thought I opened the exported version, but it was the rbb file :o

Mansour, all well! I was wrong...

And Wayan, I'd like to lay my hands on that responsive dropdown menu of yours ;) May I?
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2844004 Photo


Registered User
223 posts

Wayan Jaya wrote:
I have made a RESPONSIVE Dropdown menu (with submenus) in FF if that would be any use

Well yes ... I'm interested in all resources you (all) provide here; I'm still learning and improving my RFF skill set :)

So yes, please :)

– Richard
Ontwerpzaam | Papendrecht, The Netherlands
27" iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM - macOS 10.12.6 Sierra
Switched from Softpress' Freeway to Coffeecup Responsive Design software
User 434929 Photo


Ambassador
938 posts

Inger wrote:
You're right! I thought I opened the exported version, but it was the rbb file :o

Mansour, all well! I was wrong...

And Wayan, I'd like to lay my hands on that responsive dropdown menu of yours ;) May I?


I already checked it should work and;

Change from this following custom code

.column-1:hover .ui-submenu {
display: block;
}

To this
.li.list-item-container.li:hover .ui-submenu {
display: block;
}

sould work even better.
Guys at coffeecup are awesometacular.
User 2846109 Photo


Ambassador
341 posts

In the latest version v2 323 it has the 'toggle breakpoins' button.

The "Actions > Modes" should probably be updated to: "Actions > Toggle Breakpoins" to match now.

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 103173 Photo


VP of Software Development
0 posts

Jeff wrote:
In the latest version v2 323 it has the 'toggle breakpoins' button.

The "Actions > Modes" should probably be updated to: "Actions > Toggle Breakpoins" to match now.


Good catch! Will get that fixed in the next release. ;)
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.

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.