= Creating new Themes with Foundation and SCSS = [[TOC]] == Creating an SCSS-built Foundation Theme == === Files and Folders === === Copying from Skeleton === == Building the Theme == === Developer Preview === === Production === == Using the Theme in a Template == === Adding Foundation to layout.html === ==== Base Styles ==== Foundation-based themes must include the '''Foundation base stylesheets''', ahead of any Sahana style sheets: - static/themes/foundation/normalize.css - static/themes/THEME/foundation/foundation.css - static/themes/THEME/foundation/foundation.rtl.css 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). The sequence to include Foundation base styles 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}} ... }}} ==== Scripts ==== 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 }}} === Adding Theme Styles to css.cfg === 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}}} to add CSS for template-specific elements as well as final overrides. The {{{style.css}}} style sheet is not built from SCSS, so it can be edited directly.