Bootstrapは人気のあるWeb UIフレームワークですが、いかんせん制約が強いためにデザイナーの方に利用を嫌がられることがあります。レールに乗っている限りは便利ですが、そのレールから外れることをしようと思うと途端に難しくなります。 そこでもっとカスタマイズ前提のUIフレームワークを使ってみるのはいかがでしょう。今回はTACHYONSを紹介します。

TACHYONSの使い方

TACHYONSはレスポンシブ、フラットなUIを作るのに適したフレームワークになっています。コンセプトはフルレスポンシブ、かつパフォーマンス重視となっています。

デスクトップサイズでの表示。

タブレットサイズ。

スマートフォンサイズ。

カラー設定。このカラーパターンは良いですね。

文字色に使うのも良さそうです。

ボーダー設定。

上下左右の表示設定。

カラーリングのボーダー。

透明度設定。

角丸のボーダー。

タイポグラフィ。

TACHYONSはミニファイした後、Gzip圧縮すると8.57KBというサイズになっています。モバイルファースト、無制限のネストにも対応したグリッドシステム、Sass利用などが特徴です。現在のデザインの中に組み入れてもデザインを壊さない配慮がされている点も見逃せません。

TACHYONSはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

TACHYONS - Form follows function mrmrs/tachyons