jquery inlineStyler Plugin

A jQuery plugin for converting CSS styles rules into inline style attributes.

Download

Download it for free on github

Features

Example

Before:

    
    <style>
        * {font-family: Arial, sans-serif;}
        h1 {font-size:16px;margin:25px 0;line-height:1.2;}
        p {margin: 15px 0;line-height:1.8;}
    </style>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Cupiditate ab ea perspiciatis repellendus eligendi ad sed saepe modi!</p>

After:

    <style>
        * {font-family: Arial, sans-serif;}
        h1 {font-size:16px;margin:25px 0;line-height:1.2;}
        p {margin: 15px 0;line-height:1.8;}
    </style>
    <h1 style="font-family: Arial, sans-serif;font-size:16px;margin:25px 0;line-height:1.2;">Lorem ipsum dolor sit amet</h1>
    <p style="font-family: Arial, sans-serif;margin: 15px 0;line-height:1.8;">Cupiditate ab ea perspiciatis repellendus eligendi ad sed saepe modi!</p>

Plugin Options and Usage

To use the plugin you need >= jQuery 1.5 and the plugin itself:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="jquery.inline-styler.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $("#yourSelector").inlineStyler( );
    });
</script>

Options

The options object is not required. By default, all supported email styles rules will be added to all HTML elements. Any otions you supply will completely override the defaults. You can specify your own options in an object which is passed in as an argument on the main plugin function call. The options object is split into two sections, propertyGroups and elementGroups, both are needed for the plugin to work correctly.

var cssRules = {
    'propertyGroups' : {
        'block' : ['margin', 'padding'],
        'inline' : ['color'],
        'headings' : ['font-size', 'font-family',]
    },
    'elementGroups' : {
        'block' : ['DIV', 'P', 'H1'], 
        'inline' : ['SPAN'], 
        'headings' : ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
    }
}
$(window).load(function() {
    $("#yourSelector").inlineStyler( cssRules );
});

Element Groups

Element Groups (elementGroups) define which HTML elements the style rules (defined by Property Groups) will be written to. Make sure they are all uppercase. If there is only one value for an element group, it must still be an array (see 'inline' below for an example).

'elementGroups' : {
    'block' : ['DIV', 'P', 'H1'], 
    'inline' : ['SPAN'], 
    'headings' : ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
}

Property Groups

Property Groups (propertyGroups) can be called anything you like, but they must match up with the names of the Element Groups. The property groups define which style rules will be written to the HTML elements defined by the Element Groups. If there is only one value for a property, it must still be an array (see 'inline' below for an example).

'propertyGroups' : {
    'block' : ['margin', 'padding'],
    'inline' : ['color'],
    'headings' : ['font-size', 'font-family',]
}

Limitations:

TODO

Alternatives

There are a couple of alternative methods of acheiving the same effect, but they all have their own drawbacks...

License

inlineStyler is under MIT License

That's it!

By Karl Payne

Comments

There are no comments, don't be shy, somebody has to be first.

Leave a comment