ZURB Foundation Sites (Library)

Provides ZURB Foundation sites libraries as module to be used as a dependency of ZURB Foundation modules & themes.

Use this module if

• You're using a module with this dependency
• You're maintaining or creating a ZURB Foundation based module or theme
• Need ZURB Foundation sites in your project and would like to include ZURB Foundation libraries (see "Custom use")

Installation

Install this module like any other, see this documentation.

Composer

This is the recommended way of installation!
Ensure you are using the asset-packagist repository:

"repositories": [
[...]
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
[...]
]

See https://www.drupal.org/docs/develop/using-composer/manage-dependencies#t...

Then simply run composer with the following command:

composer require drupal/foundation_sites npm-asset/foundation-sites npm-asset/motion-ui

Hint: We suggest the npm-asset version and NOT zurb/foundation because the installer-path for the composer package can't be set to libraries easily, while nom-assets are typically installed to the "libraries" folder.

Also we currently can't add these two npm-asset libraries as real composer.json dependencies as npm-asset is a custom respository. This would cause a composer error in tests. That's why they are added only as suggestions.

Manual

Download and unpack ZURB Foundation Sites from Github:
https://github.com/zurb/foundation-sites (Download version 6.5.1 as zip here)
so that the final folder structure is: libraries/foundation-sites/dist/... (this is the only required folder).

Do the same for Foundation motion-ui, which is also required.

Important: The generated folder structure on https://foundation.zurb.com/sites/download.html/ is DIFFERENT and currently unsupported by the way we load plugins separately! We like to use the composer / npm / ... package folder structure instead, which is based on GitHub!

Custom use (attaching library)

If you want to use the defined libraries individually, you can simply load them like described here: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets... this way:

In PHP:

$build['#attached']['library'][] = 'foundation_sites/core';
$build['#attached']['library'][] = 'foundation_sites/accordion';

In twig:

{{ attach_library('foundation_sites/core') }}{{ attach_library('foundation_sites/accordion') }}

You can load all plugins individually:

foundation_sites/responsiveAccordionTabs
foundation_sites/slider
...

• For technical details, see foundation_sites.library.yml in the module.
• foundation_sites/core is a dependency of all other plugins, so you don't have to load it manually when using a plugin.

Overriding / extending / removing library contents

This is possible using the amazing Drupal 8 libraries concept, see https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets... for examples.

Integrations

Used in these modules

• Views Accordion Foundation

Used in these themes

• NOT YET in ZURB Foundation Theme (see #3025313: Outsource foundation libraries into common module dependency?

Development proudly sponsored by German Drupal Friends & Companies:

webks: websolutions kept simple (https://www.webks.de)
and
DROWL: Drupalbasierte Lösungen aus Ostwestfalen-Lippe (OWL), Germany (https://www.drowl.de)