| 1 | = Creating new Themes with Foundation and SCSS = |
| 2 | [[TOC]] |
| 3 | |
| 4 | == Style Sheets == |
| 5 | |
| 6 | === Necessary Style Sheets === |
| 7 | |
| 8 | Foundation-based themes consist of four SCSS-built stylesheets: |
| 9 | |
| 10 | - static/themes/foundation/normalize.css |
| 11 | - static/themes/THEME/foundation/foundation.css |
| 12 | - static/themes/THEME/foundation/foundation.rtl.css |
| 13 | - static/themes/THEME/theme.css |
| 14 | |
| 15 | 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). |
| 16 | |
| 17 | === Style sheet inclusion in layout.html === |
| 18 | |
| 19 | 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}}}. |
| 20 | |
| 21 | For Foundation-based themes, the CSS style sheets are included in {{{layout.html}}} by the following sequence in the {{{<head>}}}: |
| 22 | |
| 23 | {{{ |
| 24 | ... |
| 25 | {{for sheet in s3.external_stylesheets:}} |
| 26 | <link href="{{=sheet}}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" /> |
| 27 | {{pass}} |
| 28 | ... |
| 29 | {{include "foundation.css.html"}} |
| 30 | ... |
| 31 | {{for sheet in s3.stylesheets:}} |
| 32 | <link href="/{{=appname}}/static/styles/{{=sheet}}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" /> |
| 33 | {{pass}} |
| 34 | {{if s3.debug:}}{{=s3base.s3_include_debug_css()}}{{else:}} |
| 35 | {{# Built by /static/scripts/tools/build.sahana.py }} |
| 36 | <link href="/{{=appname}}/static/themes/{{=theme}}/eden.min.css" rel="stylesheet" type="text/css" /> |
| 37 | {{pass}} |
| 38 | ... |
| 39 | }}} |
| 40 | |