Rails에서 CSS를 작성하지 않고 머티리얼 디자인으로 만드는 이야기

배경

bootstrap도 보는 것 질려 와서, 하지만 css 고리고 리어 레인지해서 쓰는 까다롭기 때문에,
조금 조사했더니 MaterialDesign 좋아 보인다.

머티리얼 디자인을 살펴보았다

Material Design 공식 사이트
htps // 마테리아 l. 이오 / 데시 겐 / 인 t 로즈 c 치온 / #

아래가 잘 정리되어 알기 쉬웠다.

친숙한 머티리얼 디자인 디자인 컨셉
ht tp // f ぁぢct. 네 t/bぉg/2015/05/마테리아 l-로 한다. HTML
Material Design을 가장 빠르게 사용
htps : //에서. Mu / Keichichichi / N / N c697d8 d639

선정 이유

마음대로 반응이 된다

플랫 디자인이므로 레이아웃이 조립하기 쉽고 카드 같은 디자인을 도입하면 깨끗하게 보일 것

샘플을 찾았지만 좋은 느낌이었다

Pinterest에서.

htps //w w. 핀 테레 st. jp/세아 rch/핀 s/? q = 마테리아 l % 20으로 함 % 20 ぇb하고 & rs = typed & rm_ め た ""= まめりあ l % 7 Cty ㎺ & rm_ % 7Cty ぺd & rm_ 굳은 ""= 우에 b하여 % 7Cty ぺd

공식은 아니지만 gem이 있었다

materialize-sass

material_icons

막상 도입

젬파일에 쓰고 bundle

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

사용할 수 있는 아이콘은 여기에서 선택할 수 있다
htps : // 마테리아 l. 이오 / 토오 ls / 이콘 s /? sty ぇ = 바세 ぃ

# hamlだとこんな感じ
%i.material-icons notifications

이런 식으로 표시되는

materialize

머티리얼처럼 할 수 있다.

.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점 신경이 쓰였지만,
h tps : // 마테리아 아제 css. 코m/ 에 gem가 따라잡지 않는 느낌.

소스를 보았지만, 원하는 녀석이 정의되어 있지 않거나, 제대로 사용해 가면 PR 보낼까 되어 피부감.
htps : // 기주 b. 코 m / mk는 리 / 마테리 아 아제 - s / t 리에 / 마s 테 r / 아세 ts / style ぇ ぇ ts / 마테리 아 아제 / 코 m 포넨 ts