Changes between Version 6 and Version 7 of DeveloperGuidelines/Themes/SCSS


Ignore:
Timestamp:
07/05/18 11:35:25 (7 years ago)
Author:
Dominic König
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • DeveloperGuidelines/Themes/SCSS

    v6 v7  
    22[[TOC]]
    33
    4 == Style Sheets ==
     4== Adding Foundation to layout.html ==
    55
    6 === Necessary Style Sheets ===
     6=== Base Styles ===
    77
    8 ==== Foundation ====
    9 
    10 Foundation-based themes must include the '''Foundation base stylesheets''':
     8Foundation-based themes must include the '''Foundation base stylesheets''', ahead of any Sahana style sheets:
    119
    1210 - static/themes/foundation/normalize.css
    … …  
    1412 - static/themes/THEME/foundation/foundation.rtl.css
    1513
    16 These base styles must be loaded before all other Sahana style sheets.
    17 
    1814Note 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).
    1915
    20 ==== Theme ====
    21 
    22 The SCSS-built {{{theme.css}}} style sheet is included at the end of {{{css.cfg}}}:
    23 
    24 {{{
    25 ...
    26 ../themes/THEME/theme.css
    27 #../themes/THEME/style.css
    28 # Final line required for parsing
    29 }}}
    30 
    31 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.
    32 === Adding Foundation to layout.html ===
    33 
    34 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}}}:
     16The sequence to include Foundation base styles is encoded in a view template {{{views/foundation.css.html}}}, so it can easily be added to {{{layout.html}}}:
    3517
    3618{{{
    … …  
    5234}}}
    5335
     36=== Scripts ===
     37
    5438Additionally, 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}}}:
    5539
    … …  
    6044</html>
    6145}}}
     46
     47== Theme Styles ==
     48
     49The SCSS-built {{{theme.css}}} style sheet is included at the end of {{{css.cfg}}}:
     50
     51{{{
     52...
     53../themes/THEME/theme.css
     54#../themes/THEME/style.css
     55# Final line required for parsing
     56}}}
     57
     58It can be followed by an optional {{{THEME/style.css}}} to add CSS for template-specific elements as well as final overrides. The {{{style.css}}} style sheet is not built from SCSS, so it can be edited directly.