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

執筆者:

関連記事

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

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

no image

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

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

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

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

RedcarpetでTOC表示

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

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …