132 lines
3.5 KiB
Markdown
132 lines
3.5 KiB
Markdown
# 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
|
|
|
|
|
|
|
|
|
|
|