Using Wayfinder w/Zurb Foundation Navigation

48 Posts

scottmccullough Reply #1, 13 years, 4 months ago

I am using the Zurb Foundation (v4) framework to develop some responsive web page templates for modx. I am specifically using the top-nav drop-down css. Has anyone had any experience incorporating wayfinder? I've tried, but I'm not getting consistent results.

Thanks
SAM

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 13 years, 4 months ago

This works with the top-bar from Foundation3 rather nicely. All you may need to change are the row classes to make it work with Foundation4, I believe.

<div class="row">
		  <div class="fixed contain-to-grid">
			  <nav class="top-bar">
				  [[Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerClass=`has-dropdown` &innerClass=`dropdown` &parentClass=`has-dropdown`]]
			  </nav>
		  </div>
	  </div>

The chunks:

rowTpl

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

innerTpl

<!-- innerTpl -->
<ul class="nav nav-list [[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

edit: had an extra chunk in there, it's gone now. using the classnames in the call does the trick. [ed. note: frogabog last edited this post 13 years, 4 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

353 Posts

pepebe Reply #3, 13 years, 4 months ago

Im working on a foundation based MODX boilerplate.

Have a look at my test site: http://foundation.pepebe.modxcloud.com/foundation/navigation/topbar.html

On top of resource links it can display navigation headers as well as separator lines (both are resources in the tree).

If this is what you are looking for, I can help you.

As there is a lot of stuff to explain, I cannot post all chunks and snippets I used for this navigation.

If you are a modxcloud user, I can send you the whole package. If not, get a free laboratory account at https://modxcloud.com/

Im not sure if I can send clouds to laboratory users, but if this is not possible, I can still send you a dump.

Regards,

pepebe

P.S. There is also a flexible grid system in progress. The result can be seen here:

http://foundation.pepebe.modxcloud.com/foundation/grid/grid/example/

It can handle all foundation grid options (width-small, width-large, offset-small, offset-large, pull, push) as well as a variety of column types (pageheader, simple text, subheader, automatic anchor navigation, images with reveal).
[ed. note: pepebe last edited this post 13 years, 4 months ago.]

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 13 years, 4 months ago

Pepebe,

I'd be very interested in seeing your work. You can push it to me at frogabog if you like. I dumped a Foundation project and used bootstrap recently, largely due to the menu issues and the pesky "has-dropdown" showing up on containers with hidden resources. I'd love to see how you figured it out.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

353 Posts

pepebe Reply #5, 13 years, 4 months ago

Quote from: frogabog at May 15, 2013, 03:55 AM

Pepebe,

I'd be very interested in seeing your work. You can push it to me at frogabog if you like. I dumped a Foundation project and used bootstrap recently, largely due to the menu issues and the pesky "has-dropdown" showing up on containers with hidden resources. I'd love to see how you figured it out.

I've send my foundation test cloud to frogabog. I've never done that before, so PM me, if it didn't work out.

If you have questions we can Skype or GoogleVoice Talk. I'll PM you the contact details.

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

☆ A M B ☆
1,780 Posts

Frogabog Reply #6, 13 years, 4 months ago

It worked, although I forgot frogabog is the beta account. Although that means pushing to beta (or free) works just fine. frogabogcloud is the paid cloud, should have asked for that one, but then no answer about the free account, eh?

Thanks much, I'll take a peek at it soon.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

353 Posts

pepebe Reply #7, 13 years, 4 months ago

Quote from: frogabog at May 15, 2013, 04:49 AM

It worked, although I forgot frogabog is the beta account. Although that means pushing to beta (or free) works just fine. frogabogcloud is the paid cloud, should have asked for that one, but then no answer about the free account, eh?

Thanks much, I'll take a peek at it soon.

So should I push it toward the paid account or can you push it yourself (don't know the restrictions of the beta)?

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

☆ A M B ☆
73 Posts

Darren E Reply #8, 13 years, 4 months ago

We use Foundation V4 for our sites. However, we ONLY use it for the grid system. We use other responsive ideas and concepts we find on the Internet that work great for our needs. (I do love that MODX doesn't care. Use what you want - where you want - how you want!)

Are you using the SCSS version or the standard version of Zurb Foundation? I have not used the Foundation Add-On as I'm afraid it might have stuff we don't want/need pre-installed. [ed. note: adagency last edited this post 13 years, 4 months ago.]

Woodlands Ad Agency
Our blog should NOT be read by anyone....EVER http://woodlandsadagency.com/blog/
...Don't say we didn't warn you.

353 Posts

pepebe Reply #9, 13 years, 4 months ago

Quote from: adagency at May 16, 2013, 10:54 AM

Are you using the SCSS version or the standard version of Zurb Foundation? I have not used the Foundation Add-On as I'm afraid it might have stuff we don't want/need pre-installed.

If this question was aimed at me, the answer is no. I just downloaded the vanilla foundation package from zurb and setup some chunks and snippets to fit my needs. They should work with any foundation based template as long as you change a few classes here and there.

The site is not officially online and just a testfield for some ideas. Given the time I will add some documentation and codesnippets to the page. I'll post updates here as soon as they are available.

My Gridsystem is based on resources for rows and children resources for columns. Each column resource can have its own template therefore it is easy to create all kind of content types (galeries, images with caption, etc). The technique might not fit to every project but it is very easy to handle.

Regarding SCSS. I'd love to see a SCSS precompiler working with MODX but as far as I know, we only have lessPHP Plugin. The best thing would be to have ruby and compass serving scss. Unfortunatly this is not available in our beloved modxcloud. sad

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

☆ A M B ☆
73 Posts

Darren E Reply #10, 13 years, 4 months ago

Quote from: pepebe at May 16, 2013, 11:33 AM

My Gridsystem is based on resources for rows and children resources for columns. Each column resource can have its own template therefore it is easy to create all kind of content types (galeries, images with caption, etc). The technique might not fit to every project but it is very easy to handle.

That's smart!

Woodlands Ad Agency
Our blog should NOT be read by anyone....EVER http://woodlandsadagency.com/blog/
...Don't say we didn't warn you.