Picnic CSS
http://picnicss.com/
- Flexbox を活用
- JavaScriptf不要でインタラクティブ要素を構築できる
<div class="flex"> // クラス名に「flex」と記述
<div>ボックス1</div>
<div>ボックス2</div>
<div>ボックス3</div>
</div>
使い方
- 3 列のグリット => 「class="flex three"」
<div class=”flex two three-600 six-1200”>
</div>
例=http://s.codepen.io/webhacck/debug/zoeBgv
https://github.com/picnicss/picnic
Materialize
http://materializecss.com/
*Webサイトへ「マテリアルデザイン」のテイスト
使い方
- ちょっと明るい赤色を指定
<div class=”red lighten-3”>サンプルボックス</div> // 明るい 「lighten-1」」「lighten-2」〜「lighten-5」<br />
//暗い色なら「darken-1」「darken-2」〜「darken-5」
*CodePen
http://codepen.io/webhacck/pen/gLqwwj
http://s.codepen.io/webhacck/debug/gLqwwj
*「ナビゲーションメニュー」
- 「フッターコンテンツ」
- 「カード」
- 「ページネーション」
https://github.com/Dogfalo/materialize
Milligram
https://milligram.github.io/
- 「テーブル」「引用文」「フォーム」などの要素は、CSSを一切書かず
http://codepen.io/webhacck/pen/NboRgV
使い方
<div class=”row”>
<div class=”column”>１</div>
<div class=”column”>１</div>
<div class=”column”>１</div>
</div>
http://codepen.io/webhacck/pen/KNJgyw
https://github.com/milligram/milligram
Spectre
https://picturepan2.github.io/spectre/
Milligram より少しスタイリッシュ
Bootstrapに似ている
使い方
<!-- ボタン要素のスタイリング -->
<button class="btn btn-primary">プライマリ</button>
<!--- フォーム要素のスタイリング -->
<div class="form-group">
<label class="form-label" >名前</label>
・
・
</div>
<!-- グリッドレイアウトのスタイリング -->
<div class="columns">
<div class="column col-md-6 col-xs-12">要素</div>
・
・
</div>
*サンプル
http://codepen.io/webhacck/pen/zoeKLw
http://codepen.io/webhacck/pen/WoPoeQ
bulma（ブルマ）
http://bulma.io/
中身はモダンでカラフルな配色が施されている多機能で実用的なフレームワーク
、「ボタン」「タグ」「通知」「ローディング」などの基本パーツは、いずれも目に止まりやすい明るいカラー配色
使い方
http://codepen.io/webhacck/pen/xRMRwj
http://s.codepen.io/webhacck/debug/xRMRwj
*タイル
http://codepen.io/webhacck/pen/rWPWwJ
*Download
https://github.com/jgthms/bulma
引用元：paiza 日誌から
[http://paiza.hatenablog.com/](paiza ブログ)