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
-, , , ,

執筆者:

関連記事

no image

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-58 …

jQuery UI BootstrapにGoogle Mapが来た〜gmap3

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

Rails3.2.11でTwitterBootstrapのモーダルをフォームに使う例

  Rails3.2でTwitterBootstrap導入のあれこれ sass-rails-bootstrapとsimple_formを使っている Rails3.2でCoffeeScript …

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …