ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これはこれで使い道がありそう。

BootstrapでWebサイトを組む機会が増えているのですが、バージョン3になってから徐々に作法が増えてきたように感じます。機能が増えるということはそれだけ覚えるべきことが増えるということです。

そうなるとシンプルに作れるという利点からはちょっと外れてくるかも知れません。そこでほぼ素のタグのままデザインができてしまうデザインテンプレートxchemaを紹介します。

各コンポーネントごとにたくさんのスクリーンショットでお届けします。

フォントの装飾。特にクラス指定がない所が特徴です。
フォントの装飾。特にクラス指定がない所が特徴です。

段落。行間が良いですね。
段落。行間が良いですね。

頭だけ大きく。英語では良くある表現ですね。
頭だけ大きく。英語では良くある表現ですね。

引用。カラーリングに対応しているのが新しいかも。
引用。カラーリングに対応しているのが新しいかも。

リスト。様々な形式が用意されています。
リスト。様々な形式が用意されています。

定義リストに対応しているのが嬉しい。
定義リストに対応しているのが嬉しい。

アドレス。こちらもシンプルです。
アドレス。こちらもシンプルです。

アラート。alertというタグを作っています。
アラート。alertというタグを作っています。

タグ。こちらもtagというタグで指定します。
タグ。こちらもtagというタグで指定します。

テーブル。素のHTMLままですね。
テーブル。素のHTMLままですね。

テーブルは機能によって多少クラス指定があります。
テーブルは機能によって多少クラス指定があります。

テーブルの行ごとに色づけもできます。
テーブルの行ごとに色づけもできます。

フォーム。
フォーム。

インプットフィールド。大きさも自由に決められます。
インプットフィールド。大きさも自由に決められます。

細かなカスタマイズもできます。
細かなカスタマイズもできます。

ボタンは色分けも可能です。
ボタンは色分けも可能です。

グリッドにももちろん対応しています。
グリッドにももちろん対応しています。

xtyleの特徴としては素のHTMLタグを活かしたシンプルさにあります。スタイルシート、JavaScriptが提供されており、Webアプリケーションが素早く手軽に作成できるようになります。

多数の機能を使うならBootstrapを選ぶかも知れませんが、デザイナーの方がカスタマイズ前提としつつもベースが欲しいといった時にはxtyleくらいがライトで良さそうです。

xtyleはHTML/JavaScript/CSS3製のCreative Commonsのオープンソース・ソフトウェアです。

xchema | xtyle

xchema/xtyle

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2