[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita
Ruby on Rails Tutorialのエッセンスを自分なりに整理してみる5 [Ruby基礎] ブロックとProcをちゃんと理解する http://qiita.com/kidachi_/items/15cfee9ec66804c3afd2 の続き。 Ruby on Rails Tutorial（chapter5） http://railstutorial.jp/chapters/filling-in-the-layout#sec-layout_exercises TwitterBootstrapの導入 Bootstrapでは、動的なCSS生成のためにLESSを使用している。 一方でRailsのAssetPipeline（詳細後述）はデフォルトではSassをサポートする。 →bootstrap-sass（gem）を導入し、Sassベースで扱えるようにする。 source 'https:
![[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1c27d27c7a1af177eefba7fd80592d464cbf9cf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBUd2l0dGVyQm9vdHN0cmFwJUUzJTgxJUE4U2FzcyVFMyU4MSVBOEFzc2V0UGlwZWxpbmUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRmOGY4NmNkYjZjMjhkNDU4YTkzMTc4NmQwNDU0ZGRl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBraWRhY2gxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMDA4Mzk3YzFlZTZlMTA4YTY1YmYwODZlYzgzZDRiZg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Kr44OE44Kt%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D2c52a8440e650cdfa040029c5246e9cd)
Rails 4 + Bootstrap-Material-Design - ミニマリストになりたいエンジニア
出来上がったもの デモ ( Heroku ) GitHub 使うもの Node.js v0.12.3 Ruby 2.2.2 Bowerを入れる $ npm install -g bower Bundlerを入れる $ gem install bundler Rails new $ bundle exec rails new material -T -B Gemfileの編集 source 'https://rubygems.org' gem 'rails' gem 'sqlite3' gem 'sass-rails' gem 'uglifier' gem 'coffee-rails' gem 'jquery-rails' gem 'turbolinks' gem 'slim-rails' # slim 使う人は入れてください。デモでは使ってます。 gem 'bootstrap-sass'
Ruby on Rails + Bootstrap3 + simple_form チュートリアル | Oh My Enter!
Twitter Bootstrap 3がリリースされてから結構日が経ちますが、twitter-bootstrap-railsはブランチ版で、simple_formはRC版でそれぞれ対応できているようです。導入するにあたって、ちょっとハマる箇所もあったので、簡単にチュートリアルにまとめておきたいと思います。 環境 Mac OS X 10.8 Ruby 2.1 Ruby on Rails 4.1 twitter-bootstrap-rails 3.1.1 (2014/6/21時点ではbranch) simple_form 3.1.0.rc セットアップ Gemfileに必要なgemを記述します。ポイントはtwitter-bootstrap-railsとsimple_formです。各々最新安定版ではまだ対応していないので(2014/6/21現在)、以下のようにバージョン指定が必要です。 📄Ge
react-routerでsingle pageなrails scaffold - すぎゃーんメモ
React をちょっと触ってみたい、というのと 最近すこし Ruby on Rails も勉強はじめた、ということで、rails g scaffoldで作るような管理画面のViewを react-router を使ってSingle Page Applicationで作ってみた。 https://react-router-scaffold.herokuapp.com/ (source code: https://github.com/sugyan/react-router-scaffold) 既に React.jsでRailsのScaffoldを再現してみた - Qiita という記事があり、これをおおいに参考にさせていただいております。 違いとしては、 Bootstrapで見た目を変えてる React 0.13でサポートされているES6 classes記法などを使って書いてみた Hashで
新規サービスの管理画面を短期間で見栄え良く実装する - クックパッド開発者ブログ
こんにちは、クックパッド料理教室の京和です。 管理画面はほとんどのウェブサービスに存在し、ユーザサポートやサービスの状況・KPIなどを確認するために、スタッフが毎日利用するとても重要なものです。にも関わらず、新規サービスでは人員が不足していることから、ついおざなりなデザインや実装になりがちなのではないでしょうか。 今回はクックパッド料理教室で採用している、RailsのMountable EngineとBootstrapのデザインテンプレートを使った、見栄えがよくメンテナンスしやすい管理画面を短期間で実装する方法についてご紹介します。 Mountable Engineとは Mountable EngineはRailsアプリケーション上で動く、ミニRailsアプリケーションのようなものです。 ミニと書きましたが、Railsアプリケーション(Rails::Application)はRails::
Webサービスをスタートアップする10の手順（Rails編） - それはBooks
アイデアを思いついたときに Web サービスを作ってスタートアップする手順メモです。Rails 編としていますが、たぶん別のバージョンは書かないでしょう。。 手順は思いついた順（というか、前に作ったサービスの手順）で書いていますので、抜け漏れとかあると思いますがコメントあればよろしくおねがいします。 ちなみに、最近作ったサービスはこちら。よかったら使ってみてください。 Web上のメディアのすべてにヤジを飛ばすサービス - 野次る 1. アイデアを揉む 思いついたアイデアをすぐに実現するのはいいことだと思いますが、世の中では2パターンで語られていますね。 思いついたサービスは誰のためのサービス？ そのサービスは自分で使う？ 誰のためのサービスかという問は、すなわちどんな問題を解決するサービスなのか？ってことです。 「スタートアップが失敗する理由」みたいなキーワードで Google 先生に聞け
Ruby on RailsにてBootstrap3のサンプルページを作成する | DevelopersIO
はじめに サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。 (特にデザインセンスに乏しい私のようなプログラマは・・・) このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・) またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。 今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。 作業手順 以下に、今回の作業手順を書いていきます。 1.ページ作成 まずはRuby on Railsにて、今回表示するページを作成します。 コントローラ、ビューの作成 今回表示する画面のコントローラは「welcome」、ビューは「
AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO
t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs
rails4でbootstrap3のglyphiconを使う方法
rails4でbootstrap3のglyphiconを使う方法メモ。 twitter-bootstrap-railsのセットアップ まず、bootstrapをrailsから使う必要があるのですが、それにはtwitter-bootstrap-railsというgemを使うのが簡単です。 rails4へのbootstrap導入にはこの記事が参考になります。 Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法 ただ、twitter-bootstrap-railsは現時点でbootstrap2を使うようなので、bootstrap3のglyphiconを使いたい場合は少し手作業が必要になります。その方法を解説します。 ちなみに、もっとも単純にglyphiconをrails4から使う方法は、bootstrap3のJSとCSSをまるごとダウンロードしてきてrailsから読み
第一回プログラマ向けデザイン勉強会を開催しました - satococoa's blog
10/27(土)に 第一回プログラマ向けデザイン勉強会 を開催しました。 この勉強会は毎月やっている デザイナー向けプログラム部 (P4D) の逆バージョンで、デザイナさんにプログラマがデザインを教わるという趣旨で開催しました。 そして講師役として、いつもP4Dの方でもお世話になっている @machida さん、@ken_c_lo さん、@saucerjp さんの3人にお願いしました。 もっともこの3人をはじめ、P4Dに参加されているデザイナさんは普通にJSやFlash、ObjCなんか書いていたりして単にデザイナと呼んでいいのかどうかは怪しいところですが。 RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 まずは@machidaさんのTwitter Bootstrapのカスタマイズ例の話からでした。 このテーマはP4D参加のプログラマからしきりにリクエストの
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
[Rails]はじめてのRailsでWebサービス作ってみた - ギークに憧れて
Twitmemo ここ一ヶ月ほど某社でRailsの勉強をさせて頂いていて､なんか作れーって言われたのでWebサービス作ってみました｡ Twitterユーザーへフォローした理由やメモを追加できるサービスで､Twitmemoといいます｡過度な期待はせず使ってみてください｡ 作った理由2/4現在､自分のフォローは1030人弱｡300人くらいまでは良かったが､さすがにこの人数になると｢あれ？こいつフォローしたっけ…｣って奴が出てくる｡最近はイベントにいってもメールアドレス教えるのがダルくてとりあえずTwitterアカウントを教える､というパターンが多いので､ある程度は把握しとかないとリアルに支障が出るかなーという危機感があった｡そういうのを良い感じにメモできるサービスが欲しかったので作った｡プラス､自分がどういう評価されてるか知れたらFavstarっぽくてうけるかなーという感じ｡ 以下､サービスを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Rails 4.x][Bootstrap] Rails 4.x で Bootswatch を使う方法 - Qiita![[Rails 4.x][Bootstrap] Rails 4.x で Bootswatch を使う方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/febe472cf933e8b94b33dc01ac748a45ea1ed88e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUmFpbHMlMjA0LnglNUQlNUJCb290c3RyYXAlNUQlMjBSYWlscyUyMDQueCUyMCVFMyU4MSVBNyUyMEJvb3Rzd2F0Y2glMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY3OTg1ZDRiYjllYWU0OTU5OGFkOTExNWE4NmNiZTdk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY29sb3JyYWJiaXQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyODA2ODFkZmJlOWU3NGVhNmZjNzA2MGMyNzRlM2I0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3506d97720b461371446a07950733123)
Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法
Rails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]![Rails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入
Rails Assets
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました