How to integrate Foundation 5 in django - django

I'd like to starting use Foundation 5 in a django project.
My doubts are about how to setup folders of Foundation project.
Foundation now uses bower for js dipendencies.
I think it's not correct make a foundation 5 set up into the static folder of django.
Has anyone done a setup of foundation in a django project?
To compile scss files I'll use django-compressor.

My solution is use django-bower... that's all!

Check here. It should have all the instructions.
https://pypi.python.org/pypi/django-zurb-foundation

I've been playing with foundation on my django project using the django development server. All I did was download the Foundation 5 static files (JS,CSS) and add them to my django static files. Then I added in the necessary scripts to my base template as shown here: http://foundation.zurb.com/docs/css.html. I haven't put it into production yet but I don't see any reason why that wouldn't work or why using static files isn't correct (as you thought in your question).
There are benefits to compiling the CSS yourself with SASS if you're really hardcore and I imagine that using template tags with django-zurb-foundation is a little cleaner or maybe easier to implement if you have tons of templates that you would need to modify but if you're like me and you just want to try Foundation out on a small project then downloading the extra applications (django-bower, django-zurb-foundation) isn't necessary.

Related

How to integrate further JS dependencies in ZURB FOUNDATION project?

I'm using the ZURB Template (ZURB foundation 6.4).
I want to use dropdown menus and the like, which require the integration of further JS dependencies.
Here is the official Documentation:
https://foundation.zurb.com/sites/docs/dropdown-menu.html
The following is important for me:
The following files must be included in your JavaScript to use this plugin:
foundation.core.js
foundation.dropdownMenu.js
With utility library foundation.util.keyboard.js
With utility library foundation.util.box.js
With utility library foundation.util.nest.js
With utility library foundation.util.touch.js
Now I dont really know where I have to do these inclusions, and how.
I already integrated a third party plugin into my project, chart.js, but this is obviously a "native" plugin by foundation and I dont know how to do this.
In which file do I have to make these additions, and with what syntax?
In the app.js, they already use a mixture of ES6 and CommonJS for getting Jquery to run, because the hoisting behavior of ES6 would cause problems.
However, this doesn't really make things easier for me and it makes me wonder even more what I have to do to set this up ^^
See https://github.com/foundation/foundation-zurb-template/blob/master/src/assets/js/app.js and the explicit-pieces file for an example.

Isolate SCSS files from Foundation 6 for inclusion into my web dev project

I have an existing website project (PHP, Visual Studio, jQuery) and I would like to start leveraging some of the functionality/design provided by Foundation 6.
I had previously started using Foundation 5, and simply referenced the css and js files from my project. It worked as expected and life was good.
My problem began when I wanted to override some of Foundation's CSS. I started by simply overriding the classes in my own CSS file. It worked and life was good. But I realize that's not the best way to go about it, from a maintainability standpoint. So I began diving in to SASS/SCSS. It seemed that Foundation 6 was the way to go. I installed all kinds of stuff to get it working.... node, ruby, gems, the Foundation CLI, and probably some others that elude me at the moment.
I created a new Foundation project, so that I could isolate out the necessary files and include them into my VS project -- I figured, however naively so, that I could copy over the necessary css, scss, and js files into my VS project, and then when I edited the scss file(s), I could compile them to css. (Compiling could be done any number of ways, from sass command line to VS extensions).
But the only scss files I found in the created project were
_settings.scss
app.scss
When I attempted to compile app.scss, I got an error: "file to import not found or unreadable: functions" and so I went looking for the missing file but cannot find it anywhere.
I looked through the bower_components folder and found a whole bunch of scss files in there, but none named functions.
Is there somewhere I can easily obtain all the scss files necessary to compile my customizations to Foundation's CSS?
Bonus question: Am I completely nuts trying to develop in this manner, instead of subscribing to the whole kit-and-kaboodle of Foundation's way of doing things from a project perspective?
It would appear that Foundation 6 is quite different from Foundation 5 in relation to CSS, SCSS, and the overriding of styles. In version 5, the Foundation files included a couple of basic scss files which provided the means to easily override classes.
In Foundation 6, things work MUCH differently. There are over 100 SCSS files provided, and all are necessary when tweaking the _settings.scss file, as they are all used in compiling the final app.css file.
To answer my own question, it can't be done, and/or, it doesn't work that way.
My final solution was to build a new Foundation 6 template within my existing Visual Studio project's folder structure. I then included the necessary scss files (_settings.scss and app.scss) in my project and source control.
This config allows me to edit the scss files within Visual Studio, and allow Foundation etc (using the foundation watch command) to compile those changes into the final css used by the rest of my project.
A bit of a hybrid approach, but ultimately effective and easy enough to maintain.

Using Foundation 5 with Hammer for Mac

I'm starting using Foundation 5 for a current project and using the command line + Compass to watch for changes to my stylesheet and output CSS, but it takes almost two entire seconds for it to save out my CSS.
I've also been using Hammer (http://hammerformac.com/) a lot this year for optimising my code and was wondering if anyone had used Foundation with Hammer, and was interested on how well they work together?
As I understand right, the main goal is to accelerate compiling your sass files.
Maybe libsass is what you need. It is C library for compiling sass files
More information you can find here:
http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/
Actually, the Hammer documentation has been updated. Check out Tips & Tricks where you'll see this:
ZURB Foundation and Hammer
If you're working with ZURB's Foundation framework, you'll need to grab the Standalone Foundation files from GitHub.
Simply include the Foundation files in your project, include them in your SCSS files with #include "foundation/foundation" and you're good to go!

How to add Ember-Bootstrap to an EmberJS project created via Yeoman

I've started working on an EmberJS application and used Yeoman to generate the skeleton structure. Now, I'd like to add Ember-Bootstrap to my project but am having trouble doing so. I downloaded the latest version from GitHub and unzipped it but I'm not sure what to include.
I see several .js files in the packages/ember-bootstrap/lib folder. Do I need to include all of these? If so, then in which order should I include them?
Someone mentioned in another answer that you needed to add it to the "assets" folder but I don't have one of these.
Does installing Ember-Bootstrap require having a Rails project? I'm not familiar with Rails so please forgive for the newbie questions.
Thanks.
I found a great project that supports Bootstrap 3.0 with many components,
you can find it here:
https://github.com/ember-addons/bootstrap-for-ember
you can see all components alive:
http://ember-addons.github.io/bootstrap-for-ember
GoodLuck.

How can I use coffee script in a Django project?

I'm a new developer on Django and I want to use some CoffeeScript in my dummy project. However, documentation about this topic isn't good and I want to know from the experts which is the best option.
I was looking at possibilities like compressor but it is still confused. I'd really appreciate some pieces of advice.
Thanks in advance.
For automatic compilation, there's django-coffeescript. For a more complete toolchain (a bit like Rails Sprockets) there's Gears, a stand-alone project with plugins for Django, Flask or compilation on the command line.
When I've used CoffeeScript with Django however, I've mostly preferred to set up compilation as a part of a build process (great to have one in any case), there I mostly used custom Paver scripts together with directory watching tools (like watchdog/kicker) to compile .coffee files to Javascript and putting them in my static directory.
What exactly is your question? Django will let you use any JS libary you want. Just add it your HTML pages or templates as you would do without Django.
If it is about serving of staticfiles, check this: https://docs.djangoproject.com/en/1.4/ref/contrib/staticfiles/