Railsで使えるGem

Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize

投稿日:2016年1月5日 更新日:

マテリアルデザイン

マテリアルデザインはGoogleが提唱する物が実際にあるっぽくみせるデザイン.
紙やカードが本当にあるようなわかりやすい動きをする.

日本語訳

matelialize

matelializeはマテリアルデザインに沿ったcssフレームワークの一つ.
materializecss.com/

sassバージョン
mkhairi/materialize-sass

sassバージョンがあるだけにRailsと親和性が高そう.
Tutorial: Using Materialize with Ruby on Rails & Simple Form

Gemfile

application.scss

このままだと、ピンクぽい公式サイトのカラーが主な色として使われる.
その前に色とかを設定する.

application.html.erb

また、head内でアイコンも読み込んでおく.

application.js

Javascriptも読み込んでおく

できた

screenshot

selectタグやmediaboxなどは、Javascriptまで実行しないといけないので、注意が必要.

simple_form

config/initializers/simple_form.rb

上のチュートリアルを参考に

そして、ボタンも設定

デフォルトでマテリアルデザインを使う.

datepickerを使う

type=”date”で、適当にクラスやIDを指定して、pickadate.jsを使う.
simple_formでdate_fieldを使うには、結局、type: :dateにして、html5: trueとしておくことになったみたい.
github.com/plataformatec/simple_form/commit/fb1f52dbc5855e3e33bc441ec89c9bd519d416cb

そして、pickadate.jsを使う.

参考: MaterializeCSSのDate Pickerを日本語化する

-Railsで使えるGem
-, ,

執筆者:

関連記事

no image

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

  前回 Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails &nbsp …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f