= Creating new Themes with Foundation and SCSS = [[TOC]] == Style Sheets == === Necessary Style Sheets === Foundation-based themes consist of four SCSS-built stylesheets: - static/themes/foundation/normalize.css - static/themes/THEME/foundation/foundation.css - static/themes/THEME/foundation/foundation.rtl.css - static/themes/THEME/theme.css 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). === Style sheet inclusion in layout.html === The inclusion 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 Foundation-based themes, the CSS style sheets are included in {{{layout.html}}} by the following sequence in the {{{}}}: {{{ ... {{for sheet in s3.external_stylesheets:}} {{pass}} ... {{include "foundation.css.html"}} ... {{for sheet in s3.stylesheets:}} {{pass}} {{if s3.debug:}}{{=s3base.s3_include_debug_css()}}{{else:}} {{# Built by /static/scripts/tools/build.sahana.py }} {{pass}} ... }}}