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

執筆者:

関連記事

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

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

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

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

RedcarpetでTOC表示

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

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

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

no image

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

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