May 2013 - Weblog Bass Jobsen

Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3

NB the text below has been written with Twitter’s Bootstrap 3 RC1 in mind. RC2 show important changes, so also read:

Major points for migration:

reconsider your base templates
rename your grid classes
if you templates don’t use the fluid layout, check nesting rows
check and reconsider the stacking of elements in the new mobile grid

Base templates

Twitter Bootstrap 3 drops support for IE7 and Firefox 3.x. Following this you don’t need to include html5shiv any more. Including respond.js (not included) will be enough for CSS media querie support in IE8. For Twitter Bootstrap 2.x i used initializr.com to create a base template. For Twitter Bootstrap 3 you can consider to use a minimalistic template as base:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<h1>Hello, world!</h1>

<!– JavaScript plugins (requires jQuery) –>
<script src=”http://code.jquery.com/jquery.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>

<!– Optionally enable responsive features in IE8 –>
<script src=”js/respond.js”></script>
</body>
</html>

This template will be responsive mobile first by default.

Rename your grid classes

The grid classes for span and offset are renamed form span* and offset* to col-span-* and col-offset-* in Twitter Bootstrap 3. Preform a global search and replace action in your templates files to rename this classes. You could use regular expressions to do this. I use Geany to edit my templates files. Regular expressions like replace “span([0-8]+)” with “col-span-\1” did the trick, see below:

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-“, “.col-sm-” and “.col-lg-“. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). (last update about the grid based on Twitter’s Bootstrap 3 RC1, see also: Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding)

See also http://examples.getbootstrap.com/grid/ for more examples of the grids. Or consider the table below:

Use Less mixins to migrate your grid

The ‘old’ span* will not be the same as col-* or col-lg-*. So replacing the class names in your templates will be give you better results. But when looking to an example like http://examples.getbootstrap.com/jumbotron/index.html you will find the the col-lg-* class in place of the former span* class. This will give you a possibility to create a mixin for span* with the same styles as col-lg-* in this case. Note: The col-lg-* will stack below 992px by default (see: New twitter bootstrap 3 grid, changing breakpoint and removing padding).

Switch to fluid layout

A fluid layout uses percents instead of pixels for column widths. Twitter Bootstrap 2.x let you choose between pixels and percents. In Twitter Bootstrap 3 the grid is fluid by default. So if you didn’t use the fluid grid it’s time to switch now. The most important difference will be the nesting of row. Using percents a nested row should get a total width of 100% too cause it gets its width from its parent. For this reason each nested level of columns should add up to 12 columns in the fluid layout. Who don’t use the fluid layout in Twitter Bootstrap 2.x will used to give a nested row a set of columns that add up to the number of columns of its parent. So find your nested rows and change their columns so their number add up to 12.

The small and tiny grid

~~In Twitter Bootstrap 3 anything under 768px use the so called small device grid~~. The small and tiny device grid also have 12 columns and are fluid too. Offsets are not available and you have to use special classes to set the columns. Use the .col-* and .col-sm-* classes for the ~~mobile~~these grids.
You can use all grid classes for the same column b.e.:

~~<div class=”col-span-3 col-small-span-6″>~~
<div class=”col-6 col-sm-6 col-lg-6″>

The above will give you a column of 50% width in the large grid, but a column of 50% in the smaller grids too. So .col-* and col-sm-* will help you to set the way of stacking the columns on small devices. The col-lg-* classes are never applied on the small grids. Without adding col-6 and col-sm-6 a div with col-lg-6 get 100% width on the small device grids. see: http://www.bootply.com/67209

Also read: Writing Twitter’s Bootstrap with upgrading to v3 in mind

Example

I migrate my free demo webshop template to TB3. After doing the steps above there still will be other thing to fix.

Responsive navbar

In these templates the menu is wrapped in a “Responsive navbar”. Also here class names are changed. The most important change here is the toggle button is now a real <button> with class .navbar-toggle. The .navbar class adds a background color now.
I change the <a> of the toggle button to button and add the .navbar-toggle class. I also add “.navbar {background:none}” to my custom stylesheets. Now the menu works and collapses as before, beside the collapsing point is at 728 pixels now in stead of 940 pixels.

Padding instead of margin

In the templates i wrapped the product boxes in columns of a row. After the migration this don’t fit any more.

In the in change log we could read: “New single grid system (still uses .row) utilizes percentages over pixels, padding instead of margin, and box-sizing: border-box for easy math.”. Each column now got b.e. padding-left: 15px and padding-right: 15px instead of margin-left: 30px;
In the template i add an extra div. This div got my custom classes and will be the parent of the product info code.

<div class=”span3 productitem allround”><div class=”productitemimage”> changed to <div class=”col-4″><div class=”productitem allround”><div class=”productitemimage”>

Input-append class

Before i create the search box with the input-append class. With Twitter Bootstrap 3 you should use the input-group class together with a input-group-btn class:

<div class=”input-group col-4″>
<input type=”text”>
<span class=”input-group-btn”>
<button class=”btn btn-search” type=”button”>Search</button>
</span>
</div>

Breadcrumbs

Twitter Bootstrap 3 adds a separator (/) automatic. You don’t need to code the separator yourself and you have to remove the <span class=”divider”>/</span> from your code. The separator is a slash with color gainsboro (#CCCCCC) by default. You could add “.breadcrumb > li:after” to your custom css to change the separator char or its color.
.breadcrumb > li:after {color:#FF0000; content: ” >”;}

Pagination

The pagination class needs to add to the ul-tag direct instead of to the containing div. But when you want to center the pagination you will have add the center class to the containing div. Note Pager links (previous / next) are centered by default.

Download

You can download this Free Twitter Bootstrap 3 template on Github. Test your own templates on http://bootply.com/ now.

Glyphicons

With the launch of Bootstrap 3, icons have been moved to a separate repository.

Responsive images

Twitter’s Bootstrap 2 makes images responsive by default (by adding max-weight:100%). Bootstrap 3 has a special class to make your images responsive. Use `class=”img-responsive”` to make your images responsive now. See also: Images not responsive by default in Twitter Bootstrap 3.0 RC1?

WordPress Bootstrap 3 Start Theme

I start to migrate the former Skematik theme to Bootstrap 3. This powerful theme framework that can be used as a standalone website builder or as a framework to create child themes for WordPress build on Twitter’s Bootstrap 3. Please give it a try: https://github.com/bassjobsen/jamedo-bootstrap-start-theme. Contributions are welcome 🙂

Migrators

Migrate your Javascript Plugins

Many people wrote Javascript Plugins for Twitter’s Boostrap 2.x. Some examples: Bootstrap-datepicker and Jasny Bootstrap. Most plugins can migrate to TB3 easily, see: How to migrate your Twitter’s Bootstrap Javascript plugins from version 2.x to version 3

Twitter Bootstrap 3 breakpoints and grid

Release Candidate 2 has important changes for the grid and the grid classes. Read Twitter’s Bootstrap 3 RC2 (important changes)

The most important changes in Twitter Bootstrap 3 will be the more mobile-first approaching and the grid. From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (<992px) and the Medium-large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. (updated for Twitter’s Bootstrap3 RC1)

Twitter’s Bootstrap 2 defines breakpoints at 480px, 768px, 980px and 1200px. The layout will always be fluid below 768px.

For this reason the ‘old’ span* will not be the same as col-* or col-lg-*. So replacing the class names in your templates will be give you better results. But when looking to an example like http://examples.getbootstrap.com/jumbotron/index.html you will find the the col-lg-* class in place of the former span* class.

Breakpoints

In variables.less you will find:

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
@screen-xsmall:              480px;
@screen-phone:               @screen-xsmall;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

// Large screen / wide desktop
@screen-large:               1200px;
@screen-large-desktop:       @screen-large;

// So media queries don't overlap when required, provide a maximum
@screen-small-max:           (@screen-medium - 1);
@screen-tablet-max:          (@screen-desktop - 1);
@screen-desktop-max:         (@screen-large-desktop - 1);

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

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet;

~~When i test this values if found something different:~~

“col-*” will be applied always (never stacks)
“col-sm-*” will be applied between 768 and higher (992px) (stacks at 767)
“col-lg-*” will be applied between 992 and higher (stacks at 991)

NOTE: @screen-small is not in use at the moment.

See also http://examples.getbootstrap.com/grid/ for more examples of the grids.

The grid of Twitter Bootstrap 3 has been change to fluid by default. Twitter Bootstrap 3 has only one breakpoint. We will find this breakpoint at 768 pixels. This breakpoint splits small screens and large screens.

Both sides of the breakpoint have a 12 column wide grid. Only modern phone will use the mobile grid, older phoned should only stack. Class names for span and offset are change to col-span-* and -*. Also Twitter Bootstrap 3 introduce new classes (col-small-span-*) for stacking in the mobile grid. You will use this new classes in combination with the standard span and offset classes for large devices:

~~Imagine you will add two image next to each other in a row.~~

~~Twitter Bootstrap 2: (old situation)~~

~~On small screens the images will stack with a 100% width in a fluid layout.~~

~~Twitter bootstrap 3:~~

<div class=”row”>
<div class=”col-span-6″><img src=”image1.png”></div>
<div class=”col-span-6″><img src=”image1.png”></div>
</div>

Without adding the mobile classes the images will don’t use the mobile grid and stack with 100% width.
(Note this differs from my expectation. I expected the main classes also should influence the mobile grid.)

~~Now we could add the new classes and let the images show next to each other with 50% width:~~

~~You can also use this class to change the way of stacking:~~

So we lost some breakpoints but got a small device grid back. Remember offsets are not available with the small grid. Two other new classes are col-pull-* and col-push-*. This classes help you to change the order of your columns. Also these classes are not available with the small grid.

Large screens

The new fluid grid without a default width also lets me think about large screens again. Should i made a decision about the max width of my site when viewed on a large screen? Users who use a site on an large screen with a full screen browsers window should have a reason to do so. So it seems to be more user friendly to let the user choose the max width. I found an interesting article about this: Life Beyond 960px: Designing for Large Screens. At the moment the .container class provides max-widths (728px, 940px en 1170px) for the large grid.

Explore and install Twitter Bootstrap 3

Release Candidate 1 of Twitter’s Bootstrap 3 has been released now. With RC1 Bootstrap uses Grunt to compile the files (see at the end of this post) ~~Twitter Bootstrap 3 is not ready for production yet~~. At this time you can download the latest version on GitHub.
To build and compile this version you need to install: node, npm, less, jshint recess, uglify-js and make. I build on Ubuntu 12.04 LTS.

Download:

https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip

Install node (

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

)

Install npm (apt-get install npm)

Install less (npm install -g less)

~~Install jshint (npm install -g jshint, use npm install jshint recess uglify-js -g)~~install jshint, recess and uglify-js (install npm)

run

make build

to compile Bootstrap

When i tried to build Bootstrap the first time, i got an error like “Error: No compatible version found: source-map@’>=0.1.7- <0.2.0-‘” I solved this by adding Chris Lea’s PPA (https://launchpad.net/~chris-lea/ archive/node.js/) to my system. After updating node.js i still got some errors (js/bootstrap-affix.js: line 23, col 17, Bad option: ‘;_;’. etc.) when building. Running ‘npm install‘ after updating solved this.
After reading npm 1.0: Global vs Local installation and take a better look at the Makefile i realize Running ‘npm install‘ installs local versions of jshint, recess, uglify-js in “./node_modules/.bin”. Where v2.3.1 requires a local install v3 also looks in the global path.

Documentation

To view the docs locally, you’ll need to install Jekyll to run a local server. Run Jekyll from the “docs” dir; jekyll –server. Docs will be available on http://localhost:{port}/docs.html where {port} is 9001 by default. See also: Compile bootstrap 3 docs (How to)?

Grunt

With RC1 Bootstrap uses Grunt with convenient methods for working with the framework.

Install `grunt-cli` globally with `npm install -g grunt-cli`.
Install the [necessary local dependencies](package.json) via `npm install`
use `grunt` to compile and run tests or `grunt dist` to only compile CSS and Javascript

Compiled CSS and JS

Try twitter Bootstrap 3 without compiling and building it? Download the compiled and minified versions of the CSS, JavaScript, and fonts here. No documentation or original source files are included. Updated to RC1

Bootply

Bootply is a playground for Twitter Bootstrap. Use Bootply to design, prototype, extend, or test the Bootstrap framework. Bootply also offers you the opportunity to test your code with Twitter Bootstrap 3.0.0 RC now.

CDN

The folks over at NetDNA have graciously provided CDN support for Bootstrap’s CSS and JavaScript. To use, swap your local instances for the Bootstrap CDN links listed below.

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" />

 <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

Month: May 2013