Topcoat のバージョン 0.7 が公開されました。 （Topcoat 0.7@Github）
Topcoat は HTML アプリ用の UI コンポーネントです （開発チームはデザイン言語だと言っています）。全て CSS で記述されているのが特徴です。
使い方は、ダウンロードした Topcoat のパッケージ内の css, img, font フォルダから必要なものをプロジェクトにコピーしたら、以下のように CSS ファイルを HTML ページとリンクして、あとは、BUtton 等のタグにクラス定義を追加します。
< link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.min.css" > ... < button class="topcoat-button"> Button </button> < button class="topcoat-button" disabled> Button </button>
Topcoat を採用したアプリケーションの代表的な例としては、Edge Reflow や Brackets があります。といっても、これまで Topcoat はモバイルアプリ向けの機能を優先して開発されてきました。ようやくデスクトップ向けのコンポーネントも同じレベルまで引き上げられた、というのが今回のバージョンアップの目玉の 1 つとなっています。
更新されたコンポーネント
バージョン 0.7 では、デスクトップコンポーネントが充実したことに加えて、新規コンポーネントの追加、モバイルコンポーネントの最適化なども行われました。
最新のコンポーネントは、アルファベット順に下のリストから確認できます。Topcoat のコンポーネントは、デスクトップとモバイル用それぞれ 2 種類、計 4 種類のスタイルが標準で提供されます （Navigation Bar と List は今回からモバイルのみ） ので、リンク先のページ左上のプルダウンから 4 種類のスタイルを切り替えてみてください。
- Button Bar
- Button
- Checkbox
- Icon Button
- List （モバイルのみ）
- Navigation Bar （モバイルのみ）
- Radio Button
- Search Input
- Text Input
- Text Area
Topcoat はオープンソースプロジェクトで且つデザインプロジェクトということもあり、Codepen を利用しています。デザインプロセスを共有することがオープン化の目的なのが少しユニークです。
そのため、誰でも、開発中のコンポーネントのデザインや仕様を見てフィードバックすることができます。次のバージョンで追加されるコンポーネントのデザインも Codepen を見ていればわかるはず？？
Effeckt
最近、effeckt.css との組み合わせのリサーチも始まったようで、初期の成果が公開されていました。主なものをいくつかご紹介しておきます。
Topcoat の基本構造の見直し
これまた最近、拡張しやすさを追求して Topcoat のアーキテクチャの見直しも行われました。Topcoat の新しいコンポーネントの開発に貢献したい、というコミュニティからの声に答えるためだそうです。
ちょっと長くなりそうなので、Topcoat のカスタマイズ方法も含め、詳しくは別記事で改めてご紹介する予定です。
コメントする