XPages – Create a responsive layout with Twitter Bootstrap – #1

In my current project I am developing an XPages application which is supposed to run in a web browser as well as on mobile devices. So before I started coding I had to make some decisions. Do I want to create different pages for different devices or is it better to create a responsive layout that takes the work to resize my pages? So I did some research and finally decided to try a responsive layout. Wait a minute, you haven’t heard of responsive web design yet? the I suggest to check out wikipedia for a start.

Once I decided to give responsive design a try I had the choice between many free toolboxes out there. Netmagazine lists 50 helpful tools and there are many more sites dealing with this topic. So after some time I picked Twitter Bootstrap (TB), because it seems to be very sophisticated and has been used in quite a few high level projects around the globe.

Twitter Bootstrap comes with a lot of features you can select from. Either take all or reduce the footprint of your Bootstrap to your needs. Today I want to show you how to download and customize Twitter Bootstrap. In the next days I am going to talk about how to use it in your XPages applications to create a responsive design.

The first thing is that Bootstrap comes with a grid system. That means it is organized in columns which can either contain content of any kind or nested columns. You can decide to create a fixed column layout or a fluid layout. To create a responsive design you need to go for the fluid layout. There are a couple of basic functionality and design that comes with the full download like tables, forms, buttons, navigation, labels and many more. Moreover there are a couple of javascript plugins that might be useful like transitions, modal dialogs, popovers and carousels. All of this stuff is in the standard download currently available as version 2.1.0.

As you can see some features are available as XPages controls so you might not need them. The standard CSS looks like the Twitter pages which might not be the design you are preferring. That is not a problem at all since Twitter Bootstrap is customizable.

Select the modules you would like to have in your js and css files and adjust the colors to your needs. Once done you can download a ready to use Twitter Bootstrap that is small and fits into your application. TB uses jQuery so I recommend reading Mark Roden’s awesome series about using jQuery in XPages.

This little introduction is the start of a series about XPages and Twitter Bootstrap. In my next post I will show you how to integrate TB into your XPages application and build a first responsive layout.