9

I'd like to change many things, for example buttons color or for example change the background-image color on the nav bar (header). I use boostrap-sass gem so i can't use boostrap website' Customize page

Should I really override all these on my file custom.css.scss or can I change these somewhere more low level ? i don't find the .css files allowing me to do that in my project file (I searched all lib, app and vendor /assets but noweher i find the css of boostrap. i suspect it's because they're not there but they're directly in the gem files) I have a lot of changes so i feel overiding so many things is not the best option.

What's the best way to do this? Thanks

Mathieu
  • 4,587
  • 11
  • 57
  • 112

3 Answers3

27

I have started using the Sass flavor of Twitter Bootstrap and I just came up with a sensible way of structuring my files so I can make my own custom overrides without messing with the core files AND keep all your CSS in one file for faster loading.

In a nutshell I put all the sass files into assets/sass and make a subdirectory called bootstrap for the core files. I then make a sibling directory called theme for my custom scss files.

Go to /bootstrap and inside this directory is a file called bootstrap.scss which includes all the core components. Rename this file to theme.scss and put it in the parent directory like this:

file structure

As you can see I already have some custom overriding sass includes files already in the theme directory. These will be tacked on to the bottom of the default bootstrap CSS when it's compiled.

The magic happens when you go into theme.scss and change the include paths like so. Look toward the bottom of the image for the overrides and toward the top for the custom variables reference.

Note: If you want to edit the variables in bootstrap, it's a good idea to make your own _variables.scss file in your theme directory and include it at the top of your theme.scss file. This way you can override the bootstrap variables which will persist with updates in the future.

Then just include theme.css in your pages and voila. This is how I have started doing it and haven't run into any bugs yet.

I find this the least complicated of the methods I have seen. And when new updates come down I'll just update the core bootstrap files and keep my edits!

Cœur
  • 37,241
  • 25
  • 195
  • 267
gillytech
  • 3,595
  • 2
  • 27
  • 44
7

You should never modify Boostrap's original files. The best option is to override their classes with your own ones. You can do this by creating a css file in your assets/stylesheets folder, which will be included automatically in your app.

amb110395
  • 1,545
  • 13
  • 16
7

I too have this same issue and I like gillytech's answer, but I would like to add that you do not need to copy everything from the _variables.scss file into your own variables file. Your just need to declare and use the same variables that Bootstrap is using and make sure you will be loading your variables files before Bootstrap's _variables.scss file is loaded.

You will notice that many of the Bootstrap variables have a "!default" after assigning a value to it. This means that sass will not overwrite it if it is already defined.

So my theme.scss file looks like this:

@import "superhero-variables";
@import "bootstrap";
@import "superhero-theme";

Found this here under "Styling Bootstrap with Variables": http://pivotallabs.com/sass-with-bootstrap/

Captain America
  • 1,802
  • 1
  • 19
  • 21