Giter Site home page Giter Site logo

stvhanna / inline-styler Goto Github PK

View Code? Open in Web Editor NEW

This project forked from davecranwell/inline-styler

0.0 1.0 0.0 426 KB

Converts CSS rules into inline style attributes for easier HTML email development

Home Page: http://inlinestyler.torchboxapps.com/

Python 54.96% CSS 4.32% JavaScript 34.84% HTML 5.88%

inline-styler's Introduction

Inline Styler makes CSS compatible with email clients.

Try it here: http://inlinestyler.torchbox.com

It's a service which, when given a block of HTML including CSS, will parse the CSS and convert it to inline style="" attributes on each elements matched by the CSS rules found.

The benefit of this is primarily in developing HTML emails. The most common email clients have patchy support for <style> or <link> elements, but do on the whole support a varied set of CSS properties. Its therefore necessary to instead define styles in "style" attributes on each of the elements themselves, which is tedious for anything but the simplest of emails and introduces significant code maintenance problems. The Inline Styler frees up the developer to write CSS in less tedious/more maintainable ways: using proper selectors and rules, grouped in either a stylesheet or a <style> block. The Inline Styler converts these rules into the inline "style" attributes for you.

Additionally, among the email clients who do support CSS, support for individual CSS properties is variable. The Inline Styler will analyse your CSS and estimate a compatibility rating across all the email clients as a whole, alerting you to any particular properties likely to reduce compatibility.

Usage

To use this app, CSS you wish to be "inlined" must be declared in the HTML either:

  • linked absolutely e.g <link rel="stylesheet" href="http://mysite.com/styles.css" /> or
  • provided in a <style> block in the <head> of the HTML, without @imports

Self-hosting requirements

This file requires periodic updates as Campaign Monitor update their spreadsheet. Comparing the existing file to CM's spreadsheet, the key differences are that their XLS has been stripped of formatting, blank lines or duplicate groups of selector/element information.

Support

Inline Styler was written several years ago partly as a personal "Hello World" experiment to learn Django/Python. I welcome anyone willing to fork and contribute to the code, but unfortunately I don't have time to maintain this myself - for example updating the css compliance CSV. I'm instead releasing it to the public after many requests for the source.

Questions/Discussion

  • Find me on twitter at @davecranwell

inline-styler's People

Contributors

davecranwell avatar

Watchers

Steve Hanna avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.