1

I use bootstrap-sass gem in my Rails 4 projects. Now, I want to customize my application appearance. I have already looked at its Github page, other threads on the Stack Overflow and many other sites but could not find as answer. So I have the following questions:

  1. How does bootstrap-sass gem work? I understand it installs something on my machine, but what and at what location?

  2. What does @import "bootstrap"; exactly do? I know it imports CSS styles, but from where? From a local folder or from Internet?

  3. Suppose I prepared my own bootstrap theme (I changed sass variables) and I want the application to use my theme instead of default styles. What should I do?

Siguza
  • 21,155
  • 6
  • 52
  • 89
fade2black
  • 546
  • 1
  • 10
  • 26

1 Answers1

1

Simply put, bootstrap-sass actually translates the Bootstrap source code (written in a language named LESS) to SCSS (the two are really, really similar, but still different enough) and packages it in an (arguably) easy to use library (gem).

@import is a SASS directive that, well, imports a SASS file (in this case, "bootstrap") and makes its contents (i.e. the CSS/SCSS stuff) available in your project.

To modify the defaults, you need to override appropriate Bootstrap variables. For example, if you want to get rid of Bootstrap's default rounded corners, add this before @import "bootstrap" in your "custom.css.scss" file (it's in "app/assets/stylesheets"), like this:

$border-radius-base: 0;
$border-radius-large: 0;
$border-radius-small: 0;

@import "bootstrap";

You can find all the variables and their default values here: http://getbootstrap.com/customize/

Please note that you need to replace the "@" sign, used to denote variables in LESS, to "$" (which serves the same purpose in SCSS).

I hope this helps, good luck!

rootless
  • 1,348
  • 1
  • 10
  • 11
  • You mean ` bootstrap-sass` creates/downloads a gem which content is bootstrap variables? So, this gem must be somewhere in my machine? – fade2black Jun 10 '14 at 12:46
  • Since my customization touches pretty much all variable isn't it better remove `@import "bootstrap";` and add my `custom.css.scss` file? – fade2black Jun 10 '14 at 12:50
  • Yes, but it contains not only the variables, but the translated Bootstrap code as well. And yes, it is somewhere on your machine, along with the other gems you installed. But the location doesn't really matter -- just add it to your Gemfile, run "bundle install" and make the modifications to the "custom.css.scss" file. It should just work (you may need to restart your server and/or refresh the page in the browser). – rootless Jun 10 '14 at 12:51
  • If you remove @import "bootstrap" you will not be using Bootstrap at all :D I don't think that's what you want if you jumped through some hoops to get to the "bootstrap-sass" gem. (Of course you can download the vanilla-CSS version of Boostrap and use it as you would any CSS file, but that one's extremely difficult to customize). – rootless Jun 10 '14 at 12:53
  • I see. Then I guess I need to create a file `custom.css.scss` and add/import it just before `@import "bootstrap"`. Is it how Rails programmers do? I mean what is the "usual way" of adding your custom bootstrap css styles/themes to your Rails applications? Am I missing something? – fade2black Jun 10 '14 at 12:59
  • It doesn't need to be named exactly "custom.css.scss", but its name has to end in ".css.scss" and it should be placed in the "app/assests/stylesheets" directory of your Rails app. In this file, define new values (only) for the variables you wish, and then @import "bootstrap". (I think this is the "usual way", however, there are other ways to get Bootstrap to work with your Rails app). – rootless Jun 10 '14 at 13:05