「Material Design Lite」をRailsで使ってみる

5085 ワード
Rails Design CSS設計 CSS Sass CSS テキストリンク

まあ実際は前にも使ったことあるんだけど、今あるRailsのMaterial design関連のgemがイケてないので、今回は独自の方法でRailsで使えるように（自分が使いやすいように）組み込んでみたいと思います。

Material designに関してはこちらの記事とかで詳しい解説をしてくれているのでそちらを参照していただきたい。
Google の新しいデザインガイドライン「Material Design」

Googleから公式に「Material Design Lite」（以下MDL）というCSSワイヤーフレームが公開されています。
Material Design Lite

ファイル構成はどうなっているのか？

LEGOに学ぶ！半永久的に使えるWebデザインの構成要素とデザインの目的とはいったい何なのか？というお話。でも書いたけど、最近はデザインの構成要素について興味があるので、MDLのファイル構成がどうなってるかが気になった。

と思って調べたら、Bootstrapみたいに特に要素別にファイル分けてるわけでもなかった。。。
ってか普通にダウンロードするだけだと1枚にしてくれてるのかな？
まあそうか。sass使える環境にない人も多いだろうしね。

GitHub見てみよう。
ちゃんとCSSファイルが要素別に分かれてました。

MDLのファイル構成

_color-definitions.scss
_functions.scss
_mixins.scss
_variables.scss
material-design-lite-grid.scss
material-design-lite.scss
styleguide.scss
template.scss
// - ここからコンポーネント --------------------
animation
badge
button
card
checkbox
data-table
footer
grid
icon-toggle
layout
list
menu
menu
palette
progress
radio
resets
ripple
shadow
slider
snackbar
spinner
switch
tabs
textfield
third_party
tooltip
typography

コンポーネントの各フォルダにはSCSSファイルと、必要なjsファイルが入ってる。
cssワイヤーフレーム、というよりはwebコンポーネント的な感じでまとめてあるのかな？

CSSだけまとめてみた

今回はRailsのsassを使える環境のCSSワイヤーフレームとして使いたいので、CSSだけ抜き出してまとめてみた。

assets
└ stylesheets
  └ mdl
    ├ _color-definitions.scss
    ├ _functions.scss
    ├ _mixins.scss
    ├ _variables.scss
    ├ material-design-lite-grid.scss
    ├ material-design-lite.scss
    ├ styleguide.scss
    ├ template.scss
    ├ animation
      └ _animation.scss
    ├ components
      ├ _badge.scss
      ├ _button.scss
      ├ _card.scss
      ├ _data-table.scss
      ├ _grid.scss
      ├ _list.scss
      ├ _mega_footer.scss
      ├ _menu.scss
      ├ _mini_footer.scss
      ├ _progress.scss
      ├ _slider.scss
      ├ _snackbar.scss
      ├ _spinner.scss
      ├ _switch.scss
      ├ _tabs.scss
      ├ _textfield.scss
      └ _tooltip.scss
    ├ layout
      └ _layout.scss
    ├ resets
      ├ _h5bp.scss
      ├ _mobile.scss
      └ _resets.scss
    └ styles
      ├ _checkbox.scss
      ├ _icon-toggle.scss
      ├ _palette.scss
      ├ _radio.scss
      ├ _ripple.scss
      ├ _shadow.scss
      └ _typography.scss

こんな感じかな。。。
で、それぞれRailsのassetsフォルダにコピーした。

_slider.scssでなんかエラった。
backgroudのradial-gradientのところでエラってるっぽい。

       background: radial-gradient(circle closest-side,
       $range-color 0%,
       $range-color 37.5%,
       $range-faded-color 37.5%,
       $range-faded-color 100%);

けど、ちょっと解決方法わからなかったのでradial-gradientの箇所だけコメントアウトした。

で、CSSはmdl直下にあるmaterial-design-lite.scssの各パーツのパスを変えてあげる。

// Variables and mixins
@import "variables";
@import "mixins";

// Resets and dependencies
@import "resets/resets";
@import "styles/typography";

// Components
@import "styles/palette";
@import "styles/ripple";
@import "animation/animation";
@import "components/badge";
@import "components/button";
@import "components/card";
@import "styles/checkbox";
@import "components/data-table";
@import "components/mega_footer";
@import "components/mini_footer";
@import "styles/icon-toggle";
@import "components/list";
@import "components/menu";
@import "components/progress";
@import "layout/layout";
@import "styles/radio";
@import "components/slider";
@import "components/snackbar";
@import "components/spinner";
@import "components/switch";
@import "components/tabs";
@import "components/textfield";
@import "components/tooltip";
@import "styles/shadow";
@import "components/grid";

使えるのかな？

jsは特に変更しないと思うのでCDNから直で引っ張ってくる。
（ちなみにビューはslimで書いてます。）

script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"

CSSは先ほど編集したmaterial-design-lite.scssを読み込んでくれば良い。

アイコンが効いてないけど、スタイルはなんとか読み込めたね。
あとはvariablesとかの値を変更して自分好みのスタイルに変更してイケば良いかな。