RailsでTwitterBootstrap

Rails4とBootstrap3.3まわりのgem~simple_form、sassy-buttons、zurui-sass-rails、font-awesome-rails

投稿日:

bootstrap-sass

getbootstrap.com/getting-started/
github.com/twbs/bootstrap-sass

Gemfile

application.css.scss

application.cssは削除して、application.css.scssを作成

application.js

4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass

4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass

_variables.sass

_try.sass

もとページの例

application.css.scss

変数はbootstrapより先に読み込む

できた

screenshot

simple_form

ついにbootstrap3に対応したsimple_form
github.com/plataformatec/simple_form

Gemfile

generate

できた

validationなどもOK
screenshot

screenshot

情報

充実したREADME
simple-form.plataformatec.com.br/

Bootstrap component helpers

How to use Bootstrap 3 input group in Simple Form

How to build your Rails application with Simple Form and Bootstrap

RailsCastの日本語情報(有料かも)
#234 SimpleForm (revised)

sassy-buttons

jaredhardy.com/sassy-buttons/
SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

Gemfile

compass-railsと一緒に使わないとエラーになる

application.css.scss

できた

いい感じのボタンに
screenshot

zurui-sass-rails

github.com/mahm/zurui-sass-rails

Gemfile

application.css.scss

できた

いい感じのフォントシャドウといい感じのグラデーションが簡単に
screenshot

ズルいデザインテクニック2013 + セミフラット version – in 福井

font-awesome-sass

fortawesome.github.io/Font-Awesome/
github.com/FortAwesome/font-awesome-sass

Gemfile

application.css.scss

できた

Rails用のヘルパーつき

screenshot

情報

Font Awesomeでモテカワスリムで恋愛体質の愛されWebサイト♪ を目指す

デザイン関係の参考書

-RailsでTwitterBootstrap
-, , , ,

執筆者:

関連記事

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-594bb …

no image

Rails3.2でTwitter Bootstrap2対応のkaminariテーマを自作する〜というよりcucumber

環境 Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminariの続き すでにテーマがあるので適当に作っていたら、ページネーションをクリックしても昇順・降順の …

RedcarpetでTOC表示

By: epSos .de – CC BY 2.0 目次1 Redcarpet2 Redcarpetの使い方3 TOCを表示する4 できた5 Bootstrapのaffixとscrolls …

jQuery UI BootstrapにGoogle Mapが来た〜gmap3

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …