Merge pull request #1 from janantala/canary

love-heart web component
janantala · Oct 31, 2013 · 16165b9 · 16165b9
2 parents ea4e05c + 828d86b
commit 16165b9
Show file tree

Hide file tree

Showing 6 changed files with 300 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components/
diff --git a/README.md b/README.md
@@ -1,4 +1,50 @@
-love-heart
-==========
+# &lt;love-heart&gt;
 
 Pulsing love heart web component
+
+#### Demo
+Check out https://janantala.github.io/love-heart/
+
+![love](https://raw.github.com/janantala/love-heart/canary/img/love.gif)
+```html
+Made with <love-heart></love-heart> by me
+```
+
+### Apply your own CSS:
+
+```html
+Made with <love-heart class="blue" ></love-heart> by me
+Made with <love-heart class="big" ></love-heart> by me
+```
+
+# Usage
+
+1. Install love heart component:
+
+  ```
+  ❯ bower install love-heart
+  ```
+
+2. Import Web Components' polyfill:
+
+	```html
+	<script src="bower_components/polymer/polymer.min.js"></script>
+	```
+
+3. Import Custom Element:
+
+	```html
+	<link rel="import" href="bower_components/love-heart/love-heart.html">
+	```
+
+4. Start using it!
+
+	```html
+	<love-heart></love-heart>
+	```
+
+# License
+
+The MIT License
+
+Copyright (c) 2013 Jan Antala, http://janantala.com
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "love-heart",
+  "version": "0.1.0",
+  "authors": [
+    "Jan Antala <hello@janantala.com>"
+  ],
+  "description": "Pulsing love heart web component",
+  "main": "love-heart.html",
+  "keywords": [
+    "love",
+    "heart",
+    "web-components",
+    "polymer"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/janantala/love-heart",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "img",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "v0.0.20131025"
+  }
+}
diff --git a/img/love.gif b/img/love.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>&lt;love-heart&gt;</title>
+
+  <!-- Importing Web Component's Polyfill -->
+  <script src="bower_components/polymer/polymer.min.js"></script>
+  <script>
+    if (!window.Polymer) {
+      var script = document.createElement('script');
+      script.src = 'http://www.polymer-project.org/polymer.min.js?20131025';
+      document.head.appendChild(script);
+    }
+  </script>
+
+  <!-- Importing Custom Elements -->
+  <link rel="import" href="love-heart.html">
+  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,300' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
+
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Titillium Web', sans-serif; 
+      text-align: center;
+    }
+
+    header {
+      background-color: rgb(58,126,198);
+      color: white;
+      padding: 5px 0;
+    }
+
+    a {
+      color: white;
+      text-decoration: none;
+    }
+
+    a:hover, a:focus {
+      text-decoration: underline;
+    }
+
+    .title {
+      font-weight: 400px;
+    }
+
+    .content {
+      color: rgb(85, 85, 85);
+      min-height: 500px;
+      max-width: 500px;
+      margin: 0 auto;
+    }
+
+    .text-left {
+      text-align: left;
+    }
+
+    footer {
+      background-color: rgb(201,70,59);
+      padding: 5px 0;
+    }
+
+    .line {
+      margin: 10px auto;
+    }
+
+    .code {
+      padding: 2px 10px;
+      background-color: rgb(29,31,33);
+      color: rgb(175,186,183);
+      font-family: 'Droid Sans Mono', 'Titillium Web', sans-serif;
+      font-size: 14px;
+    }
+
+    .code-prompt {
+      font-weight: bold;
+    }
+
+    .code-vial {
+      color: rgb(108,143,167);
+    }
+
+    .code-yellow {
+      color: rgb(230,151,70);
+    }
+
+    .red {
+      color: rgb(201,70,59);
+    }
+
+    .white {
+      color: white;
+    }
+
+    .blue {
+      color: blue;
+    }
+
+    .yellow {
+      color: yellow;
+    }
+
+    .big {
+      font-size: 3.4em;
+    }
+
+    .huge {
+      font-size: 7.4em;
+    }
+
+  </style>
+</head>
+<body>
+  <header>
+    <h1 class="title">&lt;love-heart&gt;</h1>
+    <p><i>Pulsing love heart Web Component</i></p>
+
+    <p class="code">
+      <span class="code-prompt code-vial">❯</span> bower install <span class="code-yellow">love-heart</span>
+    </p>
+
+    <p>
+      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=love-heart&type=watch&count=true"
+    allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+
+      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=love-heart&type=fork"
+    allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
+
+      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&type=follow"
+      allowtransparency="true" frameborder="0" scrolling="0" width="132" height="20"></iframe>
+    </p>
+
+  </header>  
+
+  <div class="content">
+
+    <h3 class="text-left">Default element:</h3>
+
+    <div class="line">
+    <p>Made with <love-heart></love-heart> by me</p>
+    <p class="code code-html">
+      Made with <span class="code-vial">&lt;love-heart&gt;&lt;/love-heart&gt;</span> by me
+    </p>
+    </div>
+
+    <h3 class="text-left">Apply your own CSS:</h3>
+
+    <div class="line">
+    <p>Made with <love-heart class="blue"></love-heart> by me</p>
+    <p class="code code-html">
+      Made with <span class="code-vial">&lt;love-heart <span class="code-yellow">class="blue"</span> &gt;&lt;/love-heart&gt;</span> by me
+    </p>
+    </div>
+
+    <div class="line">
+    <p>Made with <love-heart class="yellow"></love-heart> by me</p>
+    <p class="code code-html">
+      Made with <span class="code-vial">&lt;love-heart <span class="code-yellow">class="yellow"</span> &gt;&lt;/love-heart&gt;</span> by me
+    </p>
+    </div>
+
+    <div class="line">
+    <p>Made with <love-heart class="big"></love-heart> by me</p>
+    <p class="code code-html">
+      Made with <span class="code-vial">&lt;love-heart <span class="code-yellow">class="big"</span> &gt;&lt;/love-heart&gt;</span> by me
+    </p>
+    </div>
+
+    <div class="line">
+    <p>Made with <love-heart class="huge"></love-heart> by me</p>
+    <p class="code code-html">
+      Made with <span class="code-vial">&lt;love-heart <span class="code-yellow">class="huge"</span> &gt;&lt;/love-heart&gt;</span> by me
+    </p>
+    </div>
+  </div>
+
+  <footer>
+    <p>Made with <love-heart class="white"></love-heart> by <a href="http://janantala.com">Jan Antala</a></p>
+    <p>2013 Licensed under <a href="http://opensource.org/licenses/MIT">MIT</a></p>
+  </footer>
+</body>
+</html>
diff --git a/love-heart.html b/love-heart.html
@@ -0,0 +1,37 @@
+<polymer-element name="love-heart">
+
+<template>
+
+  <style>
+    @host {
+      display: inline-block;
+      position: relative;
+      top: 0.2em;
+      font-size: 1.4em;
+      color: rgb(201,70,59);
+      -webkit-transform: scale(0.9);
+      -moz-transform: scale(0.9);
+      transform: scale(0.9);
+      -webkit-animation: love 0.5s infinite linear alternate-reverse;
+      -moz-animation: love 0.5s infinite linear alternate-reverse;
+      animation: love 0.5s infinite linear alternate-reverse;
+    }
+
+    @-webkit-keyframes love {
+      to {-webkit-transform: scale(1.4);}
+    }
+    @-moz-keyframes love {
+      to {-moz-transform: scale(1.4);}
+    }
+    @keyframes love {
+      to {transform: scale(1.4);}
+    }
+  </style>
+
+  ♥
+</template>
+
+<script>
+  Polymer('love-heart', {});
+</script>
+</polymer-element>