With the beta6 release of Drupal 8 I have revisited the changes after quite a lengthy period of codebase changes.

At this point, given it's trajectory, I would expect a D8 release in summer... bearing that in mind, it's probably fruitful to drop 8.x-4.x and 1.x (not even sure what 1.x is or was). Given that 8 is new, I doubt many would miss F4. There are boilerplate Twig templates already in there, which I think were based on F5 from 7.x and converted to Twig.

That said, this gives a rare opportunity to change the way the theme works for D8.

Things that I think should remain:

  • SCSS folder structure
  • Grunt for development tasks
  • Bower for keeping up to speed with the official Zurb repository for Foundation

Things needing addition:

  • Panels twig templates
  • Views default twig templates

Things needing review:

  • Simplifying subtheme creation & management
  • Cutting dependence on Foundation theme to tightly support theme plugins
  • Respond.js support - necessary?
  • Theme settings review

From here, it gets somewhat dicey, as a lot of the theme functions we've known and used since Drupal 5 are basically gone, deprecated, or now part of the OO library in D8.

For instance, linking an image, say, the logo, used to be as simple as:

l('<img src="logo.jpg"/>', '<front>');

In Drupal 8, from the best I can tell in other examples and the docs that currently exist, that is now something like:

\Drupal::l($variables['logo_img'], \Drupal\Core\Url::fromRoute('<front>'));

Not a huge deal, but there seems to be a total removal of theme() function too, so calls to theme('image', array()) also no longer work. There are counterparts to accomplish it in D8, but I have not got that far yet. Other functions like drupal_add_js/css, menu_get_item, etc have all been removed.

That said, template.theme could probably stand a review and cleanup. Do we need all of the things it once provided by default, or can we gut it down to the minimum and leave it up to implementors to provide their own conveniences and decorators? I am of the opinion that we should make it as simple as possible, which would make this theme more of a Zen-level powerhouse of theming.

Also, perhaps we could make the theme development faster by putting the onus of plugin support on the surrounding support modules. It seems like Zurb is dropping support for its plugins as time passes (like Orbit) which makes me wonder how much of that is even worth fretting over. This would allow Foundation base to be a total grid supported system out of the box while other contrib space can work at supporting Foundation plugins a far deal better, and/or using their own plugins to solve different use cases (modals, slideshows etc) without the theme getting in the way of that, assuming they are or will use Foundation internals.

CommentFileSizeAuthor
#19 Selection_041.png23.52 KBjoshtaylor
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kevinquillen’s picture

Issue summary: View changes
chrisjlee’s picture

Kevin, sounds great. Thanks for the update.

Next steps? We should start creating issues for individual tasks then?

kevinquillen’s picture

I am going to look at D8 again and wrap my head around it, issues will probably come out of that.

This time around, should we be more diligent in defining every theme override needed to control HTML output to be as close as possible to Foundation? Meaning, all form elements, item lists, drop buttons... I'm not sure we ever did that, but it might be a good starting point.

I need to get a better understanding of how the theming engine has changed as well. Some of the old functions that were clutch are gone, which kind of breaks half of template.php as it is now.

samuel.mortenson’s picture

Hello all, I've created a Github repository at https://github.com/mortenson/Zurb-Foundation-Drupal-8 to track my progress in improving the 8.x-5.x branch of this theme as much as possible before pulling a patch and creating an issue to get my changes merged back in. At this point I'm just trying to get the theme working without errors/warnings, but after that I will also review additional Twig templates.

samuel.mortenson’s picture

Hello again,

@ishmael-sanchez has made me a project maintainer, as I have done a lot of work in the making the theme work for Drupal 8 already and plan to continue supporting and developing Drupal 8 features going forward. I have copied my changes from https://github.com/mortenson/Zurb-Foundation-Drupal-8 into the 8.x-5.x branch of this project and will continue to do my work directly on Drupal.org.

Some notes about the changes, which we can be turned into new issues or discussed in this issue:

1. zurb_foundation_form_element_label and zurb_foundation_button were removed - both used outdated API hooks and I think we should re-think how heavy handed we need to be with descriptions and buttons. We can add these back in Twig templates, if we decide that they're still needed.

2. Updated package.json to match Zurb Foundation's, we were using really old node and grunt-sass versions before.

3. Various preprocess hooks were moved to Twig templates, which may need refactoring.

4. The commented-out todo "Add classes based on region." was removed from zurb_foundation_preprocess_block, as I think this should be done in a template. This has not been done yet.

The generic approach with this was to get the project working with Drupal 8 without notices/errors, and to remove some of the assumptions that the theme made in Drupal 7. This is probably a good time to re-evaluate what features/classes/HTML structure works best in Drupal 8. Feel free to review my commit and add todos/issues where needed.

zaclittleberry’s picture

I have made a number of updates to the theme via my github repo(https://github.com/zacdavidm/zurb_foundation_drupal_8) and am in consistently spending several hours a day working on it. It would be great if you could take a look and pull in changes. I would be interested in becoming more actively and officially involved in the developing of the drupal 8.x-5.x branch.

Some of the changes I have made are temporary tests of concepts until I find a proper fix. An example of this is manually creating menu template files for menus in top-bar and pointing them at a top-bar menu template. Ideally the menu would be self aware of what region it was being rendered into and be able to have different templates for each, but I have not been able to get that to work yet.

It would be great if you could pull in some of the changes (especially the first few that fix some rendering issues and javascript functionality).

I tried to keep individual commits (https://github.com/zacdavidm/zurb_foundation_drupal_8/commits/master) focused and clean, but let me know if you have any questions.

Thanks!

samuel.mortenson’s picture

@zacdavidm Thanks! I'll try to review your repository this week and update this issue when I've made progress.

samuel.mortenson’s picture

@zacdavidm Here's my notes on the individual commits:

e7838d4 add space between html, body, and attributes so markup renders properly and 7984daa correct main, sidebars, push and pull to include large- prefix

These look good and are committed to the 8.x-5.x branch.

820d2f3 move foundation initialize from page preprocess to html template

Zurb Foundation 7.x also did this, but it was moved to a preprocess function by @kevinquillen when this theme was ported to Drupal 8. Maybe we should move this to preprocess_html instead?

12f8db9 add breadcrumbs region to page template and info file and 33e5a74 add messages region to page template and info file

Zurb Foundation 7.x never had a breadcrumb or messages region - could you explain the use case for these?

60b3234 add footer region to page template and info file

I support this, but when @kevinquillen originally migrated the code the 7.x-5.x footer regions were changed (4 column footer section + single footer region -> 3 column footer region). How do others weigh in on this change?

d1e8002 add primary and secondary menu regions and additional.css. clean up page template a bit

There are a lot of non-trivial changes here, would you mind opening new issues for each bit and giving justifications for each change?

Looking at it briefly, it seems like:

- The top bar is no longer optional as it was in the 7.x branches, maybe this could be an issue "Add back the top-bar functionality to Drupal 8"?
- A CSS file was committed, which should probably be a SCSS file given how Foundation works (we'll likely want access to Foundation mixins/variables at some point).
- Two regions that were not in 7.x-5.x were added, so we'll need to discuss the benefits of those.

7fa3cbf add basic support for drop down menus. assumes main-menu in primary_menu and account-menu in secondary_menu. need to find programmatic way of determining region menu is in and eeb2dcd add unified menu--region-top-bar.html.twig that is included by menus in top bar. not ideal, but temporarily workable

The notes above apply to these changes as well, we'll need to open new issues to discuss if we're going to standardize on the top bar and remove the option to have normal menus.

6805b52 change readme to say foundation 5

Committed, thanks :)

-----

In general, I think that as we move forward we should be opening new 8.x-5.x issues for any feature changes or significant refactors, while considering feature parity with the 7.x-5.x branch. It's also easier to review issues/patches than forks of the repository. Keep up the good work!

samuel.mortenson’s picture

Created related issues to re-implement the Top Bar and fix the Foundation initialization.

samuel.mortenson’s picture

samuel.mortenson’s picture

Adding an issue that currently affects our logic about regions in page.html.twig. Basically, there is no way in core to check if a region is empty, so regions like "Highlighted" will have to be changed as they will always be displayed.

samuel.mortenson’s picture

Patch to bring minimal top bar functionality is in, see #2545582: Re-implement the Top Bar in 8.x-5.x.

samuel.mortenson’s picture

RE: #13: I fixed this by using the :empty CSS selector and moving code around, which was recommended in the Core issue.

samuel.mortenson’s picture

Just did a big push to get all the @todo's and other small preprocess bugs resolved. I think we're approaching the point of talking about a real release, which is pretty exiting. Would love to have other maintainers or existing users submit more issues, but we probably won't see that until D8 actually releases.

samuel.mortenson’s picture

More updates from today:

  1. Foundation off-canvas regions and menus are now supported. To use these, simply place a menu block in an off-canvas region, and then create a link somewhere that expands that region. (more instructions in README.txt)
  2. A Meta Header region has been added, which simply lets you put blocks above all other content on the page. This is especially useful for people who want their Top Bars above all other elements.
  3. The Drush command for creating a sub-theme has been fixed.
  4. The STARTER kit has been updated, and is a little simpler than Drupal 7 for compiling stylesheets. All you have to do is run "gem install zurb-foundation", then "compass watch", in theory. We can bring back the Gruntfile and Bower config if people want that, but I assume that people that technical will have their own preferred build method. People who aren't that technical can always edit the compiled CSS file directly, which I'm sure will be pretty common.
  5. Missing sections in README.txt have been filled in.
joshtaylor’s picture

Wowzers.

I've been using Foundation for a few years, since around 2012ish. Started with Foundation 2, using a custom built on top of that, and recently moving onto Foundation 5.

Frontend development was always a PITA for frontend people who aren't heavily skilled in PHP, as working along a frontend person there was a lot of back and forth to figure out where stuff needed to go with Drupal 7.

Drupal 8 is a complete game changer. I'm really loving it, I converted over a theme we built really quickly, and I believe that this is going to be a major game changer along with the massive changes in theming that Drupal 8 brings (twig themes, telling the user which template overrides what in a comment, etc.

Was super easy to setup a child theme as well (on a new workstation), just copied starter, ran the gem commands to install foundation & compass, then compass watch and I was away.

Awesome work so far.

joshtaylor’s picture

FileSize
23.52 KB

What's your thinking on using http://foundation.zurb.com/docs/components/dropdown_buttons.html for links.html.twig?

This is what D8 seven looks like for operations:
Drupal 8 - Edit/Delete Operations

Would be good to get this working as well for links - or is there something similar but for links?

samuel.mortenson’s picture

Unfortunately that's an admin menu page, which we can't access in this (front-end) theme. That said, I'm also a maintainer on the Ember admin theme, which we're thinking of porting to Drupal 8 using Foundation. If you'd like to contribute, I can ping you on the eventual Drupal 8 roadmap issue is created (or someone could spin up their own Zurb Foundation admin theme ;)).

joshtaylor’s picture

How different will the Ember theme be from Seven? Will it be generic enough that theoretically there could be a zurb_foundation_admin child theme of zurb_foundation, and other admin themes could inherit from zurb_foundation_admin?

zurb_foundation_admin could contain generic stylings/HTML built ontop of foundation that allows easier creation of admin templates.

We've got a fully customised theme we built for D7/sf2 that I'm porting across to D8 now that is built ontop of zurb_foundation

samuel.mortenson’s picture

Ember for Drupal 7 was focused mainly on making the admin UI mobile friendly, which Drupal 8 has already done a lot of. I like the idea of a base Admin theme using Zurb that ember would style on top of, I'll bring that up to the Ember team.

samuel.mortenson’s picture

Just cut 8.x-5.0-beta1 and made an official release, as there hasn't been many issues filed (by people other than myself) I decided to not run an alpha cycle of development. If other maintainers feel that the release should be removed and we should do a full alpha cycle, please update the issue and let me know. I would be willing to do this if we can make a plan for new development, but at this point we have feature parity and no issues tracking new features or bugs.

I'm not sure how relevant or popular this will be in Drupal 8, so I have no plans to do a full release until this has really been battle tested on production sites.

No word on releasing a Zurb Foundation Admin theme yet, I'm bogged down with contrib ports for now but it's still on my radar.

samuel.mortenson’s picture

samuel.mortenson’s picture

Also pushed 8.x-6.x due to a large number of people pinging me wanting Foundation 6 support, but as reviewing all of the changes in 6 is quite the undertaking it's going to take awhile before any releases come out for that. See #2621416: Zurb Foundation 6 for Drupal 8

samuel.mortenson’s picture

Given the amount of interest in 8.x-6.x and the few issues we've received for 8.x-5.x, I'm thinking of doing a stable 8.x-5.x release and noting on the project page that 8.x-6.x is the place for new feature development. I'll take another pass at the issue queue next week and do a release then.

Jelle_S’s picture

So 8.x-5.x is considered stable then? It is not marked as stable / recommended on the project page, and the release tag still says beta. How safe are 8.x-5.x and 8.x-6.x considered to be used on a production environment?

HongPong’s picture

Jelle_S the primary issue with 8.x-6.x for forward compatibility is that it has layouts which should really be in module code (and are now here). So the discussion here #2867688: compatibility problem with drupal-8.3.0 and ds-8.x-3.x, #2871479: Upgrade from layout plugin to Layout API / Layout discovery, #2655142: 8.x-6.x Roadmap seems to be moving towards what I suggested, that we tag a last release of 8.x-6.x which still includes these layouts, but then should be removed.

There is not as much discussion around 8.x-5.x and relatively few issues filed so it seems like that is a pretty good option. However we should try to remove bower and replace it with more node / npm as noted here #2895755: Remove Bower and use npm instead

sim_1’s picture

Status: Active » Fixed

I am going to close this issue. We are no longer actively developing the 8.x-5x branch. If people find issues with updating to the 8.x-6.x releases (which I wouldn't be surprised by) I suggest those are opened in new issues so we can tackle them individually.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.