Skip to content
This repository has been archived by the owner on Mar 26, 2018. It is now read-only.

Commit

Permalink
Add element scaffolding
Browse files Browse the repository at this point in the history 
- Make gulp deal with external bower components dir
  • Loading branch information
@robdodson
robdodson committed Feb 7, 2015
1 parent 4e52687 commit afcda33
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 36 deletions.
13 changes: 10 additions & 3 deletions app/templates/app/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
(function (document) {
'use strict';

document.addEventListener('polymer-ready', function () {
// Perform some behaviour
console.log('Polymer is ready to rock!');
// Grab a reference to our auto-binding template
// and give it some initial binding values
// Learn more about auto-binding templates at http://goo.gl/Dx1u2g
var app = document.querySelector('#app');
app.appName = 'Yo, Polymer App!';

// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('template-bound', function() {
console.log('Our app is ready to rock!');
});

// wrap document so it plays nice with other libraries
Expand Down
9 changes: 9 additions & 0 deletions app/templates/app/elements.html
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,11 @@
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="yo-list/yo-list.html">
<link rel="import" href="yo-greeting/yo-greeting.html">

<!-- Add your elements here -->
96 changes: 66 additions & 30 deletions app/templates/app/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,69 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= appname %></title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->

<!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- endbuild -->

<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
</head>
<body unresolved>
<div class="hero-unit">
<yo-greeting></yo-greeting>
<p>You now have</p>
<yo-list></yo-list>
</div>

<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>

<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>poly foo</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->

<!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- endbuild -->

<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
</head>

<body unresolved fullbleed layout vertical>
<template is="auto-binding" id="app">

<core-drawer-panel>

<!-- Drawer -->
<core-header-panel drawer>

<!-- Drawer Toolbar -->
<core-toolbar>Menu</core-toolbar>

<!-- Drawer Content -->
<core-menu selected="0">
<core-item label="Yo"></core-item>
<core-item label="Polymer"></core-item>
<core-item label="App"></core-item>
</core-menu>

</core-header-panel>

<!-- Main -->
<core-header-panel main>

<!-- Main Toolbar -->
<core-toolbar>
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
<span>{{appName}}</span>
</core-toolbar>

<!-- Main Content -->
<div class="hero-unit">
<yo-greeting></yo-greeting>
<p>You now have</p>
<yo-list></yo-list>
</div>
</core-header-panel>
</core-drawer-panel>

</template>

<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>

</html>
39 changes: 39 additions & 0 deletions app/templates/app/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,42 @@ body {
color: #000;
padding: 0.2em 0;
}

body {
background: #fafafa;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}

.hero-unit {
margin: 50px auto 0 auto;
width: 300px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
background-color: #eee;
border-radius: 6px;
padding: 60px;
}

.hero-unit h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}

.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

[drawer] {
background-color: #EEEEEE;
}

core-toolbar {
color: #FAFAFA;
background-color: #009688;
}
11 changes: 8 additions & 3 deletions app/templates/gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ gulp.task('copy', function () {
}).pipe(gulp.dest('dist'));

var bower = gulp.src([
'app/bower_components/**/*'
'bower_components/**/*'
]).pipe(gulp.dest('dist/bower_components'));

var elements = gulp.src(['app/elements/**/*.html'])
Expand Down Expand Up @@ -137,7 +137,7 @@ gulp.task('elements', function () {
gulp.task('html', function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});

return gulp.src(['app/**/*.html', '!app/{elements,test,bower_components}/**/*.html'])
return gulp.src(['app/**/*.html', '!app/{elements,test}/**/*.html'])
// Replace path for vulcanized assets
.pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
.pipe(assets)
Expand Down Expand Up @@ -183,7 +183,12 @@ gulp.task('serve', ['styles', 'elements'], function () {
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: ['.tmp', 'app']
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});

gulp.watch(['app/**/*.html'], reload);<% if (includeSass) {%>
Expand Down

3 comments on commit afcda33

@arthurvr
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robdodson The indentation you introduced in here is inconsistent with some other html files (I'm talking about not indenting inside of the <html>)

In other official generators we don't do it this way as well.

@robdodson
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arthurvr is there a recommended indentation guide you can link me to?

@arthurvr
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robdodson nope, I was just pointing out that every official generator I know about does it in another way, and that it's even inconsistent with some html files in this generator itself.

Please sign in to comment.