110 lines
3.2 KiB
Markdown
110 lines
3.2 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
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|