= Creating new Themes with Foundation and SCSS =
[[TOC]]
== Style Sheets ==
=== Necessary Style Sheets ===
==== Foundation ====
Foundation-based themes must include the '''Foundation base stylesheets''':
- static/themes/foundation/normalize.css
- static/themes/THEME/foundation/foundation.css
- static/themes/THEME/foundation/foundation.rtl.css
These base styles must be loaded before all other Sahana style sheets.
Note that only one of {{{foundation.css}}} or {{{foundation.rtl.css}}} is loaded, depending on the writing direction for the current UI language (Left-To-Right or Right-To-Left).
==== Theme ====
The SCSS-built {{{theme.css}}} style sheet is included at the end of {{{css.cfg}}}:
{{{
...
../themes/THEME/theme.css
#../themes/THEME/style.css
# Final line required for parsing
}}}
It can be followed by an optional {{{THEME/style.css}}} with additional, theme-specific CSS and final overrides. The {{{THEME/style.css}}} is not built from SCSS, so it can be edited directly.
=== Adding Foundation to layout.html ===
The sequence to include Foundation base styles, consisting of {{{normalize.css}}} and {{{foundation.css}}} resp. {{{foundation.rtl.css}}}, is encoded in a view template {{{views/foundation.css.html}}}, so it can easily be added to {{{layout.html}}}:
{{{
...
{{for sheet in s3.external_stylesheets:}}
{{pass}}
{{include "foundation.css.html"}} <--- Foundation base styles are loaded here
{{for sheet in s3.stylesheets:}}
{{pass}}
{{if s3.debug:}}{{=s3base.s3_include_debug_css()}}{{else:}}
{{# Built by /static/scripts/tools/build.sahana.py }}
{{pass}}
...
}}}
Additionally, Foundation requires loading and initialization of some scripts at the end of the {{{}}}. The corresponding sequence is also encoded in a view template {{{views/foundation.js.html}}}, so it can easily be added to {{{layout.html}}}:
{{{
...
{{include "foundation.js.html"}} <--- this loads and initializes Foundation scripts