Weblog Bass Jobsen

Update: Also read Adding a background gradient to Bootstrap’s navbar with Less

Everyone knows the navbars for navigation from Twitter’s Bootstrap 2. In version 3 the structure has been changed a little, also see Twitter’s Bootstrap 3 RC2 (important changes). The navbar intends to be the main navigation on a website. When using more navbars on the same page you will have to set the z-index manually. Twitter’s Bootstrap 3 add accessibility to the navbar by adding a direct link with a special sr-only class. This sr-only class is visible in screen readers only.

Twitter’s Bootstrap 3 provides four types of navbars. The default navbar, a static navbar on the top of the document and navbar fixed to top or bottom of the document. See Navbar Docs for some example code to add a nav-tag with navbar to your website. To style your navbar you need to add the navbar-default class always. Of cource you could use a custom class or the navbar-inverse class too.

The best way to create a custom navbar (class) will be changing the Less variables and (re)compile your own version of Bootstrap’s CSS. See also: Change navbar color in Twitter Bootstrap 3

The look of the (default) navbar has been changed with Twitter’s Bootstrap 3. Gradients of the background are dropped also the dividers between links seems to miss.
Default Navbar with dividers in Twitter’s Bootstrap 2.x:

Default Navbar in Twitter’s Bootstrap 3:

I also create a custom Navbar generator for those who don’t want to compile the CSS. This generator has the option to add a background gradient and borders to your navbar. The borders can be used instead of the former dividers.

Navbar generated with the navbar generator:

An other example:

Yes, i’m talking about Twitter’s Bootstrap. Release Candidate 2 of version 3 of Bootstrap 3 has been released today. And we will find at least class name changes again, see: What is wrong with Bootstrap 3 RC2. Is there a reason to be not backward compatible? No. Or maybe…. you will need some extra CSS code which could slow down your site. Unless you didn’t use the responsive features of version 2.x. Twitter’s Bootstrap 3 can’t be used without the responsive code any more.
The real reason to be not backwards compatible will be the new mobile first approach, i think. To adopt this approach you will have to change the structure of your CSS loading. You will have to work from small to big. I wonder what the benefits of the mobile first approach are nowadays. I understand some older smart phones don’t handle all css3 features or not even Javascript. Of course it would be nice when all this old phone users will see a nice looking and well functioning website.
But who has such old phone and why? Most people buy the newest phone every week. Maybe not every week but certainly often.
I also bet most web designers never check their site on a ‘old’ phone. They will load the site on their newest i-Phone via broadband wifi and say: Wooh that looks cool.
Maybe this the problem with Twitter’s Bootstrap too. It’s cool.
Should we rename everything? Why not? Everybody will happy with this new stuff, they don’t care.

If the mobile first approach really reduce load time / data traffic mobile users will profit a little. But Mobile Internet will become faster and faster and this happens sooner and sooner.

Should you migrate your website from Twitter’s Bootstrap 2.x to 3?

I don’t think so. With Twitter’s Bootstrap you already have chosen a progressive technology. Your website will be responsive and fit mobile users needs too. New browsers and techniques won’t work with 2.x in future. But also consider the mean life time of a / your web design. Twitter’s Bootstrap drops support for IE7 and FF3 (check the facts here: IE10 blows past IE7 and IE6′s combined market share, Firefox gains too, but Chrome hits 21-month low ). Beside browser support the typehead plugin is also dropped.

Should you build your new website with Twitter’s Bootstrap 3?

You could consider it at least (after the final release). Read also: Writing Twitter’s Bootstrap with upgrading to v3 in mind. If you used 2.x before you should learn some new things.
Except from the backwards compatible their seems nothing wrong with the new 3 version. The new small grid will make happy the modern phone users. The grid is fluid by default now, so you will have to study the profits and disadvantages of this when you used to the fixed layout.

What are the alternatives? Personal i love the idea behind (css) frameworks with a grid. I should never consider to write all the media queries, browser compatible css. etc. myself again. Zurb’s Foundation can be an alternative. (Is Bootstrap 3 RC 1 ready for production?).

New techniques / insights decouple CSS from HTML. This will make future migrations less painful maybe. So also read this post: Migrating from Zurb Foundation / Twitter Bootstrap to Bourbon & Neat. It refers to Bourdon and Neat. As they say: “it relies entirely on Sass mixins and does not pollute your HTML”. This combination looks promising too.

Bootstrap 3 will be mobile first. No more separate responsive CSS file. Nice, but what if you don’t need / want the responsive features for some reason? So i try to compile Compile Twitter’s Bootstrap 3 without responsive features.

First i made a list of all less files writing media queries:

./print.less:@media print {
./modals.less:@media screen and (min-width: @screen-tablet) {
./carousel.less:@media screen and (min-width: @screen-tablet) {
./responsive-utilities.less:@media screen and (max-width: 400px) {
./responsive-utilities.less:@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
./responsive-utilities.less:@media (min-width: @screen-desktop) {
./responsive-utilities.less:@media print {
./jumbotron.less: @media screen and (min-width: @screen-tablet) {
./grid.less:@media (min-width: @screen-tablet) {
./grid.less:@media (min-width: @screen-desktop) {
./grid.less:@media (min-width: @screen-large-desktop) {
./navbar.less:@media screen and (min-width: @grid-float-breakpoint) {
./mixins.less: @media
./mixins.less: @media (min-width: @screen-small) {
./mixins.less: @media (min-width: @grid-float-breakpoint) {
./mixins.less: @media (min-width: @grid-float-breakpoint) {
./mixins.less: @media (min-width: @grid-float-breakpoint) {
./mixins.less: @media (min-width: @grid-float-breakpoint) {
./forms.less:@media (min-width: 768px) {

The basic idea will be drop the breakpoint and disable all grids except from the 960px (@screen-desktop) one.

I don’t need responsive-utilities.less so i remove it from bootstrap.less. Why does it file contains a “@media print” media query?

// Print utilities
.visible-print {
.responsive-invisibility();
}
.hidden-print { }

@media print {
.visible-print {
.responsive-visibility();
}
.hidden-print {
.responsive-invisibility();
}
}

See also: https://github.com/twitter/bootstrap/issues/8460

I should expect this in print.less, but for this reason i can’t remove responsive-visibility/responsive-invisibility. You will find this functions in mixins.less. (see: )
I also drop jumbotron.less. Why should i need this at all?

After this i look to: “./modals.less:@media screen and (min-width: @screen-tablet)”, “./carousel.less:@media screen and (min-width: @screen-tablet)”, “./navbar.less:@media screen and (min-width: @grid-float-breakpoint)”, “./forms.less:@media (min-width: 768px)”. The hardcoded 768px is a mistake i think, see also: https://github.com/twitter/bootstrap/pull/8454.

@grid-float-breakpoint will defined in variables.less as “@grid-float-breakpoint: @screen-tablet;”. On the first sight i should think this should be: “./modals.less: @media screen and (min-width: @grid-float-breakpoint)”, “./carousel.less:@media screen and (min-width: @grid-float-breakpoint)”, “./navbar.less:@media screen and (min-width: @grid-float-breakpoint)”, “./forms.less:@media (min-width: @grid-float-breakpoint)”. Cause this setting depend on a breakpoint which should be independent of the grid sizes (@screen-tablet). see: https://github.com/twitter/bootstrap/issues/8459

To compile my first non responsive version i have set them all to @grid-float-breakpoint with @grid-float-breakpoint : 0px. This works well for the forms where this breakpoint sets the right alignment for the form labels. Now the alignment is always right which could be okay for a non responsive site. For the dialog the effect will a fixed width of 560 pixels in stead of a 100% (auto) width. For a non responsive site we should prefer this too. Overall it doesn’t matter cause i will replace grid.less and don’t use @screen-tablet any more.

At least i changed grid.less to:


//
// Grid system
// --------------------------------------------------

// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
}

// Mobile-first defaults
.row {
.make-row();
}

// Common styles for small and large grid columns
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
{
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}

//
// Container and grid column sizing
//

// Tiny device columns (smartphones)
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
}
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
.col-4 { width: percentage((4 / @grid-columns)); }
.col-5 { width: percentage((5 / @grid-columns)); }
.col-6 { width: percentage((6 / @grid-columns)); }
.col-7 { width: percentage((7 / @grid-columns)); }
.col-8 { width: percentage((8 / @grid-columns)); }
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }

// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); }

.col-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); }

// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }

.container {
max-width: @container-desktop;
}

Now you will have a non responsive grid. Remember use “.col-” as class prefix for your grid rows now. Try it yourself and download the css file from: https://github.com/bassjobsen/non-responsive-tb3