wiki:DeveloperGuidelines/Themes/SCSS

Version 6 (modified by Dominic König, 7 years ago) ( diff )

--

Creating new Themes with Foundation and SCSS

Table of Contents

  1. Style Sheets
    1. Necessary Style Sheets
      1. Foundation
      2. Theme
    2. Adding Foundation to layout.html

Style Sheets

Necessary Style Sheets

Foundation

Foundation-based themes must include the Foundation base stylesheets:

  • static/themes/foundation/normalize.css
  • static/themes/THEME/foundation/foundation.css
  • static/themes/THEME/foundation/foundation.rtl.css

These base styles must be loaded before all other Sahana style sheets.

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

Theme

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 with additional, theme-specific CSS and final overrides. The THEME/style.css is not built from SCSS, so it can be edited directly.

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"}}    <--- this loads and initializes Foundation scripts
</body>
</html>
Note: See TracWiki for help on using the wiki.