For everyone who wants to easily inline css as style-attributes Hublify brings some very helpful functions in connection with the Style Manager.

Write in your Hublify-template ...

<div style="{{ hublify.styleManager.getProperty('primary_color', 'myScheme', 'myTheme') }}"> Aloha! This is a messagebox. </div>

... to get it rendered into something like this:

<div style="background-color:#ff000080;border-radius:4px;color:#ffffff;"> Aloha! This is a messagebox. </div>


When to use?

Usually, you want to try to avoid css-inlining in general. Just, because of D-R-Y (do not repeat yourself!): For that css-classes are made for!

But, ... sometimes you can not rely on really functioning render-environments supporting all features of css-classes. Like :

  • many Email-Clients (Outlook, Google Mail, ...)
  • html2pdf converter
  • ... other simple or restricted html-render-engines


Pros & Cons

Generically making use of css-inline-styles has of course some advantages & disadvantages to considered.

Pro

  • deterministic style-results!
    ... in environments where you can not use css-classes!

Con

  • larger html source-code
  • slower rendering process