Suggestions for Foundation Framer -...

Feb 4th, 2017 at 04:30 AM
User 2844004 Photo

rvanheukelum
Registered User
225 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
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS Ventura 13.0
Feb 5th, 2017 at 07:44 AM
User 434929 Photo

Mansour ...
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.
Feb 5th, 2017 at 08:25 AM
User 122279 Photo

Inger
Senior Advisor
14,192 posts
Online Now

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
Feb 5th, 2017 at 10:43 AM
User 434929 Photo

Mansour ...
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.
Feb 5th, 2017 at 10:44 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,379 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
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Feb 5th, 2017 at 11:00 AM
User 122279 Photo

Inger
Senior Advisor
14,192 posts
Online Now

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
Feb 5th, 2017 at 11:24 AM
User 2844004 Photo

rvanheukelum
Registered User
225 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
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS Ventura 13.0
Feb 5th, 2017 at 11:44 AM
User 434929 Photo

Mansour ...
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.
Feb 15th, 2017 at 08:08 PM
User 2846109 Photo

Jeff
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)
Feb 15th, 2017 at 08:12 PM
User 103173 Photo

Scott Swedorski
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.