Foundation Bundle Laravel Package

Getting Started

Minimal Steps to First Use

1. Install the Bundle Run composer require bmatzner/foundation-bundle:~5.5 and update AppKernel.php to include:

   new Bmatzner\FoundationBundle\BmatznerFoundationBundle(),
   

2. Install Assets Execute php app/console assets:install web (or --symlink for symlinked assets).

3. Include in Twig Add the CSS and JS to your base template (base.html.twig):

   <!-- CSS -->
   <link rel="stylesheet" href="{{ asset('bundles/bmatznerfoundation/css/foundation.min.css') }}">
   <!-- JS (after jQuery) -->
   <script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
   <script src="{{ asset('bundles/bmatznerfoundation/js/foundation.min.js') }}"></script>
   

4. Initialize Foundation Add a script tag to initialize Foundation components (e.g., dropdowns, tooltips):

   <script>
       $(document).foundation();
   </script>
   

First Use Case: Responsive Grid

Use Foundation’s grid system in a Twig template:

<div class="row">
    <div class="small-6 columns">Column 1</div>
    <div class="small-6 columns">Column 2</div>
</div>

Implementation Patterns

Workflows

1. Asset Management

   • Use assets:install for production builds; leverage --symlink for development.
   • Override assets by copying files to web/bundles/bmatznerfoundation/ (prefer symlinks for updates).

2. Component Initialization

   • Initialize Foundation globally with $(document).foundation().
   • For dynamic content (e.g., AJAX-loaded elements), reinitialize with:

     $(document).foundation('reflow'); // For responsive updates
     

3. Twig Integration

   • Extend Twig with custom filters for Foundation classes (e.g., {{ 'row'|foundation_class }}).
   • Use {% block foundation_js %} in layouts to append JS snippets.

4. Custom Sass Integration

   • Copy vendor/bmatzner/foundation-bundle/Resources/public/scss/ to your project.
   • Import Foundation variables in your app.scss:

     @import "foundation/scss/foundation";
     

Integration Tips

• jQuery Dependencies: Ensure bmatzner/jquery-bundle is loaded before Foundation.
• Lazy Loading: Use data-abide or data-orbit attributes for interactive elements.
• Symfony Forms: Style forms with Foundation classes (e.g., form-control for inputs).

Gotchas and Tips

Pitfalls

1. Asset Paths

   • Hardcoding paths (e.g., /bundles/bmatznerfoundation/) breaks when moving projects.
   • Fix: Always use {{ asset() }} or path() in Twig.

2. JavaScript Conflicts

   • Foundation relies on jQuery. Conflicts arise if multiple jQuery versions are loaded.
   • Fix: Use bmatzner/jquery-bundle and avoid global $ overrides.

3. Dynamic Content

   • Foundation components (e.g., dropdowns) won’t work on AJAX-loaded content.
   • Fix: Reinitialize with $(selector).foundation() after content loads.

4. Sass Overrides

   • Custom Sass variables must be imported before Foundation.
   • Fix: Use @import "foundation/variables"; first, then override.

Debugging

• Console Errors: Check for missing jQuery or incorrect asset paths.
• Foundation Initialization: Use $(document).foundation('alert'); to test if Foundation is loaded.

Extension Points

1. Custom Components

   • Extend Foundation with plugins (e.g., foundation.abide for form validation).
   • Load plugins after foundation.min.js:

     <script src="{{ asset('bundles/bmatznerfoundation/js/plugins.js') }}"></script>
     

2. Twig Extensions

   • Create a custom Twig extension to generate Foundation markup:

     // src/YourBundle/Twig/FoundationExtension.php
     class FoundationExtension extends \Twig_Extension {
         public function getFunctions() {
             return [
                 new \Twig_SimpleFunction('foundation_grid', [$this, 'gridHtml']),
             ];
         }
     }
     

3. Configuration

   • Override default settings via config.yml (if the bundle supports it).
   • Note: This bundle lacks built-in config; use environment variables or custom services.

Pro Tips

• Performance: Use foundation.min.js in production; debug with unminified versions.
• Responsive Images: Pair with picturefill for responsive images.
• Testing: Use $(document).foundation('destroy'); to reset components in tests.