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

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

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

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

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

no image

TwitterBootstrapRailsでエラーが出る件

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

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …