api-sandbox/share/readmes/foundation.md

How to install Foundation Zurb

Resources

• node js
• foundation zurb

install nodeenv

how to install 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

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

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