Question about Foundation in sage 9 beta 2

First of all - I used to use underscores as my startertheme - but now I have switched to sage and I love it - it works like a charm out of the box.

I like that sage 9 includes blade even though I would love to have the posibility to choose between Blade or Twig like I can choose between different frameworks.

But my question is about the frameworks - when I use bootstrap 4 - the wp_classes file has some css-code in it set up to match bootstrap 4 - but when I use foundation that code does not exits - why is that.

Another thing I am having problems with it the off-canvas toggle function in foundation - it doen’t seem to work in sage - or do I do something wrong

The code I am using is:

        <html @php(language_attributes())>
          @include('partials.head')
          <body @php body_class(); @endphp>
            <div class="off-canvas-wrapper">
              <div class="off-canvas position-top" id="offCanvas" data-off-canvas>
                @if (has_nav_menu('primary_navigation'))
                  {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
                @endif
              </div>
              <div class="off-canvas-content" data-off-canvas-content>
                <button type="button" class="button" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">Open Menu</button>
                @php do_action('get_header'); @endphp
                @include('partials.header')
                <div class="wrap container" role="document">
                  <div class="content">
                    <main class="main">
                      @yield('content')
                    </main>
                    @if (App\display_sidebar())
                      <aside class="sidebar">
                        @include('partials.sidebar')
                      </aside>
                    @endif
                  </div>
                </div>
                @php do_action('get_footer'); @endphp
                @include('partials.footer')
              </div>
            </div>
          </body>
          @php wp_footer(); @endphp
        </html>

Did a little bit more testing last night and it looks like the foundation.js which loads into the main js isn’t loaded proberly - cause I took the same code used in the sage theme and moved into the Foundation 6 template - and it works just fine.

Hope someone will take a look at this - or should I put it into github as a bug?

1 Like

I have a similar problem. I’m attempting to use foundation with the latest sage9 beta.

The foundation grid system works but when I try to render a foundation 6 Top Bar it does not render as a menu. I note that main.scss contains the following which should include everything that is required.

@include foundation-everything;

update: adding a call to $(document).foundation(); in common.js (init) solved this for me.