glorpen/style-embedder-bundle

Bundle for embedding css style into html style tags for eg. newsletters

Maintainers

Details

github.com/glorpen/GlorpenStyleEmbedderBundle

Source

Issues

Installs: 527

Dependents: 0

Suggesters: 1

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Type:symfony-bundle

v0.1.1 2014-01-27 19:41 UTC

Requires

Requires (Dev)

GPL-3.0 20436d0d697479ac45f25966d9258bf6cc243df3

  • Arkadiusz DziÄ™giel

This package is not auto-updated.

Last update: 2024-07-20 13:26:42 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:

* { color: red; }
#myId { color: blue; }

How to install

  • add requirements to composer.json:
{
    "require": {
        "glorpen/style-embedder-bundle": "@dev"
    }
}
  • enable the plugin in your AppKernel class

app/AppKernel.php

<?php

class AppKernel extends AppKernel
{
   public function registerBundles()
   {
       $bundles = array(
           ...
           new Glorpen\StyleEmbedderBundle\GlorpenStyleEmbedderBundle(),
           ...
       );
   }
}

Usage

Rendering with Twig

Template:

{% 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

$embedder = $container->get("glorpen.style_embedder")
$ret = $embedder->render('template.html.twig');

You will get:

<!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

$styles = '* { font-weight: bold; }';
$html = ' .... ';

$embedder = $container->get("glorpen.style_embedder")
$ret = $embedder->embed($styles, $html);