# How to install Foundation Zurb

## Resources
* [node js](https://nodejs.org/en/download/)
* [foundation zurb](foundation.zurb.com)


## install nodeenv

[how to install nodeenv](https://calvinx.com/2013/07/11/python-virtualenv-with-node-environment-via-nodeenv/)

1. mkvirtualenv myproject1
2. pip install nodeenv
3. nodeenv -p
4. deactivate; workon myproject1
5. npm install -g foundation-cli
6. npm install -g autoprefixer
7. npm install -g generate
8. npm install -g postcss-cli

## install django sass processor

github url [django sass processor](https://github.com/jrief/django-sass-processor)

	pip install django-sass-processor

### add to installed apps

	sass_processor

### additional configuration settings

#### set extensions to look for

sass processor searches template files to find links to sass  stylesheets. If using templates with a .django extension, you have to set the ext types you want the processor to search 

	SASS_TEMPLATE_EXTS = ['.django', '.html']

#### file search root directory

set the root value for which sass processor will search for sass files (set to the same value as static root)

	SASS_PROCESSOR_ROOT = STATIC_ROOT

#### add cssfinder to static file finders

we need to tell the static finders thingie to use sass_processor

	STATICFILES_FINDERS = [
	'django.contrib.staticfiles.finders.FileSystemFinder',
	'django.contrib.staticfiles.finders.AppDirectoriesFinder',
	'sass_processor.finders.CssFinder',
	]

#### directories to look through

you must tell django wher eto find static files that you want to look through if you want to use them in a template

you must also tell the sass processor where those files are if you want the sass processor to be able to do anything with it

	STATICFILES_DIRS = [
    	('node_modules', 
    	  os.path.join(
    			PROJECT_ROOT,
    			'share/media/node_modules/')),
    	
    	os.path.join(
    		PROJECT_ROOT,
    		'share/media/node_modules/foundation-sites/scss'),
    ]

	SASS_PROCESSOR_INCLUDE_DIRS = [
    	os.path.join(PROJECT_ROOT, 'share/media/node_modules'),
    	os.path.join(PROJECT_ROOT,
    	 	'share/media/node_modules/foundation-sites/scss'),
    ]

Notice how "node modules" is attached without a prefix.

also, I add direct links to the scss of the underlying packages so I can import them with a direct command

	@import foundation

_instead of_

	@import foundation-sites/scss/foundation

When you want to import sass modules underneath the "node_modules" directory you must refer to the directory structure _underneath_ the node modules structure:

	@import foundation-sites/scss/foundation

however, to directly import the foundation sass library, you must do so through the "assets" directory referenced in static.

so foundation-sites/assets refers to what will be used in static, and foundation-sites/scss/foundation refers to compiling

### Usage

	{% load sass_tags %}

	<link href="{% sass_src 'myapp/css/mystyle.scss' %}"
		rel="stylesheet" type="text/css" />


## installing Zurb Foundation Template

[how to install foundation with django](https://www.physics.utoronto.ca/~icom/workshop/django-install/foundation.html)

either open up the virtualenv that contains foundation-cli or create one, or just install foundation-cli

create a new template
	
	foundation new

## installing via foundation-sites

	npm install foundation-sites
	
# Alternate way of loading Foundation

install foundation-sites
link to foundation-sites parent directory

	ln -s /pathto/node_modules/foundation-sites /pathto/sass/foundation-sites
	
inside the sass file import foundation as

	@import foundation-sites/scss