Jump to content

The ultimate community for Ruby on Rails developers.


Photo

bootstrap-sass and Panel component

bootstrap-sass gem bootstrap component

  • Please log in to reply
8 replies to this topic

#1 larabosa

larabosa

    Signalman

  • Members
  • 13 posts

Posted 31 October 2013 - 03:07 AM

Hi,

 

I am trying to use the Panels component of bootstrap (http://getbootstrap....ponents/#panels).

 

When I add something like this to my html.erb file:

<div class="panel panel-default">

  <div class="panel-body">

    Panel content

  </div>

  <div class="panel-footer">Panel footer</div>

</div>

 

I don't see any box like the one described on the above bootstrap panel component. In particular I am interested in the contextual alternatives, but they don't work either.

 

Any help will be much appreciated.

 

Here is my Gemfile:

 

 
gem 'rails', '3.2.13'
 
# Bundle edge Rails instead:
 
gem 'pg'
gem 'rmre', '~> 0.0.8'
 
 
# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'bootswatch-rails'
 
  # See https://github.com/s...n/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby
 
  gem 'uglifier', '>= 1.0.3'
end
gem 'bootstrap-sass', '~> 2.3.2.2'
 
gem 'jquery-rails'
 
# To use jquery autogrow
gem 'autogrow-textarea-rails'
 
# Table sorter
gem 'jquery-tablesorter', '~> 0.0.3'
 
My custom.css.scss:
// Example using 'Cerulean' bootswatch
//
// First import journal variables
@import "bootswatch/cerulean/variables";
 
//This one line includes the entire Bootstrap CSS framework
 
@import "bootstrap";
 
// Responsive styles go here in case you want them
@import "bootstrap-responsive";
 
// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
 
@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 
/* universal */
 
html {
  overflow-y: scroll;
}
 
 
body {
  //background-image: url("XSEDE_space_image.jpg");
  padding-top: 60px;
}
 
section {
  overflow: auto;
}
 
hr {
  height:1px;
  background-color: darkslateblue;
  border: 0;
}
 
textarea {
  resize: vertical;
}
 
.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}
 
/* typography */
 
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}
 
h1 {
  font-size: 2em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
  color: gray;
}
 
h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  //margin-bottom: 30px;
  text-align: left;
  font-weight: normal;
  color: indianred;
}
 
//p {
//  font-size: 1.1em;
//  line-height: 1.7em;
//}
 
//label {
//  font-size: 1.1em;
  //color: b;
//}
 
/* forms */
 
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 75%;
  @include box_sizing;
}
 
input {
  height: auto !important;
}
 
table.tablesorter {
  font-family:arial;
  //background-color: #CDCDCD;
  //margin:10px 0pt 15px;
  font-size: 9pt;
  width: 100%;
  text-align: left;
}
 
/* header */
// XRAS - REVIEW
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}
 
/* footer */
 
footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #999;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 10px;
    }
  }
}
 
And my application.css
/*
*= require jquery-tablesorter/blue
 *= require_self
 *= require_tree .
 */

 



#2 Ohm

Ohm

    Guard

  • Members
  • 179 posts
  • LocationCopenhagen

Posted 31 October 2013 - 06:14 AM

You are requiring

gem 'bootstrap-sass', '~> 2.3.2.2'

but the panels didn't show up in Bootstrap until version 3.

 

Change that line to

gem 'bootstrap-sass', '~> 3.0.0.0.rc2'

to get the current, or 

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'

to always have the cutting edge from his Github repository.


  • jack likes this

Blog: http://ohm.sh | Twitter: madsohm


#3 larabosa

larabosa

    Signalman

  • Members
  • 13 posts

Posted 31 October 2013 - 03:26 PM

Hi Ohm,

 

Thanks for your reply.

 

I changed the line to use gem 'bootstrap-sass', '~> 3.0.0.rc2' as you suggested and, despite I see the gem installed when i run "gem list --local", still does not work. If it helps, here is what gem list returns. Maybe I need another gem to be installed?:

 

actionmailer (3.2.13)

actionpack (3.2.13)

activemodel (4.0.0, 3.2.13)

activerecord (3.2.13)

activerecord-deprecated_finders (1.0.3)

activeresource (3.2.13)

activesupport (4.0.0, 3.2.13)

annotate (2.5.0)

arel (4.0.0, 3.0.2)

atomic (1.1.10)

autogrow-textarea-rails (3.1.0)

autonumeric-rails (0.1.9.15)

autosize-rails (1.16.7)

bcrypt-ruby (3.0.1)

bigdecimal (1.1.0)

bootstrap-sass (3.0.0.0.rc2, 2.3.2.2, 2.1.0.0)

bootswatch-rails (0.5.0)

builder (3.1.4, 3.0.4)

bundler (1.3.5)

capybara (1.1.2)

childprocess (0.3.9)

coffee-rails (3.2.2)

coffee-script (2.2.0)

coffee-script-source (1.6.3, 1.6.2)

debugger-ruby_core_source (1.2.3)

diff-lcs (1.1.3)

erubis (2.7.0)

execjs (2.0.2, 2.0.1, 1.4.0)

factory_girl (4.1.0)

factory_girl_rails (4.1.0)

ffi (1.9.0)

hike (1.2.3, 1.2.2)

i18n (0.6.4, 0.6.1)

io-console (0.3)

journey (1.0.4)

jquery-rails (3.0.4, 3.0.1, 3.0.0, 2.0.2)

jquery-tablesorter (0.0.5)

json (1.8.0, 1.5.5)

mail (2.5.4)

mime-types (1.25, 1.23)

mini_portile (0.5.0)

minitest (4.7.5, 2.5.1)

multi_json (1.8.2, 1.8.1, 1.8.0, 1.7.7, 1.7.6, 1.7.4)

nokogiri (1.6.0)

pg (0.17.0, 0.16.0, 0.15.1)

polyglot (0.3.3)

rack (1.4.5)

rack-cache (1.2)

rack-ssl (1.3.3)

rack-test (0.6.2)

rails (3.2.13)

railties (3.2.13)

rake (10.1.0, 10.0.4, 0.9.2.2)

rdoc (3.12.2, 3.9.5)

rmre (0.0.8)

rspec (2.11.0)

rspec-core (2.11.1)

rspec-expectations (2.11.3)

rspec-mocks (2.11.3)

rspec-rails (2.11.0)

ruby-debug-base19x (0.11.30.pre12)

ruby-debug-ide (0.4.17)

rubygems-bundler (1.1.1)

rubyzip (0.9.9)

rvm (1.11.3.8)

sass (3.2.12, 3.2.10, 3.2.9)

sass-rails (3.2.6, 3.2.5)

selenium-webdriver (2.33.0)

sprockets (2.2.2)

sqlite3 (1.3.8, 1.3.7, 1.3.5)

thor (0.18.1)

thread_safe (0.1.0)

tilt (1.4.1)

treetop (1.4.15, 1.4.14, 1.4.12)

tzinfo (0.3.38, 0.3.37)

uglifier (2.2.1, 2.1.2, 2.1.1, 1.2.3)

websocket (1.0.7)

xpath (0.1.4)



#4 Ohm

Ohm

    Guard

  • Members
  • 179 posts
  • LocationCopenhagen

Posted 31 October 2013 - 03:27 PM

Did you run 

bundle update bootstrap-sass

afterwards to update the Gemfile.lock-file?


Blog: http://ohm.sh | Twitter: madsohm


#5 larabosa

larabosa

    Signalman

  • Members
  • 13 posts

Posted 31 October 2013 - 03:33 PM

I just did and got the following error so it sounds like i need to add "gem json, '1.8.1'"?:

 

Gem files will remain installed in /.../.rvm/gems/ruby-1.9.3-p429/gems/json-1.8.1 for inspection.
Results logged to /.../.rvm/gems/ruby-1.9.3-p429/gems/json-1.8.1/ext/json/ext/generator/gem_make.out
An error occurred while installing json (1.8.1), and Bundler cannot continue.
Make sure that `gem install json -v '1.8.1'` succeeds before bundling.
 
Process finished with exit code 5


#6 larabosa

larabosa

    Signalman

  • Members
  • 13 posts

Posted 31 October 2013 - 10:19 PM

So, since I had updated my Mac to the OSX 10.9 Mavericks I had to install command line Tools separately, even though I upgraded my Xcode application to 5.0.

That fixed my compilation problem with the "gem json 1.8.1" and made bundle update work properly.

 

That said, I still can't see the Panel box working as Bootstrap 3.0 describes :(

 

Maybe I'll have to download it myself and move the libraries into the right /vendor/ directories and try like that, but I was hoping not having to do that.



#7 Ohm

Ohm

    Guard

  • Members
  • 179 posts
  • LocationCopenhagen

Posted 01 November 2013 - 06:11 AM

It might just have cached the old version locally. I had this very same problem when I switched from 2.3.2.2 to 3.0.

 

Also, you should only do

@import 'bootstrap';

in the scss-file. No seperate responsive CSS is needed in version 3.0.


Blog: http://ohm.sh | Twitter: madsohm


#8 larabosa

larabosa

    Signalman

  • Members
  • 13 posts

Posted 01 November 2013 - 02:45 PM

It might just have cached the old version locally. I had this very same problem when I switched from 2.3.2.2 to 3.0.

 

Also, you should only do

@import 'bootstrap';

in the scss-file. No seperate responsive CSS is needed in version 3.0.

 

I cleaned the cache, commented out imports for the bootswatch/cerulean theme and I could finally see the panel, however, it seems like Bootswatch currently needs Bootstrap 2.3, so I think I need to lock bootstrap-sass-rails to the 2.3 version in the Gemfile :(

 

Is there any other way I could use Bootswatch with Bootstrap 3.0?

 

Thanks!!



#9 Ohm

Ohm

    Guard

  • Members
  • 179 posts
  • LocationCopenhagen

Posted 02 November 2013 - 09:32 AM

If you just want panels, you could import the part about panels from the CSS files manually from Bootstrap.

 

Else it would probably be a bit hard, if the themes from Bootswatch only work for 2.3, as @pdo and @fat did a lot of changes to Bootstrap from 2.3 to 3.0 (hence the major version change) and broke backwards compatibility.


Blog: http://ohm.sh | Twitter: madsohm





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users