4

I'm trying to add Zurb Foundation framework to my theme library file. However, when I add the following code to my library, I'm not getting any result.

I would be grateful to hear what is the problem with the code and what is the right way to load a library?

This is my theme folder structure (Zurb Foundation folder location):

|-Theme Name
|  |-includes
|  |  |-foundation
|  |  |  |-css
|  |  |  |-js

Library file:

foundation:
  version: 6.x
  css:
    includes/foundation/css/app.css: {}
    includes/foundation/css/foundation.css: {}
    includes/foundation/css/foundation.min.css: {}
  js:
    includes/foundation/js/app.js: {}
    includes/foundation/js/foundation.js: {}
    includes/foundation/js/foundation.min.js: {}
    includes/foundation/js/jquery.js: {}
    includes/foundation/js/what-input.js: {}
Improve this question

1 Answer 1

Reset to default
5

You created the library, alright, but you need to call the library.

In [theme_name].info.yml add the following:

libraries:
  - '[theme_name]/foundation'

Also you need to modify your [theme_name].libraries.yml file and add dependencies:

foundation:
  version: 6.x
  css:
    base:
      includes/foundation/css/app.css: {}
      includes/foundation/css/foundation.css: {}
      includes/foundation/css/foundation.min.css: {}
  js:
    includes/foundation/js/app.js: {}
    includes/foundation‌​/js/jquery.js: {}
    includes/foundation/js/foundation.js: {}
    includes/foundation/js/foundation.min.js: {}
    includes/foundation/js/what-input.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

As per Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

Improve this answer
9
  • Thanks for taking the time to help out - I appreciate it greatly! But with this method the css files seem not be loaded.
    – Mojtaba Reyhani
    Commented Aug 5, 2016 at 21:54
  • Did you flush cache?
    – No Sssweat
    Commented Aug 6, 2016 at 0:04
  • Yes, Even for several time.
    – Mojtaba Reyhani
    Commented Aug 6, 2016 at 0:09
  • go to performance and uncheckmark aggregate CSS and JS boxes, then view page source with your browser and see what is getting loaded.
    – No Sssweat
    Commented Aug 6, 2016 at 0:11
  • I have done that steps but Nothing has changed.
    – Mojtaba Reyhani
    Commented Aug 6, 2016 at 0:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.