Code Monkey home page Code Monkey logo

slinky's Introduction

Slinky 💎 ✉️

💾 Download 💎 One-click Install via Sketchpacks 🐞 Report an issue ⭐️ Share love

Export your Sketch designs as HTML email templates

Slinky demo

Slinky is a Sketch plugin that allows you to export Sketch artboards as ready–to–send HTML e-mail templates.

Installation

  1. Download, unzip and double-click the Slinky.sketchplugin file and let Sketch automatically install the plugin for you
  2. Open up your Sketch file and select the Artboard with your template design
  3. Go to Plugins -> Slinky -> Export Selected Artboard from the Sketch top menu bar
  4. Choose the folder where to export the template
  5. Voilà!

We have prepared some good to go Sketch templates located in templates directory just for you 🎁

Important Guidelines

Slinky is not perfect yet, so to get the best result, there are some things to remember creating you design file:

⚠️ Images and icons

Slinky will automatically export image and icon assets, but you need to individually mark them as Exportable

⚠️ Links

Go to Plugins -> Slinky -> Show/Hide Link URL to show the Slinky link input in the inspector sidebar. Select the target layer and fill the Link URL field with the target link or e-mail. For now this does not work for selected text (help needed).

⚠️ Fonts

Slinky does not check the template for custom fonts (yet) and will export the template as it is. For the safest result across different email clients, we suggest you to use cross-platform fonts only:

  • Sans Serif Safe Fonts

    • Arial
    • Arial Black
    • Century Gothic
    • Geneva
    • Lucida
    • Lucida Sans
    • Lucida Grande
    • Tahoma
    • Trebuchet MS
    • Verdana
  • Serif Safe Fonts

    • Courier
    • Courier New
    • Georgia
    • MS Serif
    • Palatino
    • Palatino Linotype
    • Times
    • Times New Roman

Feedback and support

Slinky is an early experiment by Finch.io team and does only the basic stuff for now. We encourage you to help make Slinky more awesome by reporting issues and feature requests right here at github or via email at [email protected].

slinky's People

Contributors

adamkirkwood avatar moskvin avatar rihardsgravis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slinky's Issues

Is Slinky dead?

Very cool work but do you intend to continue building the Slinky plugin? If not, would you let the interested parties know up front on your readme page?

Can't see images and assets in HTML

I saved my sketch file, exported the artboard as an HTML file and exported all my assets too (in a folder) after slicing them and marking them exportable. Still I am unable to preview them in my browser.
Can somebody help me fixing this isuue?

Background images should not repeat

Might be best to add another CSS property to CSS background propoerty in so that they don't repeat in containers that are larger than the image generated.

Had an issue where the image was not generated the extra whitespace in the artboard.

background-repeat:no-repeat

<div style="display:block;background-image:url(assets/[email protected]);background-size: 100%;background-repeat:no-repeat; width:600px;height:634px;">

impossible to export to HTML

I downloaded the Slinky plugin for Sketch that you uploaded to Github.
Unfortunately I cannot export my email template to html, when I export it, it doesn’t save anything. I just click on export and then the export window closes but no site pop ups like in your example on Github.
I also made each asset exportable.

Hoping to hear from you soon.

Option to exclude in-lining CSS declarations

Would be great if there was a way to exclude the CSS from being inlined. In a lot of server environments, people use tools like this to programmatically in-line CSS into HTML email templates. We do this too so we can maintain a "core" set of declarations that control branding etc. and an template-specific style.css file.

This way, we wouldn't have to change the in-line styles of every email template whenever we make changes to our global styles + it gives us the chance to create truly dynamic transactional emails.

Otherwise, this is an AMAZING and essential plugin. You're saving me a lot of time! Thank you.

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Export to Inky

Quick suggestion, but this plugin should be able to export to Inky, and if possible follow the Foundation Email guidelines, so we developers can use it as a base template.

Slinky wont export

Hi I am using slinky on sketch, Macbook pro touch bar 13" and when ever i try to export out a simple design as a test (some text on a square) to my desktop its not there and its not backed up on my iCloud either. so i am guessing its just not export anything out of the programme

i am using the trial and will be purchasing sketch on the 17th Aug but does using it on the trial make it not work. ?

Email template missing CSS Reset

Just as in traditional web development, it’s a good idea to provide some reset CSS to the emails you build. For the same reason it’s done when building a site, adding a reset to an email helps to normalize how the code gets rendered across multiple email clients. (MailChimp)

Here are a few examples specific to email clients:

Generate Responsive Code

Need to make it so that Slinky generates responsive code. I think as long as it made it so that the everything stacked on top of each other in mobile clients in the order groups were created in Sketch it wouldn't be too difficult.

Note: Since this is email, it'll need to stack without media queries. Perhaps exporting it to Inky (Foundation for Emails) code would work well for that.

Can't export it

Dear,

For some reason Slinky doesn't work.
When I click on export selected artboard i can save it on my desktop, but when I check my desktop nothing is there.. please help me (and yes I have an artboard selected)

Sincerely,

Issues with Sketch 49

Hi there!

Slinky 0.1.5 is interfering with text layers dimensions during editing in docs authored in v48.2 and opened in v49.

v0.1.5 will be automatically disabled in Sketch 49.1, so it would be awesome if you could put out an update that fixes the issue.

Thanks in advance!

Images

The images and links are not showing up I have exported them and sliced them and I cant get the to appear.

Omit css on images

Images that have styling applied using sketch UI need to have their css styles on the image (things like drop shadow, blur, etc) omitted. Sketch already exports the image with the styling on it. Adding the css rules on those images causes weird side effects (random blocks surrounding image, etc).
screen shot 2018-09-19 at 11 54 11 pm

Should actually look like...
screen shot 2018-09-19 at 11 55 55 pm

Export fails due to how shapes are handled

Adding things like a star to the page causes it to crash during export. This is within the isCircle function where it calls var points = layer.layers()[0].allCurvePoints(); on helpers.ts (line 82).

Commenting out the code on the js file within the plugin bundle (lines 1113-1121) seemed to fixed the issue for now, but it means I can't add any other shapes aside from rectangles and circles.

Sketch Version: 51.3

Email template missing doctype

As with web pages, a missing DOCTYPE tag will throw an email into Quirks Mode, where email rendering gets even weirder than it normally is. Adding a DOCTYPE is enough to trigger some standard mode on most email clients. Here is a rundown of how doctypes impact HTML emails

I usually go with the HTML5 <!DOCTYPE html>, but it's up to you 😀

Images not exporting

The images for some reason are not exporting. I have them all set up to export but none get exported.
Any help would be greatly appreciated.

Thanks for the hard work!

Export is not working

I've tried to export the document, but nothing gets exported at all. Am I missing something?

not work

Please look it everything/element like a typo, an image does not show.

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.