Foundation Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle Run:

   composer require babaganoush/foundation-bundle:~5.5
   

   Update AppKernel.php to register the bundle:

   public function registerBundles()
   {
       $bundles = [
           // ...
           new Babaganoush\FoundationBundle\BabaganoushFoundationBundle(),
       ];
   }
   

2. Install Assets Symlink Foundation assets to your web/ directory:

   php app/console assets:install --symlink web
   

3. First Use Case: Basic Grid Layout Include Foundation CSS/JS in a Twig template:

   <link rel="stylesheet" href="{{ asset('bundles/babaganoushfoundation/css/foundation.min.css') }}">
   <script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
   <script src="{{ asset('bundles/babaganoushfoundation/js/foundation.min.js') }}"></script>
   
   <div class="row">
       <div class="small-6 columns">Column 1</div>
       <div class="small-6 columns">Column 2</div>
   </div>
   

Implementation Patterns

Common Workflows

1. Responsive Layouts Use Foundation’s grid system (e.g., small-6, medium-4) in Twig:

   {% block body %}
       <div class="row">
           <div class="small-12 medium-8 columns">
               {# Main content #}
           </div>
           <div class="small-12 medium-4 columns">
               {# Sidebar #}
           </div>
       </div>
   {% endblock %}
   

2. JavaScript Components Initialize Foundation JS components (e.g., dropdowns, tooltips) via:

   $(document).foundation();
   

   Or target specific components:

   $(document).foundation('dropdown', 'reflow');
   

3. Asset Organization

   • CSS: Place Foundation styles in app/Resources/public/css/ and override via @import in your main stylesheet.
   • JS: Extend Foundation JS by including custom scripts after foundation.min.js.

4. Twig Extensions Create a custom Twig extension for reusable Foundation classes:

   // src/AppBundle/Twig/FoundationExtension.php
   class FoundationExtension extends \Twig_Extension
   {
       public function getFunctions()
       {
           return [
               new \Twig_SimpleFunction('foundation_grid', [$this, 'gridClass']),
           ];
       }
   
       public function gridClass($size, $breakpoint = 'small')
       {
           return "{$breakpoint}-{$size} columns";
       }
   }
   

   Usage in Twig:

   <div class="{{ foundation_grid(6) }}">Content</div>
   

5. Integration with Symfony Forms Use Foundation’s form styling classes (e.g., error, prefix, suffix) in Twig:

   {{ form_widget(form.name, { 'class': 'input-field' }) }}
   <span class="help-text">{{ form.name.vars.label }}</span>
   

Gotchas and Tips

Pitfalls

1. Asset Paths

   • Issue: Hardcoding asset paths (e.g., /bundles/babaganoushfoundation/...) breaks when deploying to subdirectories.
   • Fix: Always use {{ asset() }} or {% block stylesheets %}/{% block javascripts %}.

2. jQuery Dependency

   • Issue: Forgetting to include jquery.min.js before foundation.min.js causes JS errors.
   • Fix: Verify order in Twig or use {% block javascripts %} to ensure jQuery loads first.

3. Outdated Foundation Version

   • Issue: The bundle ships with Foundation 5.5.1 (2015), which lacks modern features (e.g., no Flexbox grid, limited accessibility).
   • Fix: Override assets by copying Foundation files to web/bundles/ and updating manually.

4. CSS Conflicts

   • Issue: Foundation’s default styles (e.g., buttons, forms) may clash with your theme.
   • Fix: Override styles in a custom CSS file loaded after Foundation:

     <link rel="stylesheet" href="{{ asset('css/custom.css') }}">
     

5. Modernizr Dependency

   • Issue: The bundle includes a legacy Modernizr build, which may not be needed.
   • Fix: Exclude it if using a newer build or polyfills via CDN.

Debugging Tips

1. Console Errors

   • Check browser console for missing jQuery or Foundation initializations. Ensure:

     $(document).foundation(); // Runs after DOM is ready.
     

   • Use $(document).foundation('alert'); to debug component initialization.

2. Asset Installation

   • Verify assets are symlinked:

     ls -la web/bundles/babaganoushfoundation
     

   • Clear cache if assets don’t load:

     php app/console cache:clear --env=prod
     

3. Breakpoints

   • Foundation 5 uses small, medium, large, and xlarge. Test responsiveness with browser dev tools.

Extension Points

1. Custom JavaScript Extend Foundation by adding custom plugins. Example:

   // web/js/custom.js
   $.fn.myPlugin = function() {
       // Custom logic
       return this;
   };
   

   Include after foundation.min.js:

   <script src="{{ asset('js/custom.js') }}"></script>
   

2. Sass Integration Compile Foundation SCSS for better customization:

   • Install Node Sass: npm install -g node-sass.
   • Override variables in app/Resources/assets/scss/foundation/_settings.scss.
   • Compile with:

     node-sass app/Resources/assets/scss/foundation.scss web/css/foundation-custom.css
     

3. Symfony Flex Alternative For newer Symfony projects, consider using Webpack Encore to bundle Foundation via npm:

   npm install foundation-sites --save-dev
   

   Configure in webpack.config.js and import in your JS entry file.

4. Accessibility

   • Foundation 5 lacks modern ARIA attributes. Manually add them or upgrade to Foundation 6+ via CDN.

Pro Tips

• Performance: Minify assets in production:

  php app/console assets:install --env=prod --symlink
  

• Theming: Use Twig’s {% block %} to wrap Foundation components for consistent theming.
• Testing: Use Symfony’s WebTestCase to verify Foundation JS interactions:

  $client->executeScript('$(document).foundation("dropdown", "open");');