Many people think that changing .container’s width to 960px is sufficient; well, it’s not quite true.
As per Bootstrap’s docs, you can disable responsiveness by forcing a fixed width to the container:
But is it what you really want?
I love Bootstrap, but personally if I had to build a fixed-width 960px site, which is quite old school nowadays, I wouldn’t use Bootstrap at all. And you know what? In most cases I wouldn’t even use a grid system! I’d use plain-old CSS (or Sass), and I’m pretty confident it would be fine. But that’s me. Of course you are free to do anything you want. But remember, Bootstrap’s focus is on mobile and responsive design.
If you need a 960px grid system, you may not want all the stuff that comes with Bootstrap. Also, you may want to think again about what you are going to build; this is way more important than the front end framework you will choose.
Now, this tutorial is for who wants a 960px site, but still preserving responsiveness.
Show me the light!
What I’m going to explain is not a hack, it’s the way Bootstrap works.
When you need to change Bootstrap’s default width, the best way is to recompile its source code. Yeah, that sounds hard and time consuming, but don’t panic.
If you are using Sass or LESS will be very easy to customize the grid system. However it really depends on what framework you are using.
E.g.: if you are using Ruby on Rails, chances are you are using the bootstrap-sass gem. On the README in GitHub there’s already everything you need to know in order to customize Bootstrap. The only thing you have to be aware is that you should redefine variables before importing Bootstrap, otherwise Bootstrap will use the old ones.
The 960px grid system values
These are the correct values for a 960px grid (in Sass):
// default is 1140px + $grid-gutter-width$container-large-desktop:940px+$grid-gutter-width;// default is 30px$grid-gutter-width:20px;
What about the media queries?
You may want to disable the media query for large desktops, you don’t need it anymore.
Changing $screen-lg to be $screen-md should do it.
I believe this is the best solution so far. It’s far better than removing all stuff related to large desktops, because:
it’s definitely easier;
you’ll be able to upgrade your custom Bootstrap when you’ll want to;
you won’t run into any issues.
What if I’m using plain CSS?
If you are using CSS you can use the online build customizer. However I recommend you to switch to Sass or LESS.
If you are struggling to get rbenv working on your machine, then I believe you landed in the right place: here I’m sharing some gotchas I had while setting up rbenv on Mac OS X 10.9.3.
First of all, make sure you remove RVM completely. It’s not compatible with rbenv.
$ rm -r ~/.rvm
Remove it from your $PATH as well.
I’m using fish shell, that has its own quirks, such as it doesn’t have a export command to export variables to $PATH. Instead it uses set. E.g.:
$ set VARIABLE VALUE
For example, in order to call rbenv, I set up my $PATH this way:
$ set -u fish_user_paths $fish_user_paths ~/.rbenv/bin
Fish also handles things a bit differently. If you are using it, you’ll probably be burned by the fact it doesn’t understand the $ function that in POSIX shells creates a sub shell. Fortunately I managed to find a fix for that: see this article. Basically it says you need to add this code to your config.fish file:
set -gx RBENV_ROOT /usr/local/var/rbenv
. (rbenv init -|psub)
But pay attention and make sure you understand what’s going on here. Actually the code above didn’t work for me, as the installation path of my rbenv was different. If you installed rbenv with git clone, the right code is:
set -gx RBENV_ROOT ~/.rbenv
. (rbenv init -|psub)
In fish it’s also possible (albeit not recommended) to use the config.fish file in order to set the $PATH variable permanently. You can do it with (e.g.):
set -x PATH ~/.rbenv/shims /usr/local/bin /usr/bin /bin $PATH
To ensure I was using the right Ruby version, I moved the system Ruby away, in /tmp. Of course you need to sudo for that:
$ sudo mv /usr/bin/ruby /tmp
Another super important thing is: NEVER EVER install gems using sudo. If you do that you’re going to have serious problems/conflicts and weird errors in your shell. Do yourself a favour by installing things in your home (~) and avoiding sudo at all costs. Always.
A good thing to do for ensuring you are going down the right path is to use which: which rbenv, which ruby and which gem will tell you if you actually have your stuff in the right place (that is the .rbenv/shims on your home folder).
At this stage you may be able to install Ruby (you need the ruby-build plugin for that). Run:
$ rbenv install -l
The command above will give you a list of all the available rubies to install. Run, for example:
$ rbenv install 2.1.2
$ rbenv rehash
The above will install Ruby 2.1.2 into ~/.rbenv/versions and will rebuild your shim files. Note that you need to run rbenv rehash every time after you install a version of Ruby.
Another useful command is:
$ rbenv global
This tells you which version of Ruby you have. It may differ from what ruby -v says to you, and if that’s your case, you’ll probably want to check your $PATH.
Hopefully that’s enough for getting you started with rbenv. Enjoy!
Have you ever heard about Ruby? It’s my favourite programming language. It was invented in Japan, which is probably the most amazing country in the world, and I think no language can beat Ruby when it comes to magic. Yes: Ruby is Magic.
You don’t believe me, do you? Fair enough, but let me show you why Ruby is so awesome.
You can read and write it like English.
Yes, it’s true. Ruby is so simple and intuitive that you can think in English before writing some Ruby code. For example:
The code above is a Ruby function (or method) declaration. So, when you want to run the speak_english function, you do it this way:
You may have noticed the nil: what’s that? It’s just nothing, literally. It represents the void (emptiness, no value at all). In other languages, such as SQL (the mother tongue of databases), you can find it as NULL.
In Ruby, everything is an object.
Do you know about OOP? It means Object-Oriented Programming, and it’s probably the most important programming paradigm ever invented so far. Ruby takes full advantage of OOP. And when I say full, I literally mean: everything, in Ruby, is an object. Even numbers! If you know at least one programming language, say Java, you must be aware of the fact that Java numbers are primitive types, which mean that they’re not objects. In Ruby, things are different.
Let’s make an example. Let’s say you want to use the speak_english function 3 times. In Java, you’d do something like:
See? I called a function on a number! Cool, isn’t it? And I used only 3 lines of code :-)
Ruby is clear, concise and understandable.
I was a PHP developer when I discovered Ruby. Although I had a bit of OOP background, I was used to write PHP code in a procedural style. Procedural code looks something like:
There’s absolutely nothing wrong with this approach, apart from the fact that it starts being cumbersome, sometimes… because it’s not Object-Oriented. I’ll make one last example, taken from a beautiful StackOverflow’s answer.
Reverse the words in this string:
backwards is sentence This
So the final result must be:
This sentence is backwards
When you think about how you would do it, you’d do the following:
Split the sentence up into words
Reverse the words
Re-join the words back into a string
In PHP, you’d do this:
$sentence="backwards is sentence This";$splitted=explode(" ",$sentence);$reversed=array_reverse($splitted);$rejoined=implode(" ",$reversed);
sentence="backwards is sentence This"splitted=sentence.split()reversed=reversed(splitted)rejoined=" ".join(reversed)
sentence="backwards is sentence This"splitted=sentence.splitreversed=splitted.reverserejoined=reversed.join
Every language required 4 lines of code. Now let’s compare the one-liners.