Introduction

Welcome to the second book in the Succinctly series that covers the Twitter Bootstrap (BS) UI and CSS framework.

In my first book I laid down the initial groundwork, and got you started with BS V2.

Since that book was released however BS V3 is now the mainstream version.

In this book we're going to continue to build on that groundwork and move forward into using BS V3, we'll look to see where things are different, we'll explore the new features and we'll see that a big chunk of what was present in version 2, is still applicable to version 3.

If you've not yet read the first book on version 2, then I encourage you to do so as I will be referring to it at various points throughout this book.

The style and layout in this book will also be slightly different from the first one, in that it will be written more as an extension to the first book rather than an independent book in its own right.

Why? Well I believe in order to understand the entire Bootstrap landscape you need to look at it from the beginning. You need to be able to understand what it set out to achieve and how.

You will be able to pick just this book up and learn the basics of BS V3, but you'll get a much deeper, better understanding if you read the V2 book first.

What's Changed

So what's changed from V2 to V3?

Quite a lot it happens.

The most major change between the two versions is that V3 is now "Mobile First". BS V2 was a responsive layout CSS kit, but its mobile and responsive features were always second place to its nice rich UI features. In fact in order to make the responsive stuff work correctly, you had to include a second CSS file whose sole purpose was to enable the responsive, mobile features and nothing else.

In V3 this whole situation has been completely reversed. The entire framework is now mobile friendly and responsive out of the box, and it now takes extra work to adapt your layouts for larger screen formats.

Don't get me wrong though, it's by no means a huge amount of work, most of what you need to change is still just simply swapping classes about and structuring your HTML mark-up correctly.

The other major change is in the naming of classes and API calls. A large amount of the class names that were introduced in V2 are now either deprecated or have been renamed to something more suitable to their intended purpose.

There has also been a major effort to rename class names to be more consistent, for example, in V2 for items that targeted the RED error color we had the following classes:

• Buttons - 'btn-danger'
• Text - 'text-error'
• Table Rows - 'tr.error'
• Labels - '.important'
• Badges - '.important'
• Alerts - '.error'
• Progress Bars - 'progress-danger'

Now in version 3 these have be consolidated so that naming is similar across all components as follows:

• Buttons - 'btn-danger'
• Text - 'text-danger'
• Table Rows - '.danger'
• Label, Badge, Alert - '.danger'
• Progress Bars - 'progress-bar-danger'

As you can see, consistency is now a major player in the V3 classes, and many other similar changes have been made right across the entire framework.

There has been quite a few more minor changes too, for example the box-model used by Bootstrap has now been improved considerably with all elements now using 'border-box' as the default CSS box sizing model.

The grid system has now been extended and improved too, and instead of being one monolithic grid system with optional classes, it now comprises of four tiers of grid sizes specifically aimed at phones, tablets, desktops and large desktops.

All the JavaScript stuff has also now been name spaced to reduce conflict with other JS code, the available events are now better named to reflect their purpose and are much more clearly documented than previously.

Modals and Navbars have been vastly improved in terms of responsiveness and along with the class naming consistency changes, the sizing classes for all of the components (Inc Nav Modals) have now been aligned too.

Component wise some of the older less used components have been deprecated and removed the most notable of which is the 'Accordion' component.

Don't despair though, the accordion has been replace with a brand new 'collapsible-panel' component that's much more flexible than its predecessor.

We also have a new narrow jumbotron, new panel types, list groups and much, much more.

Finally the one change that EVERYONE will notice is the look and feel.

Tip: TWB V3 is flat.

Single color, metro / new interface but with rounded corners flat.

The hover classes no longer have nice graduated effects in them, and the progress bars and buttons no longer look semi 3D as they did in V2, instead what the maintainers of TWB have decided to do, is to make it easier to customize the look and feel of the elements that are in the CSS.

The maintainers have even made available a 'Bootstrap Theme' that makes V3 look like the original V2 design to get you started. In the last chapter of this book, I'll go over how simple it now is to override the various classes, and show you how to overhaul the flat theme to take on your own look and feel.

For now though, if you want the V2 experience you'll need to make sure that you also include the appropriate CSS file as required, if you want to stick with the V3 default you don't need anything extra.

New Installation Methods

When BS V2 was first released the only way of getting it was via a download from the project website.

This was covered extensively in the first book, where an in depth discussion of exactly what files where in the zip file and why.

Because so many people were using Bootstrap, it didn't take long before it was made available for free on a CDN by the folks who run MaxCDN. This tradition has continued into the version 3 code base and you can now simply get your chosen standard V3 install by using the following HTML script tags:

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

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

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

As well as the CDN link there is now also a direct download on the 'getbootstrap.com' site not only for the standard JS & CSS bundle as described in the previous book, but also a direct link to a zip of the original 'Less' sources and a conversion to 'Sass' for those folks who would like to be able to include a fully variable based customisable version of the kit in their own build system using tools like grunt to automate things.

On top of the new sources, you can now also use 'bower' to install everything you need using the following from your project folders command line:

bower install bootstrap

Finally, the TWB customizer is still available at:

http://getbootstrap.com/customize/

but has been greatly re-structured and re-built to provide more options, and an easier more intuitive look at what you’re changing and why.

In fact it's now so easy to change things using the customizer that your designer or design team can do 90% of the work needed to set the colors and branding of your download before the files required are even downloaded.

This enables your design department to start making color and layout choices immediately, while you sit and work on the page layouts and adding the code in for the required interactivity.

All that's then required is for you to simply replace your default files, with the files provided to you by your designers and an instant theme change should occur.

Device Support

Officially BS3 only supports the latest round of HTML 5-compliant browsers and Internet Explorer 10 and above.

In reality however the framework also supports IE8 and IE9, however there are some features of CSS3 and HTML5 that don't quite work as expected and in-particular if you want the responsive elements to work correctly you'll need to use 'respond.js' which can be downloaded from the following GitHub repository: https://github.com/scottjehl/Respond.

Once you add respond to your project then it's basically just a general expectation to what was and was not added to the various browsers, at various times.

the parts that will be most noticed as missing are as follows:

For IE8

• border-radius is NOT supported
• box-shadow is NOT supported
• transform is NOT supported
• transition is NOT supported
• placeholder text is NOT supported

This essentially means that place holder text in input elements won't show, and anything that uses rounded corners, drop shadows or has any kind of transition or transformation on the element won't display correctly.

For IE9

• border-radius IS supported
• box-shadow IS supported
• transform IS supported (but only with -ms prefix)
• transition is NOT supported
• placeholder text is NOT supported

Things are slightly improved where IE9 is concerned, rounded corners and drop shadows are now fine, and transformations as long as they also have a 'ms-' prefix version will also work.

Transitions and placeholders on the input elements however still sadly missing.

The official support matrix for the current version of BS3 in current browsers looks like this:

Table 1 (official support matrix)

If you are deciding to target IE9 & IE8, and are using respond.js to support those efforts, then please be aware of the following points

• You will need to refer to the respond.js docs if you’re hosting CSS etc on a different domain (for example a CDN) to mitigate cross-domain problems
• Browser security will cause you problems with file:// and @import based resource references.
• Specific to @import is that Respond.js cannot read the rules properly, which is important to Drupal users as Drupal uses @import quite heavily.
• Older IE compatibility modes will stop bootstrap from working completely, not just with Respond.Js so be careful if you’re testing for backwards compatibility using a modern IE in emulation mode as the results will most likely NOT be what you expect.