Quick Facts

  • From twig-templating you have comfortable access to the Hublify Style Manager App.
  • The Hublify Style Manager allows you ...
    • define one or more Style Themes.
      Each compiles into one css-file, easy includable.
    • define optionally sub Style Schemes within a Theme.
    • define css-classes or css-style properties and more (very flexible!)
  • You can query the Style Manager either to get css-files to include or direct style properties for (HTML-) inline styling - e.g. for HTML-Emails.


Twig Functions

The following functions are available within the Hublify's Template Engine as part of the Hublify StyleManager Instance:  hublify.styleManager.<...> :


.getCssInclude()

Returns a Html-Source-Code-Snippet for the <head> part.

  • Call this to dynamically (based on your Render-Env's "style_themes"-config) create an appropriate <head><link ....> - CSS-Include-Block.
  • This regards the dynamic css-filenames, with their compile-timestamps included.
  • This calls internally .getCssFiles().


Example (twig)

<html>
  <head>
    ...
    {{ hublify.styleManager.getCssInclude() }}
    ...
  </head>
...

.getCssFiles()

Returns an array of configured "theme(s) to use" from within your Site's Render-Env "style_themes".


.getProperty(...)

Get a Style Property's configured value. Depending of the Style Property's Type the returned type may differ, but usually this a string.

  • Common use is to get Style Configurations where you need to render inlne-html-styles and cannot use css-classes (e.g. in HTML-Emails, etc.)


Syntax

getProperty (string|null $property, string|null $scheme = null, string|null $theme = null): mixed

  • $property (required)
    The Style Property's Label

  • $scheme (optional)
    If given then that property value correlated for that Scheme is returned.

  • $theme (optional)
    If given then Hublify searches explicitly only within this Theme for that Property (and Scheme).
    If not given then the default Theme (configured in the Site's Render-Env: First Theme defined there) is used.


Example - simple (twig)

<span style="{{ hublify.styleManager.getProperty('primary_color') }}">Hello World!</span>


.inlineThemeCss(...)

Prints out (aka "inlines"...) a Theme's css-file-content.

Be sure, that the Theme's css-file is compiled beforehand!

Syntax

inlineThemeCss(string|null $theme = null): string

  • $theme (optional) The Theme-Label of the Theme to include.
    If not given then the default Theme (configured in the Site's Render-Env: First Theme defined there) is used.


Example - simple (twig)

...
    <style>
        {{ hublify.styleManager.inlineThemeCss('my-fancy-theme') }}
    </style>
...