Problem/Motivation

When creating a sub-theme in 7.x-5.0-rc1, there is a 'vendor' folder inside of the 'scss' folder which contains 'ie.scss', 'pie.scss', and a 'foundation' folder. This 'vendor' folder is no longer present in 7.x-5.0-rc2 (and all the files included inside of it).

I caught onto this because the README.txt file in the STARTER folder said this:

In order to avoid overwriting your customizations in _settings.scss when updating Zurb Foundation, subthemes default to placing the standard Foundation settings in [subtheme-name]/scss/_variables.scss.

If you prefer to do it the standard Foundation way (at your own risk), you can rename _variables.scss to _settings.scss in your subtheme and then load "settings" instead of "variables" in [subtheme-name]/scss/base/_init.scss.

I could not find the _variables.scss file and thought maybe there was a relation between this file no longer existing and the 'vendor' folder also missing? According to this (https://www.drupal.org/node/2415119), Gruntfile.js was changed in rc2.

Has rc2 been refactored to no longer need the 'vendor' folder? And also, why is there no 'variables.scss' file in the sub-theme?

Reason Why (from Comment #13)

ie.scss and pie.scss are not included because the newest version of compass no longer uses pie and foundation 5 dropped support for ie <= version 8 (see http://foundation.zurb.com/docs/compatibility.html ). The theme is now using grunt instead of compass as well, but pie wouldn't have a place either way since it's no longer in compass.

The vendor folder is is the parent theme so that it can updated, if it's included in the sub theme then updating the parent theme will not update the subthemes files, preventing it from using the updates.

The variables.scss is located in the parent theme, and can now be overridden in the subtheme by adding the variables that you need to scss/base/_init.scss, this allows the updates to the parent theme to be pulled into the subtheme. Previously it was all copied into the subtheme, so updating the parent theme had no effect on the subtheme's css.

Remaining tasks

The documentation needs to be updated to reflect these changes, the reasoning and updates should be included.

Comments

trevorkjorlien’s picture

Issue summary: View changes
kevinquillen’s picture

You would be correct. I don't see them either.

It happened in this commit:

http://cgit.drupalcode.org/zurb-foundation/commit/?id=a95fb48c935fd73a66...

Either the READMEs need to be updated as to what and why, or this should be reversed.

kevinquillen’s picture

I can see why this is a problem now. None of the mixins will map right because the import lines are broken paths. To fix this, change your includes to:

@import "../../zurb_foundation/scss/foundation/components/grid";

This will reference the parent theme SCSS - since you should not be editing vendor level SCSS anyway. As for the other file, I am not sure what happened to that. This should be corrected ASAP.

kevinquillen’s picture

Priority: Normal » Major
tk421jag’s picture

I can confirm that #3 works. Changing all paths in to "../../zurb_foundation/scss/foundation/components/" in your STARTER.scss file will fix the issue.

kevinquillen’s picture

I've updated the STARTER.scss file to have correct pathing and updated the README.txt.

kevinquillen’s picture

Status: Active » Fixed
Bcwald’s picture

I see the updated STARTER.scss but when you build a subtheme using drush FST, the MYTHEME.scss file it creates does not give the correct path still. The subtheme should relate back to the base theme zurb_foundation folder correct?

kevinquillen’s picture

Yes, if it copies over STARTER.scss it should reference like:

"../../zurb_foundation/scss/foundation/components"

What is the path to your theme?

kevinquillen’s picture

I just tried this. When you drush fst, the STARTER theme should be copied and written into sites/*/themes, with the SCSS paths resolving correctly. How is your sites directory setup?

Bcwald’s picture

My setup is a bit different because its a profile build.

/profile/df/theme/contrib
and the sub theme should be:
/profile/df/themes/cusotm

I tried it as a standard method and it works ok. I know I need to change some paths to make it work (../../contrib/) but I think I must be missing some. I changed all the scss paths from THEME.scss and in the grunt file the base theme location. am I missing any? js path set somewhere?

Bcwald’s picture

Ok I found the issue, by default when you create a FST it makes the var base_theme_path = '../zurb-foundation'; in the Gruntfile.js.
But when I pull down the code the directory is zurb_foundation. This project has very confusing conventions for - and _.

Changing it to var base_theme_path = '../zurb_foundation';fixed my issue when the grunt task pulling in the proper css/js

kevinquillen’s picture

Yeah. This is what I figured may happen. The - and _ issue is rooted in the original project name and as such, the git object in the repo being zurb-foundation.git. Not something I have the power to change, it is relayed to the d.o admins.

Secondly, this is why I had Bower copying in the vendor assets to STARTER or subtheme via Gruntfile.js - because we can't guarantee the path of the parent theme or sub theme. They could be anywhere.

Perhaps the best course of action is updating the drush command to overwrite these paths in these files to the best of its ability, and correct the zurb-foundation if it exists in the Gruntfile.

kevinquillen’s picture

Version: 7.x-5.0-rc2 » 7.x-5.0-rc5
kevinquillen’s picture

Version: 7.x-5.0-rc5 » 7.x-5.x-dev
Bcwald’s picture

Yeah I was able to normalize this in my make script by adding:

projects[zurb-foundation][directory_name] = "zurb_foundation"
kevinquillen’s picture

Status: Fixed » Needs work
kevinquillen’s picture

Just committed this to dev:

  // Replace zurb-foundation to zurb_foundation in Gruntfile.js
  drush_op('zurb_foundation_file_str_replace', "$subtheme_path/Gruntfile.js", 'zurb-foundation', "zurb_foundation");

I tested this by changing STARTER back to zurb-foundation and generating themes with FST. In my themes, the base_theme_name was set correctly to zurb_foundation.

It may be best to note this in the README for specialized instances like being part of a profile.

kevinquillen’s picture

Status: Needs work » Needs review
Bcwald’s picture

This method worked for my set up.

kevinquillen’s picture

Status: Needs review » Closed (fixed)
iStryker’s picture

Status: Closed (fixed) » Active

No this is not fixed. Had RC5, downloaded RC6 (with the suppose fix). Ran 'drush fst custom_zurb' and there is not vendor folder.

iStryker’s picture

TODO:

  1. Update Summary of this issue with desire results - it is confusing when you read the summary, you assume the files were added back. Especially when you do not make any changes to the RC6 release notes.
  2. Add ie.scss and pie.scss - I do not see them in the STARTERS theme, nor do I see them in the base theme.
  3. Add Vendor folder back. If not say why and point to commits
  4. Give reason why the variables.scss was removed. Question was asked in the summary. Some commented about the is a workaround added in the README.txt but does not explain why.

HELPFUL TIPS:

  • Add links to commits in comments. If you tag a commit with the issue # then the link gets added as a comment.
  • How come this issue went to Needs Review to Closed (fixed). This is bad technique. It should have went to Fixed with reference to the commit.
FiLeVeR10’s picture

@iStryker

ie.scss and pie.scss are not included because the newest version of compass no longer uses pie and foundation 5 dropped support for ie <= version 8 (see http://foundation.zurb.com/docs/compatibility.html ). The theme is now using grunt instead of compass as well, but pie wouldn't have a place either way since it's no longer in compass.

The vendor folder is is the parent theme so that it can updated, if it's included in the sub theme then updating the parent theme will not update the subthemes files, preventing it from using the updates.

The variables.scss is located in the parent theme, and can now be overridden in the subtheme by adding the variables that you need to scss/base/_init.scss, this allows the updates to the parent theme to be pulled into the subtheme. Previously it was all copied into the subtheme, so updating the parent theme had no effect on the subtheme's css.

The documentation needs to be updated to reflect these changes, the reasoning and updates should be included.

jweedman’s picture

@FiLeVeR10 comment #24:

Thanks for a great explanation. Completely makes sense that updating the vendor folder requires it to be in the parent theme. I was running into trouble by trying to override variables in my own custom scss component file. Tested it and it seems that putting those variables in the base/_init.scss file compiles it correctly. Also, great information about ie, pie, grunt & compass.

iStryker’s picture

Issue summary: View changes

Yes #13 Explainion is great. I think we can close this issue once we update the documentation. Updated Issue Summary.

lebernd’s picture

It works great and thank you for the explanation.

I would suggest to put comments on that in the _init.scss file. I began searching a _settings.scss file as from the framework-git and ended up here an hour or two later... Or even in the documentation?

(by the way, it's my first comment - I hope that I more or less matched the topic).

oh, I just have read the last post - So I just vote for a place in the docs...

NiklasBr’s picture

Just like @lebernd it took me quite a while to understand this and why it was like this. A comment about this in STARTER.scss or _init.scss would be great!