Created
January 13, 2015 23:21
-
-
Save grapho/56bbe618264be6793218 to your computer and use it in GitHub Desktop.
Ember Starter Kit // source http://emberjs.jsbin.com/kufeyu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ember Starter Kit</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script> | |
| <style id="jsbin-css"> | |
| /* Put your CSS here */ | |
| html, body { | |
| background: #e7e7e7; | |
| margin: 20px; | |
| } | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| button, .button { | |
| display: inline-block; | |
| cursor: pointer; | |
| background-color: rgba(255, 255, 255, .05); | |
| border: 1px solid rgba(0, 0, 0, .2); | |
| border-radius: 4px; | |
| box-shadow: | |
| inset 0 15px 30px rgba(255, 255, 255, .8), | |
| inset 0 -15px 30px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| color: rgba(0, 0, 0, .6); | |
| font-size: 14px; | |
| font-weight: bold; | |
| line-height: 30px; | |
| text-align: center; | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, .4); | |
| min-width: 30px; | |
| height: 30px; | |
| padding: 0 8px; | |
| margin: 0; | |
| outline: none; | |
| transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; | |
| } | |
| button:hover, .button:hover, | |
| button:focus, .button:focus { | |
| background-color: rgba(0, 0, 0, .05); | |
| border-color: rgba(0, 0, 0, .3); | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .2); | |
| } | |
| .block-button { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| .large-button { | |
| border-radius: 6px; | |
| box-shadow: | |
| inset 0 30px 60px rgba(255, 255, 255, .8), | |
| inset 0 -30px 60px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| font-size: 20px; | |
| line-height: 60px; | |
| min-width: 60px; | |
| height: 60px; | |
| padding: 0 20px; | |
| } | |
| .large-button:hover, | |
| .large-button:focus { | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .3); | |
| } | |
| button:active, .button:active, .large-button:active { | |
| background-color: rgba(0, 0, 0, .1); | |
| box-shadow: | |
| inset 0 -1px 1px rgba(255, 255, 255, .4), | |
| inset 0 1px 2px rgba(0, 0, 0, .1), | |
| 0 -1px 1px rgba(0, 0, 0, .2); | |
| transition: box-shadow 50ms ease, background-color 50ms ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars"> | |
| <h2>New Buttons!</h2> | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="index"> | |
| <hr> | |
| <button>Click</button> | |
| <hr> | |
| <button class="block-button">Click</button> | |
| <button class="block-button">Click</button> | |
| <button class="block-button">Click</button> | |
| <hr> | |
| <button class="large-button">Click</button> | |
| <hr> | |
| <button class="large-button block-button">Click</button> | |
| <button class="large-button block-button">Click</button> | |
| <button class="large-button block-button">Click</button> | |
| <hr> | |
| </script> | |
| <script id="jsbin-javascript"> | |
| App = Ember.Application.create(); | |
| App.Router.map(function() { | |
| // put your routes here | |
| }); | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return ['red', 'yellow', 'blue']; | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ember Starter Kit</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script> | |
| <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"><\/script> | |
| <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"><\/script> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars"> | |
| <h2>New Buttons!</h2> | |
| {{outlet}} | |
| <\/script> | |
| <script type="text/x-handlebars" data-template-name="index"> | |
| <hr> | |
| <button>Click</button> | |
| <hr> | |
| <button class="block-button">Click</button> | |
| <button class="block-button">Click</button> | |
| <button class="block-button">Click</button> | |
| <hr> | |
| <button class="large-button">Click</button> | |
| <hr> | |
| <button class="large-button block-button">Click</button> | |
| <button class="large-button block-button">Click</button> | |
| <button class="large-button block-button">Click</button> | |
| <hr> | |
| <\/script> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">/* Put your CSS here */ | |
| html, body { | |
| background: #e7e7e7; | |
| margin: 20px; | |
| } | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| button, .button { | |
| display: inline-block; | |
| cursor: pointer; | |
| background-color: rgba(255, 255, 255, .05); | |
| border: 1px solid rgba(0, 0, 0, .2); | |
| border-radius: 4px; | |
| box-shadow: | |
| inset 0 15px 30px rgba(255, 255, 255, .8), | |
| inset 0 -15px 30px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| color: rgba(0, 0, 0, .6); | |
| font-size: 14px; | |
| font-weight: bold; | |
| line-height: 30px; | |
| text-align: center; | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, .4); | |
| min-width: 30px; | |
| height: 30px; | |
| padding: 0 8px; | |
| margin: 0; | |
| outline: none; | |
| transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; | |
| } | |
| button:hover, .button:hover, | |
| button:focus, .button:focus { | |
| background-color: rgba(0, 0, 0, .05); | |
| border-color: rgba(0, 0, 0, .3); | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .2); | |
| } | |
| .block-button { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| .large-button { | |
| border-radius: 6px; | |
| box-shadow: | |
| inset 0 30px 60px rgba(255, 255, 255, .8), | |
| inset 0 -30px 60px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| font-size: 20px; | |
| line-height: 60px; | |
| min-width: 60px; | |
| height: 60px; | |
| padding: 0 20px; | |
| } | |
| .large-button:hover, | |
| .large-button:focus { | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .3); | |
| } | |
| button:active, .button:active, .large-button:active { | |
| background-color: rgba(0, 0, 0, .1); | |
| box-shadow: | |
| inset 0 -1px 1px rgba(255, 255, 255, .4), | |
| inset 0 1px 2px rgba(0, 0, 0, .1), | |
| 0 -1px 1px rgba(0, 0, 0, .2); | |
| transition: box-shadow 50ms ease, background-color 50ms ease; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create(); | |
| App.Router.map(function() { | |
| // put your routes here | |
| }); | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return ['red', 'yellow', 'blue']; | |
| } | |
| }); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Put your CSS here */ | |
| html, body { | |
| background: #e7e7e7; | |
| margin: 20px; | |
| } | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| button, .button { | |
| display: inline-block; | |
| cursor: pointer; | |
| background-color: rgba(255, 255, 255, .05); | |
| border: 1px solid rgba(0, 0, 0, .2); | |
| border-radius: 4px; | |
| box-shadow: | |
| inset 0 15px 30px rgba(255, 255, 255, .8), | |
| inset 0 -15px 30px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| color: rgba(0, 0, 0, .6); | |
| font-size: 14px; | |
| font-weight: bold; | |
| line-height: 30px; | |
| text-align: center; | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, .4); | |
| min-width: 30px; | |
| height: 30px; | |
| padding: 0 8px; | |
| margin: 0; | |
| outline: none; | |
| transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; | |
| } | |
| button:hover, .button:hover, | |
| button:focus, .button:focus { | |
| background-color: rgba(0, 0, 0, .05); | |
| border-color: rgba(0, 0, 0, .3); | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .2); | |
| } | |
| .block-button { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| .large-button { | |
| border-radius: 6px; | |
| box-shadow: | |
| inset 0 30px 60px rgba(255, 255, 255, .8), | |
| inset 0 -30px 60px rgba(0, 0, 0, .05), | |
| 0 1px 2px rgba(255, 255, 255, .8); | |
| font-size: 20px; | |
| line-height: 60px; | |
| min-width: 60px; | |
| height: 60px; | |
| padding: 0 20px; | |
| } | |
| .large-button:hover, | |
| .large-button:focus { | |
| box-shadow: | |
| inset 0 2px 2px rgba(255, 255, 255, .4), | |
| inset 0 -2px 2px rgba(0, 0, 0, .05), | |
| 0 0 4px rgba(0, 0, 0, .3); | |
| } | |
| button:active, .button:active, .large-button:active { | |
| background-color: rgba(0, 0, 0, .1); | |
| box-shadow: | |
| inset 0 -1px 1px rgba(255, 255, 255, .4), | |
| inset 0 1px 2px rgba(0, 0, 0, .1), | |
| 0 -1px 1px rgba(0, 0, 0, .2); | |
| transition: box-shadow 50ms ease, background-color 50ms ease; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| App = Ember.Application.create(); | |
| App.Router.map(function() { | |
| // put your routes here | |
| }); | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return ['red', 'yellow', 'blue']; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment