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?

Members fund testing for the Drupal project. Drupal Association Learn more


Knarf31’s picture

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?

micheas’s picture

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.

chrisjlee’s picture

Just discovered this project as well. This allows you to add css to your fields:

ishmael-sanchez’s picture

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.

Knarf31’s picture

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.

Knarf31’s picture

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

ishmael-sanchez’s picture

@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.

drupik’s picture

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


Knarf31’s picture

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.

drupik’s picture

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

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

paskainos’s picture

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?

fourmi4x’s picture

@paskainos : I also thought of that combination, particularly to add custom foundation classes to blocks.
I just tested it on blocks and nodes : it works very well so far!

All you have to do is to install Skinr, and go to Structure > Skinr to create your blocks skins and add your custom foundation classes :)