CocoaScript Programmer

King of App is looking for a freelance programmer who has worked with CocoaScript in a professional setting and considers themselves to be proficient. The applicant must also have experience with creating Sketch plugins as well as having knowledge with how Web Components work.

What should the plugin do?

At King of app, we develop reusable components which can be adapted into each user’s application. Each application created by a user has an associated visual style or theme. These styles and themes are designed in Sketch so that developers can easily manipulate the application while still following suit.

It is necessary for the applicant to develop a plugin that allows exporting designs, made with the Sketch tool, to HTML and CSS code which can also be efficiently incorporated into a Polymer element.

Below is an example of a button element which was designed using Sketch and underneath is its corresponding Polymer element.

Click here to see the sketch design: http://kingofapp.es/wp-content/uploads/2017/08/sketch.jpg

<link rel="import" href="../../../../bower_components/polymer/polymer.html"><link rel="import" href="../../../../bower_components/koa-behaviors/koa-button-behavior.html"><link rel="import" href="../../styles/default-theme.html">

<dom-module id="healthy-life-button"> <template> <style> :host { display: inline-block; position: relative; box-sizing: border-box; min-height: 50px; background: transparent; text-align: center; font: inherit; outline-width: 0; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; padding: 16px; font-size: 18px; color: var(--link-color, --secondary-text-color); margin: 0 7px;

@apply(--button); }

:host(:not([link])) { min-width: 162px; }

:host([disabled]) { background: transparent; color: var(--disabled-button-text-color, --disabled-text-color); cursor: auto; pointer-events: none;

@apply(--disabled); }

:host([pressed]) { color: var(--buttons-background-color, --primary-color); }

:host([disabled]):not([link]){ background: var(--disabled-button-background-color, --divider-color); }

:host([pressed]:not([link])) { background-color: var(--button-background-color-pressed, --accent-color); color: white; }

:host(:not([link]):not([disabled]):not([pressed])) { background-color: var(--buttons-background-color, --primary-color); }

:host(:not([link])) { color: white; }

:host([big]) { width: 100%; }

:host(:not([big]):not([link]).keyboard-focus) { @apply(--button-keyboard-focus); }

:host([big].keyboard-focus) { @apply(--button-big-keyboard-focus); }

:host([link]):not([disabled]):not([pressed])) { color: var(--link-color, --secondary-text-color); }

:host([disabled])([link]) { background: transparent; }

:host([link]) { text-align: left; letter-spacing: 0.5px; }

:host([link].keyboard-focus) { color: var(--link-keyboard-focus-color, --dark-accent-color); @apply(--button-link-keyboard-focus); }

</style>

<!-- write your template here --> <content></content> <!-- end template --> </template>

<script> Polymer({ is: 'healthy-life-button',

behaviors: [ Polymer.KoaButtonBehavior ] }); </script></dom-module>