| | 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 | |
