さいごにはじめにうちのチームでは現在、CSSフレームワークをBootstrapからMaterializeに移行しております。Materializeは現在1.0のアルファ版であり、1.0リリースまでもう少しです。Materialize今回は使っているうちに気づいたこと、ルールとしてまとめたことを記載したいと思います。RubyのGemで入れて使用しています。ボタンButtonsボタンは下記のように、指定しますが色を変えようと思うと少しクラス名が長くなりますね。Materializeに慣れていないと、クラスをつけるだけで時間がかかりそうです。red">button</a>そのため、チーム内でボタン名のルールを決め、そちらを使うようにしました。)そしてCSSの方でextendしてボタンを作成します。!optional;}こうすれば、あとで新規作成画面へのリンクボタンを変えたい、となっても一括で変えられます。ここで問題が発生しました。extendでwaves-effectのようなエフェクト用のクラスまで含めてしまうと、JavaScriptの方でセレクタが見つからない状態になります。悩んだのですが、ページロード時に、JQueryでクラスを当てるようにしました。JavaScript$('.btn').addClass("waves-effect");1$('.btn').addClass("waves-effect");フォームFormsラベルについてドキュメント通りにラベルを置くと、クリック時にラベルが動きます。この仕様ですが、テキストボックスの値を動的に変えていたりすると、実際の入力値と被ってしまい、非常に動作が不安でした。ラベルを動かす時には、activeというクラスをつけていることが分かったので、常にactiveをつけておくようにしました。することで、動いた後の状態で固定できます。Name</label></div></div>セレクトボックスについてセレクトボックスですが、サンプルを見るとカッコ良い感じです。サンプル通りになりませんでした。挙動を見ていると、selectタグ自体は非表示にし、JSで別のDOMとして表示させているようです。こちらの調査がなかなか進まなかったため、暫定ですが、Materializeが用意しているbrowser-defaultというクラスを使用することにしました。これは従来のセレクトボックスに近い感じのセレクトボックスにしてくれます。Buttonsラジオボタンは、inputタグのidとlabelタグのforが一致していなければ動かないようです。anything特にRailsのヘルパーなんかでラジオボタンを生成する場合、上記2つの値があっているか確認の必要があります。アラートBootstrapにお世話になっていると、アラートが当たり前になります。(うちのチームもそうです。)ただ、マテリアルデザインにアラートは存在しません。トーストがそれにあたるのでしょう。いえ、トーストに合わせてデザインし直すのは時間的に難しかったので、アラートクラスを作成し、Bootstrapと同じように使ってもらうようにしました。!optional;}フォントMaterializeのデフォルトフォントはRobotoというものですが、日本語があまりよくないです。そのため、Googleが用意しているWebフォントをimportしています。フォントさいごに私たちもまだまだ使いこなせているわけではありませんが、現状のルールをまとめてみました。Bootstrapに比べて、JS(JQuery)に依存する部分が多いところが大変です。TurbolinksやAjaxのような非同期処理が絡む場合は注意が必要そうです。コメントをキャンセルメールアドレスが公開されることはありません。複数のタイムゾーンに対応する。私たちは無料アプリもリリースしています、ぜひご覧ください。下記のアイコンから無料でダウンロードできます。