For everyone who wants to easily inline css as style-attributes Hublify brings some very helpful functions.
Write in your Hublify-template ...
<div style="{{ hublify.style_get('msgBox', myStyleCfg) }}"> 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>
The concept
The basic idea at render runtime is that ...
- you can define or load one or more hfy-style-config arrays, using hublify.styles_set(...),
- you can optionally merge hfy-style-configs to achieve some sort of style-inheritance, using hublify.styles_merge(...),
- ... and generate many inline html-style-atrribute-strings, using hublify.style_get(...) !
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
Defining a Hublify-style-config
The Hublify style-config array contains two major parts:
- The “style” part where you can define all your base styles
- and the optional “templates” part, where you can define template styles that supplement or overwrite the base styles later.
Lets have a look at the Hublify style-config array.
{% set stylesJSONStr =
{
"style":
{
...
},
"templates":
{
...
}
}
%}Array part “style”
At first in the “style” part we can define style-containers labeled like “body” or “footer”. You can freely choose these labels of the containers. We will refer to these containers later. Let us add two containers to the “style” part.
{% set stylesJSONStr =
{
"style":
{
“body”:
{
...
},
“footer”:
{
...
}
},
"templates":
{
...
}
}
%}Now we can add style definitions to the containers. All the style informations needs to be wrapped. You can freely choose the name of the wrapper, but we recommend using typical HTML tags for a better overview.
{% set stylesJSONStr =
{
"style":
{
“body”:
{
“h1”:
{
“font-size”: “32px”,
“color”: “black”
},
“h2”:
{
“font-size”: “24px”,
“color”: “black”
}
},
“footer”:
{
“h2”:
{
“font-size”: “16px”,
“color”: “black”
}
}
},
"templates":
{
...
}
}
%}Please note that the name of the key corresponds to the css command and the value to the css value. Let us add styles for a headline.
Array part “templates”
Now let us take a closer look at the template styles. There are moments when we want to deviate from our base style. For this reason, there are template styles that supplement or overwrite our base styles.
First we have to give our templates a name. We will create a template called “attention”.
{% set stylesJSONStr =
{
"style":
{
“body”:
{
“h1”:
{
“font-size”: “32px”,
“color”: “black”
},
“h2”:
{
“font-size”: “24px”,
“color”: “black”
}
},
“footer”:
{
“h2”:
{
“font-size”: “16px”,
“color”: “black”
}
}
},
"templates":
{
“attention”:
{
...
}
}
}
%}Now we can add style definitions to the template. As with the base styles, the style information in the templates must also be wrapped.
{% set stylesJSONStr =
{
"style":
{
“body”:
{
“h1”:
{
“font-size”: “32px”,
“color”: “black”
},
“h2”:
{
“font-size”: “24px”,
“color”: “black”
}
},
“footer”:
{
“h2”:
{
“font-size”: “16px”,
“color”: “black”
}
}
},
"templates":
{
“attention”:
{
“h2”:
{
“color”: “red”
}
}
}
}
%}We now have a template that, as soon as it is applied, sets the font color to red. The color of the base style is overwritten. We can also add further attributes which, if they have not been defined in the base style, will be added. Let us add some text decoration.
{% set stylesJSONStr =
{
"style":
{
“body”:
{
“h1”:
{
“font-size”: “32px”,
“color”: “black”
},
“h2”:
{
“font-size”: “24px”,
“color”: “black”
}
},
“footer”:
{
“h2”:
{
“font-size”: “16px”,
“color”: “black”
}
}
},
"templates":
{
“attention”:
{
“h2”:
{
“color”: “red”,
“text-decoration”: “underline”
}
}
}
}
%}Wonderful! We created an array that enables us to easily use inline css.
How to use base styles and template styles
First we have to transfer our Hublify config-style array to the Hublify object (function “styles_set”).
{% set r = hublify.styles_set(stylesJSONStr) %}Then we have to merge our styles with the function “styles_merge”.
{% set ourMergedStyle = hublify.styles_merge(‘body’, ‘attention’) %}This function needs the container we want to use as the first parameter. We can optionally use a template style as the second parameter and some custom style as the third parameter. More information about custom styles further.
Now we can use the function “style_get” to get some beautiful inline css easily.
<h2 style="{{ hublify.style_get(‘h2’, ourMergedStyle) }}">My Title</h2>The rendered result would look like this.
<h2 style="font-size: 24px; color: red; text-decoration: underline;">My Title</h2>
How to use the custom styles
We have seen how base styles and templates are defined and used. If you want to deviate from the base styles and templates in special cases, you can use custom styles. The customs styles will supplement or overwrite the base style and the template styles.
{% set customStyleArray =
{
‘h2’:
{
‘color’: ‘green
}
}
%}We can use the custom style array as a third parameter of the function “styles_merge”.
{% set ourMergedStyle = hublify.styles_merge(‘body’, ‘attention’, customStyleArray) %}If we use the function “style_get” as before, the result would look like this.
<h2 style="font-size: 24px; color: green; text-decoration: underline;">My Title</h2>