{"id":729,"date":"2013-07-21T14:56:37","date_gmt":"2013-07-21T21:56:37","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=729"},"modified":"2013-07-21T16:49:05","modified_gmt":"2013-07-21T23:49:05","slug":"my-bootstrap-week-of-love","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/my-bootstrap-week-of-love\/","title":{"rendered":"Four Days of Bootstrap Love"},"content":{"rendered":"
\"Twitter<\/a>
Twitter Bootstrap Image<\/figcaption><\/figure>\n

I am currently working on a Rails app and was tired of looking at the default styling as I build it out … so I sat down to give it some Twitter Bootstrap style<\/a>. To give \u00c2\u00a0the app some css love, I added twitter \u00c2\u00a0bootstrap to my Gemfile and ran bundle install. It took me roughly four days of playing around to get a really good feel for the power of Bootstrap.<\/p>\n

What follows is a quick overview of what may help you get started with Bootstrap as well:<\/p>\n

ADDING BOOTSTRAP TO YOUR RAILS APP<\/strong><\/p>\n

Add to your Gemfile:
\ngem 'bootstrap-sass', '2.1'<\/code><\/span><\/p>\n

Run “bundle install”<\/p>\n

$ bundle install<\/code><\/span><\/p>\n

The purpose of Gemfile is it serves as reference to Rails on what dependencies\/gems the app needs. Specifying it in Gemfile makes it available.<\/p>\n

THE STYLES<\/strong><\/p>\n

Be sure to import the Boostrap styles into your application.css file. If you have a custom \u00c2\u00a0SASS stylesheet, be sure to include this:<\/p>\n

\/\/ Use Twitter Bootstrap<\/span>\r\n@import \"bootstrap\";<\/span>\r\n@import \"bootstrap-responsive\";<\/span><\/pre>\n
Bootstrap does not automatically call the responsive styles so be sure to add that last line.<\/p>\n
THE Bootstrap GRID RULES!!<\/strong><\/p>\n
The amazing simple-complexity, beauty and methodology of Bootstrap is in it’s Grid. The default Bootstrap grid system uses 12 columns, adding up to a 940px wide bounding container. If you choose to require the responsiveness features of bootstrap, the grid adapts to anywhere from 724px to 1170px widths. Below 767px, the columns fluidly stack vertically, the menus minimize. The size of the viewport dictates the behavior of elements.<\/p>\n
Each of the 12 columns are 70px wide with 30px gutters each. Thera are fluid classes for both rows and containers and classes you can use depending on the number of rows and columns your layout requires.<\/p>\n
RESPONSIVENESS<\/strong><\/p>\n
Bootstrap does not enable responsiveness by default so you need to do a few things first<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><\/span><\/pre>\n
There are a few more steps, but those are necessary steps to begin.<\/p>\n
MEDIA QUERIES<\/strong><\/p>\n
The media queries that Bootstrap offers will modify the width of the grid columns, it will stack elements removing floats where necessary and will fiddle with heading and text size to make it readable on a number of devices.<\/p>\n
\/* Large desktop *\/ @media (min-width: 1200px) { ... } <\/span>\r\n\r\n\/* Portrait tablet to landscape and desktop *\/ @media (min-width: 768px) and (max-width: 979px) { ... } \r\n\r\n\/* Landscape phone to portrait tablet *\/ @media (max-width: 767px) { ... }<\/span>\r\n\r\n\/* Landscape phones and down *\/ @media (max-width: 480px) { ... } <\/span><\/pre>\n
 <\/p>\n
<!--[if lt IE 9]> <script src=\"http:\/\/css3-mediaqueries-js.googlecode.com\/svn\/trunk\/css3-mediaqueries.js\"><\/script> <![endif]-->\r\n\r\n<\/span><\/pre>\n
I began styling elements using the Components library<\/a>.<\/p>\n
In conclusion, in a few days, I was able to dig into the basics of Boostrap. I encourage you to play around, you may actually have fun! I know I did — and will continue to do so! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
I am currently working on a Rails app and was tired of looking at the default styling as I build it out … so I sat down to give it some Twitter Bootstrap style. To give \u00c2\u00a0the app some css love, I added twitter \u00c2\u00a0bootstrap to my Gemfile and ran bundle install. It took me […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[29,134,137,103,155],"tags":[279],"_links":{"self":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/729"}],"collection":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/comments?post=729"}],"version-history":[{"count":27,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/729\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/729\/revisions\/754"}],"wp:attachment":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media?parent=729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/categories?post=729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/tags?post=729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
To deal with browsers that do not support CSS3 media queries, namely IE 8 and below, there is a nice IE shim to include in the head<\/code> <\/span>of your document and you can use respond.js<\/a> to add media query support to IE:<\/p>\n
Download or call bootstrap-responsive.css<\/a> into your styles and include this code in the head<\/code> <\/span>of your document:<\/p>\n