I'm wondering what is the best way to use Foundation elements like Tabs, Slider and Accordion, ...
(See http://foundation.zurb.com/docs/elements.php and http://foundation.zurb.com/docs/tabs.php)

Are there any best practices or tipps of how you are working with these?

I'm building a Drupal master-installation to start all new projects from.
Since december i'm using this wonderfull zurb-foundation implementation as the base theme.
Thank you very much for your work so far!

After setting up the main website structure in page.tpl.php i'm creating individual (node-) panel layouts (using the foundation code) which i'm then connecting to individual nodes / or node-types with panelizer.
So i may come up to panel-layouts for home-, blog-, or product-nodes.

Each node-type has several (content) fields, e.g. content-left, content-right, image-1, teaser-1, etc. which can then be easily placed in the node or node-type specific panel-region by drag and drop. -This works like a charm and saved me hours.

While using this approach i'm looking for an easy way to put a Foundation-element, like an accordion, on a node and keep it maintainable by a "normal" user. As of today, i'm putting the markup-code inside the fields-body, which is not fail-safe for authors.

By writing this, i think a module that works kind of a foundation-field formatter is what i'm looking for:
E.g. you create a new (html-)text-field with n-instances and format this as "Zurb-Foundation Accordion" or "Zurb-Foundation Tabs".

Will this be the "right" approach? What are the alternatives?

Files: 

Comments

When selecting the tags for my post above, i saw "custom formatters".
A quick search on drupal gave me this:

http://drupal.org/project/custom_formatters :-)

As far as i get it, this module allows us to create individual field formatters.
That is fantastic! - It even has a code repository for custom formatters on customformatters.com.

Wouldn't it make sense to create Zurb-Foundation specific field-formatters to ease up the use of the Foundation-elements?

Will a custom, separate module be the better choice? Or can this even be implemented in the theme itself?

Personally I use display suite http://drupal.org/project/ds and add all the foundation classes.

I have not yet re written the display suite templates into using the foundation classes, as I don't use the display suite mullti column templates that often.

I use display suite a lot anyways so this just fit in my workflow.

Just discovered this project as well. This allows you to add css to your fields:
http://drupal.org/project/field_formatter_css_class

Status:Active» Fixed

Zurb-Foundation specific field-formatters to ease up the use of the Foundation-elements?

Besides the great suggestions from chrisjlee and micheas you could use the Fences module or make use of preprocessing in your sub-theming. Using preprocessing I have implemented Foundation Tabs and Accordion with a couple lines in the template.php or in a node template. Also you could use a couple views templates to implement Orbit or the Accordion. I have used both approaches to get Foundation elements to work.

Will a custom, separate module be the better choice? Or can this even be implemented in the theme itself?

Some Drupal contributors have already started to do this, see http://drupal.org/project/joyride, http://drupal.org/project/field_orbit, http://drupal.org/sandbox/dchronos/1309206. However, I don't plan to put any module dependencies on this theme and things can be implemented at the theme level without having to use a module.

Just to let you know:

Another way to use ZURB Foundation elements is, of course, to use views.

This is in brief what i did to use the reveal modals from ZURB using views.
On one project I had to open six+ different modals on one page.
The content of this modals had to be edited via a wysiwyg editor and were quite "complex", so i decided to create a node for each modal.

1.) I created a node-type called modals

2.) Then i created a view to collect the desired modals (display style: unformatted)

3.) Then i altered the views template for my view and the unformatted display
(See attached file, this has to be copied in the root of your template folder AND has to be renamed to match your view name)

4.) Edit your view and rescan the template files to have your view recognize there is a new template file to use
(View > Edit > Theme: Information > Rescan template files)

5.) Output the view on the desired page and create a link to open the modal.
(See ZURB Docs, IDs are myModal0, myModal1, ...)

This is only usefull if it is ok to have the content of each element, e.g. Accordion Tab content or Modal content, split across several nodes.

I'm still working on the custom formatters and will let you know about the progress.

ups, here is the attachment. (Please delete the .txt extension before using)

@sweenyy thanks for your note and posting the file. I guess when I said templating I assumed you knew you could use views templating. Also if you read #4

Also you could use a couple views templates to implement Orbit or the Accordion

If people interested in using clearing, check out #1902710: Clearing Gallery with Views there is a example view and template file.

Hi all. I made module for views integration, currently orbit slider supported. If you want, please help review :)

https://drupal.org/node/1914332

Woohaa :-) Nice one, drupik. Keep it up, it would be fantastic to have the zurb elements usable in views without messing with the view-templates.

As soon as i have my custom formatters for the zurb-elements-by-field approach, i'll post it here.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Thanks sweeneyy!
it would be great to see custom formatters.

Now views_foundation is a full project, waiting for suggestions ;)

Has anyone tried incorporating Skinr? Seems like it'd be a perfect fit for something like this. I envision Foundation 4 + Skinr being for D7+ what Fusion + Skinr was for D6 - i.e. the ultimate combo. I'm considering creating some 'skins' to incorporate the Foundation 4 elements. Has anyone else made any attempts? Any ideas / suggestions? Interested in collaborating?