半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit

単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。

サイトのキャプチャ

Maxmertkit

まずはトップページのデモで、その素晴らしさが垣間見えます。

サイトのキャプチャ

ドラッグ&ドロップでさまざまなエレメントを表示します。

てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ:CSS3アニメーション」をご覧ください。

Maxmertkitの特徴

  • SASSベースのオープンソースのフレームワーク
  • CSS3アニメーションを使った演出効果
  • 他のフレームワークとかぶらないネームスペース
  • デザイン(カラー・サイズ)変更はテーマで簡単
サイトのキャプチャ

Creed

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が用意されています。

サイトのキャプチャ

ソーシャルボタンのデモ

top of page

©2017 coliss