| Version 4 (modified by , 6 years ago) ( diff ) |
|---|
Creating new Themes with Foundation and SCSS
Table of Contents
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).
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:}}
<link href="{{=sheet}}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
{{pass}}
{{include "foundation.css.html"}} <--- Foundation base styles are loaded here
{{for sheet in s3.stylesheets:}}
<link href="/{{=appname}}/static/styles/{{=sheet}}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
{{pass}}
{{if s3.debug:}}{{=s3base.s3_include_debug_css()}}{{else:}}
{{# Built by /static/scripts/tools/build.sahana.py }}
<link href="/{{=appname}}/static/themes/{{=theme}}/eden.min.css" rel="stylesheet" type="text/css" />
{{pass}}
...
Additionally, Foundation requires loading and initialization of some scripts at the end of the <body>. 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"}}
</body>
</html>
Note:
See TracWiki
for help on using the wiki.
