railsでFlatUIを使ってみるの巻

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 163 follow us in feedly

 

まえがき

話題のcssテーマ「FlatUI」を使いたく、どうせならrailsに組み込むかとゆうネタです。

FlatUIに公式はこちら ↓

http://designmodo.github.io/Flat-UI/

 

 

開発環境

・Mac 

・rals 3.2.13

・flatui-rails 0.0.4

・gem 1.8.23

 

手順

# rails プロジェクトの作成

$ rails new flatui_project
$ cd flatui_project

 

# Gemfileの編集

gem 'flatui-rails' を追加

 

# バンドラを走らせる

$ bundle

 

#app/assets/stylesheets/application.css を編集

*= require flat-ui を追加

 

#vim app/assets/javascripts/application.js を編集

//= require flat-ui を追加

 

これで一様設定は終わり。

 

確認してみよう

#とりあえず適当にテーブルをつくる

$ rails g scaffold User name:string
$ rake db:migrate

※ 今回は ↑で新しく作った app/views/users/index.html.erbにFlatUIのサンプルソースを書きました。

では、localhost:3000/users/ を覗いてみましょう

 

Screeny Shot 2013 05 26 19 03 18

できました!

 

関連記事

better-errorsbetter-errors.png

Railsのエラーデバッグ画面をリッチにしてくれる『Better Errors』

まえがき RoRでエラーのデバッグ画面をリッチにしてくれるライブラリ...

記事を読む

RailsでSendGrid×ActionMailerを使って簡単メール送信をやってみる

まえがき Herokuのアドオンとして人気のある無料から使えるメール送...

記事を読む

405884116439

UnityでHTTP通信&JSONを取り扱う(Javascript)

まえがき つい最近までcocos2dxがわーわー騒いでた私ですが、こ...

記事を読む

Sassを勉強する

Sassって? CSSをプログラム制御を用いて書く事ができるみたい。...

記事を読む

Screeny Shot 2013-07-08 1.49.36.png

railsコマンドをジェネレートしてくれるアプリを作ってみた

まえがき railsのscaffoldとかmodelやら コマンドで作...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑