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でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

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

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

no image

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

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

総合的な動画の変換 …