jonkempjonkemp
271

Gulp Inline Css

screenshot of Gulp Inline Css

Inline linked css in an html file. Useful for emails.

Github

Overview

Gulp-inline-css is a powerful tool designed to enhance your HTML email development process. By inlining CSS properties into the style attributes of HTML elements, it ensures that styles render consistently across various email clients, which often have limited support for external stylesheets. This plugin streamlines the step of converting your linked styles into inline styles, making it an essential asset for anyone focused on email marketing or web development needing quick, reliable rendering of HTML content.

With the recent update to version 3.0, this tool implements a more efficient promise-based architecture, making it faster and easier to integrate into your existing Gulp workflows. Whether you're embedding HTML into third-party sites or looking to speed up page rendering, Gulp-inline-css is a practical solution that addresses common pain points in web and email development.

Features

  • Promise-Based: Utilizes promises with inline-css version 2.0 for improved performance and easier integration.

  • Customizable Options: Offers numerous options such as extraCss, applyStyleTags, and applyLinkTags to tailor the inlining process to your specific needs.

  • Efficient Rendering: Inlining CSS reduces external requests, leading to faster page load times and enhanced user experience in emails and web pages.

  • Preserve Media Queries: Ability to preserve media queries while inlining, ensuring that responsive design elements remain functional.

  • Ignore Code Blocks: Supports code blocks in template languages (like EJS and Handlebars) to ensure that your markup remains intact during processing.

  • Attribute Application: Offers options to apply pixel widths and table attributes, giving you more control over the final layout of your emails and HTML content.

  • Data-Embed Support: Provides special markup to exempt certain elements from inlining, allowing you to implement CSS hacks for better compatibility with different email clients.

  • Streamlined Installation: Easily installable via npm, making it simple to add to your existing Gulp setup.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.