Menu icon Foundation
Django and Foundation 5 Upgrade Path

What's the best way to integrate Foundation 5 with a Django/Python workflow? Can't use it because of Bower update path…I found this but not sure if it's the right thing: https://django-bower.readthedocs.org/en/latest/. This issue is I need to not have to depend on Bower for upgrades unless it works directly with Django.

Hope I've described this right. Can anyone confirm the above is the right thing to do?

djangopythonupgrade

What's the best way to integrate Foundation 5 with a Django/Python workflow? Can't use it because of Bower update path…I found this but not sure if it's the right thing: https://django-bower.readthedocs.org/en/latest/. This issue is I need to not have to depend on Bower for upgrades unless it works directly with Django.

Hope I've described this right. Can anyone confirm the above is the right thing to do?


Michael Marcus gave the most helpful answer for this post
Michael Marcus almost 5 years ago

I use Compass and SCSS to customize Foundation for my Django site, and I have found that Compass's philosophy about Django integration (http://compass-style.org/blog/2011/05/09/compass-django/) applies to Foundation as well. TL;DR: Just use them both and don't bother trying to integrate.

My suggestion would be to use the new "foundation" CLI to manage your Foundation assets on your dev machine only, and just modify your STATICFILES_DIRS so that Django knows where to find them. For example, here's my old setting under Foundation 4:

STATICFILES_DIRS = (
    ('javascripts', '/path/to/foundation/root/javascripts'), # all JS including Foundation
    ('stylesheets', '/path/to/foundation/root/stylesheets'), # my generated CSS
)

And here's the modification for Foundation 5:

STATICFILES_DIRS = (
    ('foundation', '/path/to/foundation/root/bower_components/foundation'), # all Foundation assets
    ('javascripts', '/path/to/foundation/root/javascripts'), # might still have some customizations here
    ('stylesheets', '/path/to/foundation/root/stylesheets'), # my generated CSS
)

Then, in my templates, I can reference the JS almost exactly as described in the docs (http://foundation.zurb.com/docs/javascript.html) but with Django's static tag as a prefix:

<script src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
...
<script src="{% static 'foundation/js/vendor/jquery.js' %}"></script>
<script src="{% static 'foundation/js/vendor/fastclick.js' %}"></script>
<script src="{% static 'foundation/js/foundation.min.js' %}"></script>

Note that this method gives you the added bonus of segregating the Foundation JS from your other JS.

Michael Marcus almost 5 years ago

I use Compass and SCSS to customize Foundation for my Django site, and I have found that Compass's philosophy about Django integration (http://compass-style.org/blog/2011/05/09/compass-django/) applies to Foundation as well. TL;DR: Just use them both and don't bother trying to integrate.

My suggestion would be to use the new "foundation" CLI to manage your Foundation assets on your dev machine only, and just modify your STATICFILES_DIRS so that Django knows where to find them. For example, here's my old setting under Foundation 4:

STATICFILES_DIRS = (
    ('javascripts', '/path/to/foundation/root/javascripts'), # all JS including Foundation
    ('stylesheets', '/path/to/foundation/root/stylesheets'), # my generated CSS
)

And here's the modification for Foundation 5:

STATICFILES_DIRS = (
    ('foundation', '/path/to/foundation/root/bower_components/foundation'), # all Foundation assets
    ('javascripts', '/path/to/foundation/root/javascripts'), # might still have some customizations here
    ('stylesheets', '/path/to/foundation/root/stylesheets'), # my generated CSS
)

Then, in my templates, I can reference the JS almost exactly as described in the docs (http://foundation.zurb.com/docs/javascript.html) but with Django's static tag as a prefix:

<script src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
...
<script src="{% static 'foundation/js/vendor/jquery.js' %}"></script>
<script src="{% static 'foundation/js/vendor/fastclick.js' %}"></script>
<script src="{% static 'foundation/js/foundation.min.js' %}"></script>

Note that this method gives you the added bonus of segregating the Foundation JS from your other JS.

Chris Matthias almost 5 years ago

I don't know about integration with Django much but I do know you can use grunt to copy the bower_compenents/ directory into /js/ or wherever you need it.

Here's a sample of my Gruntfile.js and package.json-- you can use those files and run npm install && bower install and then run grunt to watch which will compile your SASS and copy the bower components. Update the path to where you want your js files in the Gruntfile.js.

https://gist.github.com/thetrickster/8743340