WordCamp Kansai 2015のブログでわぷーがまさかのCSS化されました。

海外でも人気のわぷーをCSSで作ってみました！ | WordCamp Kansai 2015

作られたのは広報チームの三角さん。

GitHubにもGPLで公開されているので、Forkして自由にカスタマイズ可能です。

mismith0227/csswapuu

せっかくなので、Polymer

贅沢を言えば実際にサイトで表示する時にあのコードを毎回コピペするのはちょっとしんどそうかなと思いました。

と、いうわけでおそらくどこのサイトでもまだ使われていないであろう「Polymer 1.0」でWebComponents化させてみました。

hideokamoto/csswapuu

bowerでPolymer1.0を引っ張ってきた状態で上のファイルを適当な場所にclone。

あとは下のサンプルのようにHTMLファイルのインポートと表示させたい場所へのタグ追加でどこでも簡単にCSSわぷーを表示させることができます。

[html]
<!– Import CSS Wapuu Components –>
<link rel="import" href="css-wapuu.html">
<!– Write the Polymer Components Tags –>
<css-wapuu></css-wapuu>
[/html]

スピード重視でちょっと中途半端な状態ですが各パーツ別に更にComponent化させているところですので、最終的にはパーツ単位でComponentをインポートすればオッケーなレゴブロックっぽい感じを目指そうと思います。