wiki:DeveloperGuidelines/Themes/SCSS

Version 2 (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
    2. Style sheet inclusion in layout.html

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

...
{{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}}
...
Note: See TracWiki for help on using the wiki.