gulp-inline-css - Inline linked css in an html file. Useful for emails.

  •        26

Inline your CSS properties into the style attribute in an html file. Useful for emails. Inspired by the grunt plugin grunt-inline-css. Uses the inline-css module.

https://github.com/jonkemp/gulp-inline-css

Dependencies:

inline-css : ^2.4.0
plugin-error : ^1.0.1
through2 : ^2.0.3

Tags
Implementation
License
Platform

   




Related Projects

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

laravel-mail-css-inliner - Inline the CSS of your HTML emails using Laravel

  •    PHP

Most email clients won't render CSS (on a <link> or a <style>). The solution is inline your CSS directly on the HTML. Doing this by hand easily turns into unmantainable templates. The goal of this package is to automate the process of inlining that CSS before sending the emails. Using a wonderful CSS inliner package wrapped in a SwiftMailer plugin and served as a Service Provider it just works without any configuration.

email-templates - :mailbox: Create, preview, and send custom email templates for Node

  •    Javascript

Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more! Made for sending beautiful emails with Lad.NEW: v3.x is released (you'll need Node v6.4.0+); see breaking changes below. 2.x branch docs available if necessary.

transactional-email-templates - Responsive transactional HTML email templates

  •    HTML

Transactional HTML emails often get neglected. Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers.We’ve tried to remove some of the pain for you and open-sourced a collection of common templates for transactional email.


grunt-email-workflow - A Grunt workflow for designing and testing responsive HTML email templates with SCSS

  •    CSS

Designing and testing emails is a pain. HTML tables, inline CSS, various devices and clients to test, and varying support for the latest web standards. This Grunt task helps simplify things.

react-html-email - Create elegant HTML email templates using React.

  •    Javascript

Modern HTML emails are a tangle of archaic HTML and inline styles. This library encapsulates the cruft into simple React components and helps avoid common pitfalls. react-html-email provides a set of components for a standard 600px table layout (inspired by HTML Email Boilerplate). React's Supported Tags and Attributes are extended to include a few deprecated attributes useful for legacy clients. In addition, a style prop validator is included which uses Campaign Monitor's CSS Support Guide to check for potential compatibility issues across email clients.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

premailer-rails - CSS styled emails without the hassle.

  •    Ruby

CSS styled emails without the hassle. This gem is a drop in solution for styling HTML emails with CSS without having to do the hard work yourself.

gulp-clean-css - Minify css with clean-css.

  •    Javascript

This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself. See the CleanCSS options.

juice - Juice inlines CSS stylesheets into your HTML source.

  •    Javascript

Given HTML, juice will inline your CSS properties into the style attribute.Juice has a number of functions based on whether you want to process a file, HTML string, or a cheerio document, and whether you want juice to automatically get remote stylesheets, scripts and image dataURIs to inline.

Radium - A toolchain for React component styling

  •    Javascript

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

pynliner - Python CSS-to-inline-styles conversion tool for HTML using BeautifulSoup and cssutils

  •    Python

Python CSS-to-inline-styles conversion tool for HTML using BeautifulSoup and cssutils

critical-path-css-demo - Above-the-fold CSS generation + inlining using Critical & Gulp

  •    ApacheConf

Generate and inline critical-path CSS example using Critical. Live demo of before and after critical-path CSS generation and inlining.

postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

  •    Javascript

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

jsxstyle - Inline style system for React and Preact

  •    Javascript

This repository is the monorepo for runtime versions jsxstyle as well as a few tools designed to be used with jsxstyle. jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance, and has little regard for existing CSS orthodoxy.

SVGInjector - Fast, caching, dynamic inline SVG DOM injection library

  •    Javascript

A fast, caching, dynamic inline SVG DOM injection library. Developed by Waybury for use in iconic.js, part of the Iconic icon system. There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

Chartist-js - Simple responsive charts

  •    Javascript

Chartist.js is a simple responsive charting library built with SVG. Its goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves.

usus - Webpage pre-rendering service. ⚡️

  •    Javascript

Static HTML pages with inline CSS load faster and are better indexed than single page applications (SPA). ūsus pre-renders single page applications into static HTML with the critical CSS inlined. Removing the blocking CSS and inlining the CSS required to render the page increases the perceived page loading speed. Presumably, improves SEO by reducing the page loading time.