Since the Drupal8 and Zurb Foundation 6 was released on the same day 19th November 2015, we should target to built the Drupal 8 theme based on Zurb Foundation 6. There are whole lot of goodies included in ZF6 and also have eliminated bloated code.

Read more about ZF6 here:- http://foundation.zurb.com/sites.html

CommentFileSizeAuthor
#32 zurb_foundation-zf6_topbar-2621416.patch2.01 KBjo.st
#28 zurb_foundation-2621416-28.patch8.26 KBAnonymous (not verified)
#24 zurb_foundation-2621416-23.patch1.92 MBAnonymous (not verified)
#19 zurb_foundation-zf6_for_d8-2621416-19-8.x.patch2.3 MBAnonymous (not verified)
#16 zurb_foundation-zf6_for_d8_improvements-2621416-16-8.x.patch2.05 MBAnonymous (not verified)
#4 zurb_foundation-2621416-3-8.x-6.x.patch1.52 MBAnonymous (not verified)
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Anonymous’s picture

rajibmp created an issue. See original summary.

Anonymous’s picture

The last two days i was working on that. Tried to make a theme from scratch.
Never did it before. I only made one Drupal site in Drupal 7. Back then i used the bootstrap theme and a bootstrap subtheme. I'm really interested to get foundation 6 up and running.

Maybe we can share some code. Don't know how to do that. The twig language for themeing is also new for me.
So how we can start this? :)

PI_Ron’s picture

Interested in this development too!

Anonymous’s picture

Hi,

I have started the new branch called 8.x-6.x reflecting the Drupal and Zurb Foundation versions respectively.

I have made changes in the files that ZF provides for its design like scss, js, css, etc.

I also made changes in the libraries.yml file to reflect the changes.

I removed some vendor JavaScript files from the Theme's library like jQuery.cookie, modernizr which are not needed separately in theme as Drupal 8 already uses those libraries by default and is loaded.

Here I attach the patch, if you could review it or start a new branch from D8ZF6 then I'll try to contribute more to port this theme to Drupal 8.

Anonymous’s picture

Category: Plan » Feature request
Status: Active » Needs review

Asking for Theme Developer and others to review and lets get this development for latest thing going.

samuel.mortenson’s picture

Does anyone know how much/what markup changed in Foundation 6? Changing the version of Foundation is easy but modifying the existing theme hooks and templates will take some time.

@marcel-epp See https://www.drupal.org/novice for instructions on how Drupal.org contribution usually works out. Any patches in this issue will need to be created off of the 8.x-5.x branch, please don't start from scratch. ;)

@rajibmp Thanks! We'll need to review our markup as well before committing anything, in addition to probably doing another beta release to 8.x-5.x.

Anonymous’s picture

There are lots of markup changes, specially addition of WAI ARIA for helping visually impaired to surf the site, but the main classes and process remains identical to 5.

huma2000’s picture

Just wondering, as I am developing currently a theme based on foundation 8.x-5.0... how hard do you think will be adapting it to the new foundation?
Also as I have to start the theme for another website I will be more than happy to betatest the new branch once you start to get it working.

Spechal’s picture

Looking to do a Foundation 6 + Drupal 8 theme too. What can I do to help? Can the owner of the project make a 8.x-6.x branch please?

samuel.mortenson’s picture

I plan to do the release next week, I need to review things first as there is likely more here than just updating the CSS/JS.

huma2000’s picture

Great. looking forward to it!

samuel.mortenson’s picture

Status: Needs review » Needs work

Zurb hasn't added updated their npm or bower packages for Foundation 6, and we cannot move forward on this until that happens. I'm not sure how the patch was created, but I assume that directories were copied directly from the Foundation development repository. Given the way we compile our JS/CSS, applying the patch then running "bower install && grunt" will wipe any Foundation 6 changes.

In short: bower.json and Gruntfile.js must be updated to work with Foundation 6, we can't just copy the new distributed files in.

I've opened an issue in their main repository about this, which you can track here: https://github.com/zurb/foundation-sites/issues/7302

Once I hear back from the Zurb team I'll either wait for https://github.com/zurb/bower-foundation to be updated, or I'll edit the bower/grunt configuration to work with https://github.com/zurb/foundation-sites.

discipolo’s picture

i took the 6.x branch patch on top of 5.x for a spin, changed to foundation-sites and looking good so far.

samuel.mortenson’s picture

Just pushed an initial commit of 8.x-6.x. The patch in this issue does not include grunt/bower or required libraries.yml changes, so please do not use that as you test new features. Things I know are broken and I am going to follow up on:

  1. Top Bar doesn't exist in Foundation 6, we have to duplicate its functionality (see http://foundation.zurb.com/forum/posts/36228-foundation-6-topbar-like-f5)
  2. The STARTER theme's SCSS will not compile, too many files have changed in Foundation 6.
  3. All other templates and preprocess functions need to be reviewed and tested.

Any incremental patches are welcome. I'm not making an official release on 8.x-6.x until we know it's stable-ish.

Anonymous’s picture

Good to see the progress and new branch for ZF6, I moved on top of my patch and created a module based on it, but I edited lots of things for personalization which is not suitable to add here. But the patch I submitted previously is base enough for anyone to get started with ZF6 and edit accordingly.

I'll checkout the new branch 8.x-6.x and use it as base and try to contribute from there.

In other changes, now foundation's scss files are available in bower components, so, I don't even see need to commit those scss files, just 2 files bower.json and package.json would satisfy all the dependencies including scss. That means, things are much simplified now.

Anonymous’s picture

Status: Needs work » Needs review
FileSize
2.05 MB

Here are some improvements based on 8.x-6.x branch.

In Parent theme, I replaced the old SCSS, JS, CSS and copied the new one from the new ZF6 bower components. The CSS is already compiled and SCSS in parent theme is not really necessary now.

In STARTER theme, I placed the bower.json which comes with foundation and also kept the same SCSS structure as in previous version.

However, to start building the sub-theme based on starter theme, user has to run bundle install and bower install. This will resolve the dependencies which are listed in Gemfile.lock and bower.json respectively. For SCSS dependency, it'll not look for Super theme's SCSS anymore, it'd take it directly from the bower_components folder, so, its important to run bower install/update before compiling the SCSS.

Gruntfile.js is obsolete now and there is no use of grunt. To compile the SCSS to CSS run compass watch from the theme folder. There is config.rb file which holds the Compass config.

I haven't touched HTML or Templates yet.

Some improvements ideas: -

  1. JavaScript file user edits under js folder eg: STARTER.js could be minified using other tools and run with Grunt. Only the minified version of js file would be included in theme. like STARTER.min.js
  2. If we are going to use Grunt then it can process the compass watch command via it.

PS: I cannot change the version of this issue from 8.x-5.x-dev to 8.x-6.x-dev if anybody could, then please go ahead.

samuel.mortenson’s picture

In Parent theme, I replaced the old SCSS, JS, CSS and copied the new one from the new ZF6 bower components. The CSS is already compiled and SCSS in parent theme is not really necessary now.

We cannot work this way, the primary reason the Gruntfile.js/bower.json were useful is that we could simply run bower install/grunt to update Foundation and other dependencies. Without these how do we know what commit hash/release of Foundation 6 your patch includes? What is the best practice for updating Foundation now that there is no automation? This is how things worked in 8.x-5.x and 7.x-5.x, and maintainers are going to expect 8.x-6.x to work the same way.

However, to start building the sub-theme based on starter theme, user has to run bundle install and bower install. This will resolve the dependencies which are listed in Gemfile.lock and bower.json respectively. For SCSS dependency, it'll not look for Super theme's SCSS anymore, it'd take it directly from the bower_components folder, so, its important to run bower install/update before compiling the SCSS.

This is fine, but is not directly related to Foundation 6 and is more about the STARTER theme in general. Please open an issue for 8.x-5.x (or even 7.x-5.x) for this, we can discuss how to best move forward. Your other improvements are also not related to Foundation 6 directly, so they should be opened as new issues so we can keep the patches in this issue small and related to changes in Foundation 6.

PS: I cannot change the version of this issue from 8.x-5.x-dev to 8.x-6.x-dev if anybody could, then please go ahead.

I haven't made a release of 8.x-6.x yet as it's not stable enough for anyone to use, even for testing. We're aware of multiple template and preprocess changes that need to be made, which is what should be focused on in this issue.

I just updated Foundation to 6.0.5 in the repository (by running bower install && grunt), which should include some of the changes in your patch. I'm going to be doing this weekly on Fridays from here on in.

To summarize: Our top priority should be making sure the theme and STARTER theme features actually work with Foundation 6. After we've created a semi-stable branch, we can do a 8.x-6.x-dev release and pursue improvements like the ones discussed above in new issues.

Anonymous’s picture

We cannot work this way, the primary reason the Gruntfile.js/bower.json were useful is that we could simply run bower install/grunt to update Foundation and other dependencies. Without these how do we know what commit hash/release of Foundation 6 your patch includes? What is the best practice for updating Foundation now that there is no automation? This is how things worked in 8.x-5.x and 7.x-5.x, and maintainers are going to expect 8.x-6.x to work the same way.

You are right, we can place those Gemfile.lock. Gemfile and bower.json also in Supertheme. Running bower update would update the foundation dependencies. Since bower_components folder would be gitignored and the SCSS, CSS, JS files provided by foundation would live inside the bower_components folder it'd be difficult to commit. So, you might need an extra tool like Grunt to compile it to normal commitable folder.

I'll try to add those files and inform about the steps involved.

Anonymous’s picture

Super Theme: ZF
Added Gruntfile, Gemfile, Gemfile.lock and package.json files

For Maintainers: Run commands bundle install/update, bower install/update, npm install/update, grunt. This will add all dependencies and download latest changes in foundation to bower_components/foundation folder and Gruntfile copies those settings accordingly to the CSS, SCSS and JS folders.

This means, no manual task for updating changes from Zurb Foundation.

For Normal users: No changes

Since Drupal Core already has jquery.cookie, jquery.once, moderniz, jquery, etc. I have added the dependencies to list those in libraries instead of loading it.

STARTER Theme:

I have included the SCSS settings file in the STARTER theme, so, every starter theme could have its own settings.

For There Developer:
When they copy the STARTER to be their own theme and change the name accordingly, they need to run commands bundle install, bower install, npm install ot resolve the dependency.

Blockage: Since I am not familiar with Grunt, right now running grunt from sub-theme folder doesn't compile the SCSS to CSS. If it was Gulp, I'd have fixed it to run the compass watch instead. So, if anyone could fix the Gruntfile.js so it'd compile the SCSS would be helpful.

This is fine, but is not directly related to Foundation 6 and is more about the STARTER theme in general. Please open an issue for 8.x-5.x (or even 7.x-5.x) for this, we can discuss how to best move forward. Your other improvements are also not related to Foundation 6 directly, so they should be opened as new issues so we can keep the patches in this issue small and related to changes in Foundation 6.

Whatever changes in Supertheme i.e. Zurb Foundation might able need similar changes in the STARTER theme. Since, there is very little changes in STARTER and it also relates to the changes in super-theme I merged it in one. I have tested both Super and sub theme separately and also by creating another sub-theme with the changes and site looks good in my tests.

To summarize: Our top priority should be making sure the theme and STARTER theme features actually work with Foundation 6. After we've created a semi-stable branch, we can do a 8.x-6.x-dev release and pursue improvements like the ones discussed above in new issues.

That's the purpose of this patch, it has minimal working version and how we could improve from there is matter of discussions.

samuel.mortenson’s picture

Could you please open new issues for anything not directly related to the functionality of Foundation 6? I appreciate the effort you're putting into changing our file structure, but these are changes that could be made to 7.x-5.x and 8.x-5.x.

In this issue im trying to make sure our markup, custom css and js, and extra features still work with Foundation 6. These sort of changes should be relatively small and easy to review.

Anonymous’s picture

did you tried the patch atleast in local and checked the file structure? I think there isn't any changes in the file structure, at least not in zurb_foundation super theme. I got the concept how it built with bower and Grunt, so, I placed it as it is the functionality of both. One downloads the latest package and another copies from it to respective folder.

If you want to separate Super theme and STARTER theme then I can create new issue for STARTER, but the changes in STARTER to reflect the changes in its base theme, so, it'd not break anything that is working. But there are still some room for improvements like not loading the foundation css and js from the base theme and using only from sub-theme to avoid duplication and overriding.

samuel.mortenson’s picture

I have tried the patch locally, but there are a number of outstanding problems with the patch and as none of the changes directly correspond with Foundation 6, I would prefer the patch to be submitted in a new issue or preferably as multiple issues that describe why the changes were made and why the changes are useful.

Short notes from review:

- The patch doesn't apply cleanly to 8.x-6.x or 8.x-5.x. I manually resolved conflicts and assumed it was intended for 8.x-6.x.

- Right off the bat, running "bower install" shows that Foundation 5 was downloaded, not Foundation 6:

$ bower install
bower foundation#*          not-cached git://github.com/zurb/bower-foundation.git#*
bower foundation#*             resolve git://github.com/zurb/bower-foundation.git#*
bower foundation#*            download https://github.com/zurb/bower-foundation/archive/5.5.3.tar.gz
bower foundation#*             extract archive.tar.gz
bower foundation#*            resolved git://github.com/zurb/bower-foundation.git#5.5.3
...
$ grep 'version' bower_components/foundation/.bower.json
  "version": "5.5.3",
    "type": "version",

This is because bower.json was changed to point back the zurb/bower-foundation repository. As discussed earlier in this issue, zurb/bower-foundation is for Foundation 5, not Foundation 6.

- Grunfile.js style changes were made that go against the JavaScript coding standards

- As you were using Foundation 5, you added css/normalize.min.css as a dependency in zurb_foundation.libraries.yml. As you can see from https://github.com/zurb/foundation-sites/blob/develop/dist/foundation.css, Foundation 6 includes normalize.css in its compiled CSS file(s).

- You removed the zurb_foundation/development library from zurb_foundation.libraries.yml. This library is used for debugging non-compiled CSS/JS files and should not be removed.

- You changed the way the STARTER theme requires SCSS. While this can be useful, this needs to be addressed in a new issue. It has no direct relation to Foundation 6's functionality.

samuel.mortenson’s picture

Status: Needs review » Needs work
Anonymous’s picture

Here is more clean patch I think...

I changed the bower.json file to download foundation 6
Fixed Gruntfile for folder structure and to compile SCSS to CSS (this file may need extra work)
deleted js, css and scss folder in the zurb_foundation theme. Run the Grunt from cli, which created new css, js and scss folders and files.
Changes libraries.yml file to reflect the changes.

Anonymous’s picture

Status: Needs work » Needs review
Anonymous’s picture

- Right off the bat, running "bower install" shows that Foundation 5 was downloaded, not Foundation 6:

yep yep.... Now I see what's wrong.... switching between Yeti Launcher and CLI I messed things up.... ignore those previous PR.

Anonymous’s picture

Status: Needs review » Needs work
Anonymous’s picture

Status: Needs work » Needs review
FileSize
8.26 KB

Finally, this one should be on line with right direction.

samuel.mortenson’s picture

Status: Needs review » Needs work

Why was zurb_foundation.scss and the status_in_reveal/alert_close libraries removed?

diff --git a/bower.json b/bower.json
index 6381397..f2589da 100644
--- a/bower.json
+++ b/bower.json
@@ -2,6 +2,7 @@
   "name": "zurb_foundation",
   "private": "true",
   "dependencies": {
-    "foundation": "zurb/foundation-sites"
+  "foundation-sites": "~6.0.0",
+  "motion-ui": "~1.1.0"
   }
-}

Why was motion-ui added? I don't see it being included anywhere, and it may already come packaged with Foundation 6 as js/foundation/foundation.util.motion.js.

What's the benefit of removing our alias of foundation-sites to foundation?

@@ -49,26 +48,9 @@ development:
     js/foundation/foundation.util.touch.js: {}
     js/foundation/foundation.util.triggers.js: {}
     js/foundation.js: {}
-    js/top_bar_active.js: {}
   dependencies:
     - core/drupal
+    - core/modernizr
     - core/jquery
+    - core/jquery.cookie
     - core/jquery.once

Why were jquery.cookie and modernizr added here? Does Foundation 6 make use of these?

diff --git a/js/foundation/util-map.json b/js/foundation/util-map.json
deleted file mode 100644
index 568ac22..0000000
--- a/js/foundation/util-map.json
+++ /dev/null

I'm not sure how util-map.json could have been deleted unless you did this manually. Should we exclude it from the Gruntfile.js?

MonsieurVoltaire’s picture

Hi guys, long time Bootstrap user here thinking about making the switch to ZF. Just installed the (yellow) 8.x-5.0-beta2 theme on a fresh Drupal install and the page styling seems to have collapsed upon itself. Let me know if there's anything I can contribute to move this ticket forward.

samuel.mortenson’s picture

@monsieurvoltaire If you have an issue with 8.x-5.0-beta2, please open a new ticket in the issue queue for 8.x-5.x-dev. This ticket is for the 8.x-6.x branch. A screenshot or more elaboration on "page styling seems to have collapsed upon itself" would be helpful as well.

jo.st’s picture

Hi, thank you for your great work.

Here is a patch that I use as a starting point for the top-bar in my current project.
It provides me with a working basic topbar when applied on top of rajibmp patch of #28
I hope it helps.

The html pattern is from a Zurb-lesson on how to use the Foundation 6 menu component to build a Foundation 5 Top Bar replica.
http://zurb.com/university/lessons/how-to-re-create-top-bar-with-foundat...

* I did not succeed in displaing nested menus in the topbar yet
* No top_bar_options yet
* No sticky option in top_bar_classes. It seems this feature needs an additional div
http://foundation.zurb.com/forum/posts/36690-how-to-create-a-sticky-top-...

(I am a novice, please forgive me if I am posting in the wrong issue queue)

samuel.mortenson’s picture

Status: Needs work » Closed (fixed)

@jo.st Nice job and thanks for looking into this. Could you open a new issue for the 8.x-6.x branch, titled something like "Re-implement the Top Bar"?

So that this issue doesn't get bloated with random requests, I'm going to go ahead and close this and request that any un-committed work is either moved to #2630298: Foundation 6 Starter Theme for D8, or put into a new issue. I'll be spinning up a few issues myself for things that I know are existing problems.

samuel.mortenson’s picture

I'm also doing a temporary release for 8.x-6.x-dev now, so if you don't see it in the Version list please wait a few hours and circle back. Thanks all.

Fhercho’s picture

how i can compile please compass watch not work

HongPong’s picture

@Fhercho take a look at #2702271: Update Zurb Foundation to 6.2 and use our STARTER Gulp config in the base theme - you need to have NodeJS / npm and bower available instead of compass. A patch is close to complete there (I'm working on it this afternoon as well)