Follow MVC pattern in twig templates for inline CSS

By podarok on 18 May 2022

Change record status:

Published (View all published change records)

Project:

QS Quacquarelli Symonds libraries

Introduced in branch:

main

Introduced in version:

main

Description:

Instead of mixing inline styles and html code we should keep CSS in libraries, attached to twig and use CSS selectors and classes in order to inject styles for specific elements on a page

See respective CR

Before

qs-acknowl-mail-user.twig

...
                                <p style="font-size:11pt;font-family:Calibri,sans-serif;margin:0;"><img data-imagetype="External" src="{{ submitted_data['base_url'] }}/themes/custom/tu_d8/templates/html-mails/images/spacer.gif" id="x__x0000_i1027" style="width:0.49pt;height:0.49pt;"></p>
...

After

module.libraries.yml

qsMailStyle:
  version: 1.x
  css:
    theme:
      stylesheets/mail.css: { preprocess: false }

{{ attach_library('qs_user_profile/qsMailStyle') }}

....

                                <p class="mail_paragraph><img data-imagetype="External" src="{{ submitted_data['base_url'] }}/themes/custom/tu_d8/templates/html-mails/images/spacer.gif" id="x__x0000_i1027" class="mail_img"></p>

Impacts:

Module developers

Themers