これまでのすべての社会の歴史は
階級闘争classタグとの闘争の歴史である
現代はCSSフレームワーク全盛
CSSフレームワークを使う利点
- とりあえずステキな見栄え
- コンポーネントを自作せずに済む
- 画面間でデザインが統一される
- レスポンシブ対応も考慮されている
→ 特にデザイン工数が少ない 管理画面・社内向け画面
・・・しかし！
繰り返し書かされる class
<button type="button" class="btn btn-default" />
<input type="submit" class="btn btn-primary" />
<input type="text" class="form-control" />
（ボタンは全部 btn btn-default に決まっているのに・・・ 
）
何段にもネストするタグ
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
（ワクで囲みたいだけなのに・・・ ）
サーバーサイドのコードも必要
def form_group(f, name, &block)
classes = ['form-group']
classes << 'has-error' if f.object.errors.include?(name)
content_tag(:div, class: classes, &block)
end
def error(f, name)
f.object.errors.full_messages_for(name).map do |message|
content_tag(:span, class: 'help-block') { message }
end.join('').html_safe
end
= form_for(...) do |f|
= form_group(f, :name) do
.control-label.col-xs-3
= f.label :name
.col-xs-9
= f.text_field :name, class: 'form-control'
= error(f, :name)
（工数を節約するために Bootstrap を使うのに・・・ ）
これが我々が求めた世界か！？
No!
Marx.css
Marx.css は・・・
- CSSリセット + 小ぎれいなデフォルトスタイル
- 基本的なレイアウト（ヘッダー・フッター）は提供
- レスポンシブ対応済み
- 19世紀の思想家とは関係ない
- class数: 0
公式サイト
https://mblode.github.io/marx/
class数: 0 の理由
デフォルトでスタイル適用済み:
-
<button><input type="submit"> <input type="text">-
<h1><h2><h3>... <table>
レイアウトにはHTML5のタグ:
-
<main>: メインコンテンツ -
<header>: ヘッダー
HTML5の新しいinput type:
<input type="datetime" /><input type="number" /><input type="range" /><input type="email" /><input type="color" />
Marx.css のメリット・デメリット
メリット:
- とにかくマークアップが楽
-
<link>タグ１個で導入できる - パーツ選びに迷いようがない
- サーバーサイドの開発が不要
- 別フレームワークへの移行も（多分）簡単
デメリット:
- 地味
- レスポンシブ対応は基本のみ（テーブルの並び替えなどはしない）
その他の軽量フレームワーク
- sakura (https://oxal.org/projects/sakura/)
- Sanitize.css などのCSSリセットライブラリ
- Marx.css を改造する（SCSSで書かれているので簡単。背景を赤に染め上げるなど。）