Polymerで自作コンポーネントのレスポンシブ化

サンプルソースはこちらから
*jquery-1.11.3.min.js、jquery.slicknav.min.js、scroll.jsは本家サイトからDL下さい。

・トップデザイン作成
・静的ページレスポンシブ化（グローバルナビはslicknav(jquery)を使用）
・sassをCSSにコンパイル
※上記制作手順は割愛させて頂きます。

・コンポーネント化
こちらを下記より説明致します。

今回は自作コンポーネントですのでPolymer公式サイトからzipのDLで問題ありません。
※コンポーネントを今後DLするにはbowerの利用が便利です。
Polymer公式サイト　

まず、できあがったファイルは以下になります。

・コンポーネント
app-article.html (各カード)
app-card-h.html（CardLayout見出し）
app-card.html(CardLayout)
app-circle.html(CircleArea)
app-footer.html（フッター）
app-hero.html（メインビジュアル）
app-menu.html（グローバルナビ）
app-pagetop.html（ページトップへボタン）
app-ring.html（各Circle）

・ページ
index.html（トップページ）

・DLしたzipのPolymer
bower_components/...

・CSS（共通で使うものとslicknav用）
css/...

・画像
images/...

・jqueryなどjavascript
jquery-1.11.3.min.js、jquery.slicknav.min.js、scroll.jsは本家サイトからDL下さい。
js/...

ざっくりとした手順は、静的HTMLを各パーツ（app-article.htmlなど）に分け、Polymerのルール(後述)に従い記述します。
次に、ページ（index.html）にて各コンポーネントを登録します。
※scriptタグでwebcomponents-lite.min.jsへリンクをします。

簡単な見出しパーツで説明します。

・最初のimportでpolymerを読み込みます。
・dom-moduleのidにタグ名（ファイル名）を書きます。
・templateタグに、cssと内容（ここではh1タグ）を記載します。:hostはコンポーネント（ここでは）自体を指します。
・最後にscriptにタグ名を記載します。

※サンプルはcssを基本構成がわかりやすいようにそれぞれコンポーネントに直接記述しています。
今回のレスポンシブ化ですが、従来使われているメデイアクエリーをコンポーネントに記述する方法をとりました。
今回トップページというベースの幅ありきで制作を進めましたが、完全にパーツ化するのだったらエレメントクエリーのような発想での設計が適しているのかもしれません。

・htmlの段階でコンポーネント化でき、ヘッダ・フッタなど共通部分を使いまわせる。
・カード部分など繰り返しのパーツのコーディングが楽。
・ネットワークを通じてコンポーネントの利用・公開ができる。
・データバインディングによりデータの受け渡しがしやすい。

従来のデザインを例にpolymerの構成にすることで、コンポーネントの理解の助けとなりましたら幸いです。

jsよりもhtml/cssを書く機会の多い方はWEBコンポーネントの学習をriot.jsから始めるとスムーズです。
riot.jsはhtmlなどの基本的な理解があれば、1〜2日（サンプルのデザイン作成含めて）で基本的な学習ができると思います。