glorpen / style-embedder-bundle
Bundle for embedding css style into html style tags for eg. newsletters
Installs: 523
Dependents: 0
Suggesters: 1
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:symfony-bundle
Requires
- ext-dom: *
- natxet/cssmin: @dev
- symfony/css-selector: *
- symfony/symfony: 2.*
Requires (Dev)
This package is not auto-updated.
Last update: 2024-04-13 11:51:11 UTC
README
Parses given CSS styles and applies it to html elements. Embedding is often needed in newsletters - with inline styles it should look good in any browser/client and you don't have to mantain style spaghetti :)
Since css is embedded into style attribute, pseudo selectors are not supported (:hover,:nth-child, etc).
You can use any css selector combination. Multiple selectors will be applied to single element with accounting for css selector specifity, so you can write:
css
* { color: red; } #myId { color: blue; }
How to install
- add requirements to composer.json:
json
- {
- "require": {
"glorpen/style-embedder-bundle": "@dev"
}
}
- enable the plugin in your AppKernel class
app/AppKernel.php
php
<?php
class AppKernel extends AppKernel { public function registerBundles() { $bundles = array( ... new GlorpenStyleEmbedderBundleGlorpenStyleEmbedderBundle(), ... ); } }
Usage
Rendering with Twig
Template:
twig
- {% block style %}
- .footer * {
color: silver;
}
- .footer p {
font-weight: bold;
- }
- .footer p > span {
font-weight: normal;
} h1 { font-size: 20px; }
{% endblock %} {% block html %} <html> <head></head> <body> <h1>Some Header</h1> <div class="footer"> <p>Address: <span>Our address</span></p> <p>Tel.: <span>123-456-789</span></p> </div> </body> </html> {% endblock %}
Render:
php
<?php
$embedder = $container->get("glorpen.style_embedder") $ret = $embedder->render('template.html.twig');
You will get:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><head></head><body> <h1 style="font-size:20px;">Some Header</h1> <div class="footer"> <p style="color:silver;font-weight:bold;">Address: <span style="color:silver;font-weight:normal;">Our address</span></p> <p style="color:silver;font-weight:bold;">Tel.: <span style="color:silver;font-weight:normal;">123-456-789</span></p> </div> </body></html>
Simple rendering
Embedder can handle plain data too.
php
<?php
$styles = '* { font-weight: bold; }'; $html = ' .... ';
$embedder = $container->get("glorpen.style_embedder") $ret = $embedder->embed($styles, $html);