railsでFlatUIを使ってみるの巻

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 164 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

できました!

 

関連記事

rails runnerでRailアプリのバッチスクリプトを作る。

まえがき Railsで開発している時にちょっとしたバッチスクリプトな...

記事を読む

Railsアプリをクロスドメインに対応したAPIサーバーにする

まえがき 外部に立てたRailsのサーバーをAPIサーバー化して、ロー...

記事を読む

RailsでHamlを使っちゃおう

まえがき RailsのプロジェクトでHamlを使うためのメモ。やっぱ...

記事を読む

uglifycss-1uglifycss-1.png

UglifyCSSで簡単にCSS圧縮してみる。おまけつき

まえがき CSSファイルの改行だったりスペースだったり、不必要なセミコ...

記事を読む

Rails×Twitter×Bootstrapで作る即席WEBサービス

  まえがき ・アプリケーションフレームワークとしてのRuby o...

記事を読む

新着記事

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を使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑