RailsでCSSを書かずにマテリアルデザインにする話

## 背景
bootstrapも見るの飽きてきて、とはいえcssゴリゴリアレンジして書くのだるいので、
ちょっと調べたところMaterialDesign良さそう。

## マテリアルデザインを調べてみた
Material Design公式サイト
https://material.io/design/introduction/#

下記がよくまとまってて、わかりやすかった。

よくわかるマテリアルデザインの設計コンセプト
http://fladdict.net/blog/2015/05/material-design.html
Material Designを最速で使いこなす
https://note.mu/kenichiikeuchi/n/nc697dd8ad639


## 選定理由
- 勝手にレスポンシブになる
  - フラットデザインだからレイアウトが組みやすくカードっぽいデザインを取り入れれば綺麗に見えそう
- サンプルを探したけどいい感じだった
  - Pinterestで`material design web`　でググるといい感じな奴があってイメージしやすかった 
  - https://www.pinterest.jp/search/pins/?q=material%20design%20website&rs=typed&term_meta[]=material%7Ctyped&term_meta[]=design%7Ctyped&term_meta[]=website%7Ctyped
- 公式ではないがgemがあった
  - [materialize-sass](https://github.com/mkhairi/materialize-sass) 
  - [material_icons](https://github.com/Angelmmiguel/material_icons)

## いざ、導入
Gemfileに記述してbundle

```Gemfile
gem 'materialize-sass', '~> 1.0.0'
gem 'material_icons'
```

シュッと初期化

```app/assets/javascripts/application.js
//= require materialize
```

```app/assets/stylesheets/application.scss
@import "materialize";
@import "material_icons";
```

終わり

### 使ってみる
### material_icons
使えるアイコンはここから選べる
https://material.io/tools/icons/?style=baseline

```
# hamlだとこんな感じ
%i.material-icons notifications
```
こんな感じに表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63048/c91637a4-c5b1-c584-d9ea-3ac95d42170a.png)

### materialize
　マテリアルっぽくできる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/63048/a14539de-af2d-081c-b9cd-39c8803baf42.png)

```
.task.task_index
  .container
    %h4 タスク
    .row
      .col.s8.m8.l8
        .card
          .card-content
            %h5 タスク一覧
            %table.table
              %thead.thead-dark
                %tr
                  %th 名前
                  %th ほげ
                  %th ふが
              %tbody
                - @tasks.each do |task|
                  %tr
                    %td
                      = task.name
                    %td
                      = task.hoge
                    %td
                      = task.huga
      .col.s4.m4.l4
        .card
          .card-content
            %h5 広告とか
        .card
          .card-content
            %h5 タスク登録
            = form_with model: @task, class: 'form' do |form|
              .form-group
                .row.valign-wrapper
                  .input-field.col.s12
                    = form.label(:name, '名前')
                    = form.text_field :name, {class: 'validate form-control', placeholder: '子供へお小遣い'}
              .form-group
                .row.valign-wrapper
                  .input-field.col.s12
                    = form.label(:hoge, 'ほげ')
                    = form.number_field :hoge, {class: 'validate form-control', placeholder: '3000'}

              .form-group
                .row.valign-wrapper
                  .input-field.col.s12.mb0
                    = form.label :huga, 'ふが'
                    = form.number_field :huga, {class: 'validate form-control', placeholder: '1'}

              %button{type: 'submit', class: 'btn btn-primary center'} 登録する


```


## やってみて

gridらへんは綺麗に書けるので良かったし、cardのデザインにしたことによって、
レイアウト気にせず作れた(趣旨と合ってるのかは分からんが)。

1点気になったのだが、
https://materializecss.com/ にgemが追いついてない気がする。

ソースを見たけど、欲しいやつが定義されてなかったり、ちゃんと使っていくならPR送ろうかなって肌感。
https://github.com/mkhairi/materialize-sass/tree/master/assets/stylesheets/materialize/components