0

I installed Foundation 6 into my themes/custom/mytheme folder using foundation new. I get my starter kit, all good and ready to go.

I am not sure which files I need to upload to my host in order for my sites full capabilities.

I track my whole Drupal 8 website using Git.

With the installation of Foundation 6 there comes a .gitignore file. In this .gitignore file it ignores:

bower_components
node_modules
npm-debug.log
css

But when I want to commit my Foundation 6 custom theme to the server I need files inside bower_components folder? Or do I mis something here?

When you look at Foundation 6 example index.html they load:

bower_components/jquery/dist/jquery.js
bower_components/what-input/what-input.js
bower_components/foundation-sites/dist/foundation.js
  1. What do I have to do with the Foundation .gitignore file exactly?
  2. And which javascript files do I have to attach to have a good working Drupal 8 and Foundation 6 theme to start building my theme on?
Improve this question
1
  • I have a custom theme with source scss and js files and i am installing foundation via bower, then compiling the sass and js into single css/js file. I had base foundation theme before(also custom) but it turned out that it was just too limiting in the long run so each theme is its own master now.
    – user21641
    Commented Mar 10, 2016 at 11:14

2 Answers 2

Reset to default
1

The .gitignore file that is downloaded with Foundation 6 is tied to just the Foundation framework - if you're planning to track the whole Drupal site, you can safely delete it and just use the one that comes at the Drupal root.

In the past I've just tracked everything (and committed everything) in the framework up, including the bower_components folder.

My [theme_name].libraries.yml file looks like this: 

global-styling:
  version: 1.x
  css:
    theme:
      stylesheets/fonts/stylesheet.css: {}
      stylesheets/foundation-icons/foundation-icons.css: {}
      stylesheets/app.css: {}
      stylesheets/print.css: { media: print }
  js: 
    bower_components/fastclick/lib/fastclick.js: {}
    bower_components/foundation/js/foundation.min.js: {}
    bower_components/foundation/js/foundation/foundation.topbar.js: {}
    js/app.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

homepage:
  version: 1.x
  js:
    js/jquery-ui-1.11.4.custom/jquery-ui.min.js: {}
    js/wcreek-slider.js: {}

The js is my own theme's js folder, and you can see I'm including some bower_components files. I'm using the default jquery that shipped with Drupal 8, but I'm using Foundation 5. You might want to rather include the version of jquery from the bower_components.

Also I would recommend that you set your Drupal administration theme to be different from your Foundation theme (I usually set it to Seven) so there's no conflict between Foundation and the Drupal admin tools, like views, etc.

You might be able to use jquery_update module to specify a lower version of jquery for the admin theme (I haven't tried this in Drupal 8 yet). This might be needed if you are using the overlay module.

Improve this answer
5
  • thanks but one thing isn't clear to me yet: what's the difference using your method vs using https://www.drupal.org/project/zurb_foundation? Why should you use one against the other?
    – meez
    Commented Mar 16, 2016 at 19:14
  • I don't remember the specifics of why I chose not to use that.. I think it was mainly because I didn't want to have to create a sub-theme. I came into Foundation already comfortable with creating custom themes in Drupal, and it seemed overkill to use what they had set up with this theme. But if it works for you, great. It is using F5, not F6.
    – wheelercreek
    Commented Mar 18, 2016 at 18:48
  • If it helps, here is my tutorial on how I built a Foundation 5 theme in Drupal 8. (All my Drupal 7 sites also used Foundation 5). wheelercreek.com/articles/…
    – wheelercreek
    Commented Mar 18, 2016 at 18:52
  • I post here a new question. I hope you have an answer! Thanks
    – meez
    Commented Apr 19, 2016 at 16:25
  • Here is a new article I wrote with information for using Foundation 6 with Drupal 8. wheelercreek.com/articles/theming-drupal-8-zurb-foundation-6
    – wheelercreek
    Commented May 25, 2016 at 21:30
0

I do not recommend tracking bower_components/node_modules which is why they are in the gitignore file. They can become quite large (100MB or more) and its so easy to bower install / npm install anyway.

If you are using SCSS to theme, the SCSS file should be importing the bower_components assets and building from that. They are not necessary to be tracked in that case. If you are using a CI server, it should do bower install etc to get Foundation and compile the CSS.

The 6.x branch of Foundation for Drupal is available, but it is still largely based on 5.x.

https://www.drupal.org/project/zurb_foundation

You might want to look into starting here, as we have solved some of these issues within Drupal.

In fact, for jQuery, that dependency is ignored per our .bowerrc as Drupal 8 ships with the version of jQuery you would need, so there is no need to load it in the theme.

Improve this answer
6
  • I used Foundation Basic template during installation. 1) But whats not clear to me is: if I ignore bower_components, where does my Foundation theme gets the proper Foundation javascript from? 2) I followed a bit the setup in the answer from @wheelercreek. Why shouldn't you use this method? Because with this method i can fully use Foundation 6 and tweak the Twig template files with new Foundation 6 classes? 3) What do you mean with a CI (command line) server? I commit from local to Acquia Cloud server.
    – meez
    Commented Mar 16, 2016 at 19:05
  • CI is continuous integration, like Jenkins. Some people use build servers / CI servers to build their assets before deploying the code. You are free to do whatever you want, I just strongly recommend against committing those folders. Some do, some don't, and you will find arguments everywhere. In my case, Gulp builds a compressed JS file of all JS in use, and creates one JS file in the theme. You could also add their CDN host instead of use local JS file for foundation.min.js.
    – Kevin
    Commented Mar 16, 2016 at 20:22
  • 1) Does Gulp builds a compressed JS file (of all JS in use) using foundation watch? After I do foundation watch I don't see it somewhere? Where is it and where/which folder do you tell Gulp to place it? Does this also works like this with the Basic template or only with Zurb template? 2) and creates one JS file in the theme > Where which JS file is this? Is this the same JS file? I don't understand what you mean exactly?
    – meez
    Commented Mar 16, 2016 at 20:56
  • sorry do you have an answer so I can setup my custom theme. I just want to make a custom Drupal 8 with Foundation 6 :) I want to continue using this method: in my local repo I use foundation new. I follow your advice .ignore bower_components and node_modules folders (why does Foundation ignore css folder?). And then what is my next step, adding Foundation 6 classes to the template files? And still the JS is not clear to me? If i ignore bower_components folder and I want to use e.g. JS tabs and JS accordion? Where does my theme gets this Javascript from?
    – meez
    Commented Mar 17, 2016 at 9:04
  • sorry do you have an answer on my last comments? Thanks.
    – meez
    Commented Apr 19, 2016 at 8:00

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.