半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit
Post on:2013年1月23日
sponsors
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。
まずはトップページのデモで、その素晴らしさが垣間見えます。
ドラッグ&ドロップでさまざまなエレメントを表示します。
てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。
Maxmertkitの特徴
- SASSベースのオープンソースのフレームワーク
- CSS3アニメーションを使った演出効果
- 他のフレームワークとかぶらないネームスペース
- デザイン（カラー・サイズ）変更はテーマで簡単
Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡略化だと、グループ化したボタンを使用不可にする今までのセレクタはこんな感じでした。
今までのセレクタ
<div class="group">
<a class="button disabled">Left</a>
<a class="button disabled">Middle</a>
<a class="button disabled">Right</a>
</div>
Maxmerkitのセレクタ
Maxmerkitでは親となる要素にセレクタをセットすることができます。
<div class="-group -disabled-">
<a class="-btn">Left</a>
<a class="-btn">Middle</a>
<a class="-btn">Right</a>
</div>
Maxmertkitのデモ：スタティック
グリッドをはじめ、見出し・パラグラフ・テーブル・タブ・ボタン・フォームなどのエレメントのデモです。
グリッドのデモ
ベーシックなものからレスポンシブ・可変も揃っています。
テーブルのデモ
ホバーでハイライトやセルにアニメーションを適用できます。
フォームのデモ
フォームの各エレメントから、水平・垂直に配置可能。
アイコンのデモ
アイコンは300種類以上！
ボタンのデモ
ベーシックなデザインをはじめ、アイコン付き・アニメーション・ストライプものなども。
グループ化したボタンのデモ
水平・垂直にグループ化したり、セレクタボックス化したり。
タブのデモ
タブも水平・垂直が可能で、デザインも豊富です。
バッジのデモ
バッジのアイコンも簡単に実装できます。
ドロップダウンのデモ
天地左右自由にアローを配置できます。
メニューのデモ
きびきびした動作のドロップダウンメニュー。
ツールチップのデモ
カラー、サイズ、アローの方向など自由自在。
プログレスバーのデモ
アニメーションで動作するプログレスバー。
Maxmertkitのデモ：CSS3アニメーション
CSS3アニメーションのエフェクトを備えたスクリプトも豊富に用意されています。
ポップアップのデモ
ぺらっとめくれたり、くるくるっと回転したり、爽快なアニメーションです。
ボタンのデモ
こちらのボタンはCSS3アニメーションのエフェクトを備えています。
モーダルウインドウのデモ
ちょっとびっくりするアニメーションですが、かっこいいです。
通知パネルのデモ
はらりとなるアニメーションが素敵。
カルーセルのデモ
キャプチャで見ると普通のカルーセルですが、一枚一枚アニメーションで動き、キャプションもアニメーションで表示されます。
Maxmertkitのデモ：ソーシャルメディア
ソーシャルボタンはTwitter, Facebook, GitHub, Deliciousが用意されています。
sponsors
