GithubHelp home page GithubHelp logo

wildhoney / developerink Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 0.0 3.74 MB

Facilitates the use of ZURB's Ink for developers using the CLI with SASS, Email Testing, Compilation, etc... :octopus:

Home Page: http://zurb.com/ink/

License: MIT License

JavaScript 35.49% HTML 2.82% CSS 61.69%

developerink's Introduction

Developer Ink

Travis   npm   License MIT

Getting Started

Ink is all about creating email templates that work in a wide array of email clients. With the unpredictability of email clients — especially legacy email clients and web-based clients such as Gmail — every little helps when it comes to putting together your email client. DeveloperInk lets Ink do what it does best – the HTML markup and structure, whereas DeveloperInk provides an extension for developers.

  • Code your styles in individual SASS files using partials;
  • Auto-refresh of SASS updates and changes to your HTML document;
  • In-built Node server for testing your email templates;
  • Ability to quickly send test emails using common email providers;
  • Handle multiple email templates to keep all templates in one place;
  • Compile your email templates to a chosen destination once you're happy;
  • Keep your HTML templates free of Ink related markup and styles;
  • Automatically inlines all of your SASS styles to support web-based clients;

To get started with DeveloperInk you'll need to create your configuration file — config.yml — an example is provided in the config-example.yml file, therefore copy that file — or run npm run init — rename it to config.yml and modify the appropriate settings in order to be able to send test emails.

Once you're all up and running with the configuration, create your first template using npm run make my-first-template and follow the steps below depending on what you're after.

Configuration

npm run init

Yields a config.yml in the repository's root that you can use to configure your email provider.

Note: For a list of supported email providers for the provider parameter see the following link.

Make Template

npm run make template-name

Change template-name to a relevant name for the email template. Creates a directory in templates for the name of your template, which contains index.html and a sass directory.

Switch Template

npm run current template-name

Work on another template where the template-name is the name given to your template during the make process – all commands will work from the current template.

Browser Testing

npm run start

Initialises the server on port 5000 for the current template whilst watching for any changes to your SASS files for automatic compilation to CSS.

Email Testing

npm run test

Uses the aforementioned configuration options to send a test email to the recipients via your chosen provider.

Note: For Gmail you need to enable access for less secure apps (see Stackoverflow): https://www.google.com/settings/security/lesssecureapps

Render Template

npm run render developerink.html

Render the finished email template to the developerink.html file, which inlines all CSS.


developerink's People

Contributors

wildhoney avatar

Stargazers

 avatar

Watchers

 avatar  avatar  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.