Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

選定理由

いざ、導入

Gemfileに記述して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

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

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

こんな感じに表示される
image.png

materialize

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

image.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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?