I just created a sub theme for zurb foundation 6 on drupal 8, and reading the docs it tells me to do a npm install and a npm bower

When doing a npm install I get the following errors:

enter image description here

I fixed that by figuring out how to update npm and node and that solved that issue. Now I have to install bower and do a bower install.

My question is: Do I have to install all these things in order to setup foundation to work? I prefer not to use SASS as I work in a team of devs and sometimes the backend dev goes in to edit the css files without knowing that they have to first turn on a sass compiler before doing that.

  • It looks like the starter kit requires the build tools, yes. Or I guess you could just copy and reference each of the CSS files from the base theme that you need, but it feels like a lot of extra effort when you can just use it as intended. I'm not sure why the thing with your backend dev is even an issue - tell them where they're going wrong, then they won't get it wrong in future – Clive Jul 27 '16 at 20:13
  • back end dev changes every few months. we have alot of developers. its very annoying to have to retrain these back end devs when making a super simple edit. client: "hey i need this image wider". dev:"fire up a compiler then edit the css files" vs just edit the css file. – Patoshi パトシ Jul 27 '16 at 20:17
  • "Retrain" might be a bit strong, we're just talking about a handful of commands ;) Frankly I'd be more concerned about the fact you're cutting off the fingers of your front end devs, by making them stick to archaic dev methods. If they're not using compiled CSS, and they're not Rain Man, then they're pretty much guaranteed to be working inefficiently – Clive Jul 27 '16 at 20:25
  • I'm working on a freelance project so I know they have random devs come and go sometimes. So I'm trying to make it as easy for them if the day comes where I'm not there anymore and they get some dev that has no idea how a css compiler works. I'm trying to keep it super simple without the need of all these fancy features that supposedly create efficiency but to someone coming into a project half way and having to learn which css compiler is being used its actually more troublesome. I also have my gripes with frontend and all the bells and whistles that only showed up a few years ago. =) – Patoshi パトシ Jul 27 '16 at 20:50

Alternatively, you could simply use the ZURB Foundation theme

Do you like grid systems? How about rapid prototyping? Do you believe in mobile first? Then this theme is for you! Foundation is made by ZURB. This theme implements the Foundation framework for Drupal.


This page helped alot on making a sub theme: http://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/sub_theming/8

It's not exactly related to foundation, but the concepts are the same and instructions are clearer.

  1. Copy over one of the starterkits you have chosen from the ./bootstrap/starterkits directory into the themes directory.
  2. Rename the directory to a unique machine readable name. This is your sub-theme's "machine name". When referring to files inside a sub-theme, they will always start with ./THEMENAME/, where THEMENAME is the machine name of your sub-theme. They will continue to specify the full path to the file or directory inside it. For example, the primary file Drupal uses to determine if a theme exists is: ./THEMENAME/THEMENAME.info.yml.
  3. Rename ./THEMENAME/THEMENAME.starterkit.yml to match ./THEMENAME/THEMENAME.info.yml.
  4. Open ./THEMENAME/THEMENAME.info.yml and change the name, description and any other properties to suite your needs. Make sure to rename the library name as well: - THEMENAME/globalstyling.
  5. Rename the sub-theme configuration files, located at: ./THEMENAME/config/install/THEMENAME.settings.yml and ./THEMENAME/config/schema/THEMENAME.schema.yml.
  6. Open ./THEMENAME/config/schema/THEMENAME.schema.yml and rename - THEMENAME.settings: and 'THEMETITLE settings'

    WARNING: Ensure that the .starterkit suffix is not present on your sub-theme's .info.yml filename. This suffix is simply a stop gap measure to ensure that the bundled starter kit sub-theme cannot be enabled or used directly. This helps people unfamiliar with Drupal avoid modifying the starter kit sub-theme directly and instead forces them to create a new sub-theme to modify.

Enable Your New Sub-theme

In your Drupal site, navigate to admin/appearance and click the Enable and set default link next to your newly created sub-theme. Now that you've enabled your starterkit, please refer to the starterkit's documentation page to customize.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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