How to use bootstrap

Rails Bootstrap

Embrace and use the bootstrap classes as much as possible, otherwise you can run into problems or make life very hard for yourself the further into the styling you go.

As well as using the classes for styling, it is absolutely crucial to use bootstrap's own variables. For example, setting the font-size-base variable to 16px will cause the entire site's typography to change accordingly, as headings sizes, paragraph font-sizes etc, all inherit from this. Same goes for colour schemes, hover-states, border colours etc etc.

"Using bootstrap's classes and employing its variables as much as you can, and writing as little of your own css as possible, is the key to bootstrap joy." ~ Andrew Stelmach, 2015

How to do it

Refer to http://getbootstrap.com for using classes and (if you're feeling adventurous) bootstrap's jquery plugins.

Changing variables

Go to http://getbootstrap.com/customize/#less-variables and decide which one you want to change. Have a peruse of this - you'll see that there are many many variables, which means an awful lot of the changes you might want to make are best done by working with the variables. For example, you might want to change the background colour of the 'default' style of button. This is best done by assigning the desired colour to the btn-default-bg variable; the button's hover-colour and border colour will all be calculated automatically from the value of this variable, making your job much easier.

For an example, we'll change the value of the @font-size-base variable to 18px.

The imports and files have been setup already for this app. All you need to do is change the @ to a $ and assign the desired value to it, so:

Simply insert $body-bg: 18px; into assets/stylesheets/sass-variables.scss and it's done.

Other awesome features of this approach

There are infinite possibilities with this, but basically you can use the sass variables in your scss files. For example, let's say you have set $body-bg: #F3E5C2, you could then do $text-color: $body-bg.

You can also use the variables in your custom.scss stylesheet with something like:

.events {
  color: $body-bg;
}

Another great thing about sass is that you can make your own sass variables:

/assets/stylesheets/sass-variables.scss

$my-global-awesome-colour: #F3F3F3;

then: /assets/stylesheets/custom.scss

.events {
  background-color: $my-global-awesome-colour;
}

This is powerful, because it means you can set up 'global' variables to use in several places in your stylesheets that, if you want to change, you only have to change it in one place.

Sass has loads of powerful features. I highly recommend checking out Nesting - it becomes your standard after you've used it once! The & is also really useful.

Good resource for sass joy: http://sass-lang.com/guide