Sep 302014
 

Designing a web site has always been more of an art than a science. A web page is made of multiple areas: header, footer, sidebars, main content, etc. Inside of each of those areas, the designer places elements of many different types: blocks of text, menus, buttons, forms, images,… The result must be aesthetically pleasing, without compromising the usability.

To make things more difficult, the appearance of mobile devices with all types of screen sizes and resolutions poses a new challenge, as the design should ideally be “responsive”, adapting to the characteristics of the device where the pages are being rendered.

To ease this task, Twitter has released to the community of web developers and designers a free, open source design framework known as “Bootstrap”. This framework enforces a set of style guidelines, and includes a javascript library that implements the functionalities required to achieve an homogeneous, appealing and user-friendly design.

This post examines the possibilities offered by Bootstrap, and gives a brief introduction on how to make use of it.

Download and installation

In the Bootstrap home page there is a download button that gives access to the download page. The name of the file downloaded is bootstrap-3.2.0-dist.zip, and is 200 KB in size.

Uncompressing the zip file under the directory where we want to install bootstrap, three subdirectories “js”, “css” and “fonts” are created. The pages designed to use Bootstrap will include references to the compiled javascript libraries, style sheets and fonts in those subdirectories.

Example 1 – Hello, World

As the first example, we will create a “Hello, World” web page using bootstrap. The HTML code of the page is:

In this code, we can notice that:

  • The first line specifies that this is a document in HTML5 format. Some of the functionalities in bootstrap require a browser compatible with this version of the HTML format.
  • The Bootstrap CSS stylesheet is added in the header section.
  • JQuery is a dependency of Bootstrap. The JQuery javascript library is added at the bottom of the body section, and the Bootstrap javascript library is added immediately after.

The “Hello, world” page is rendered in the browser as shown below:

hello-world

Hello World with Bootstrap

hello-world-sin-bootstrap

Hello World without Bootstrap

At first glance, we can notice that the default font type used to render the text has changed Looking a bit closer, we might also notice that the default left margin has been set to zero pixels in the document using bootstrap.

Example 2 – Top menu

In this example we are going to add a top menu to the page. To do this, add the HTML code below immediately after the <body> tag:

The menu options in this HTML code are written as unordered lists (<ul>…</ul>) the design and functionality is added by assigning bootstrap classes to the HTML elements: navbar, navbar-fixed-top, dropdown, pull-right, etc.

We must add also a style definition under the reference to bootstrap.min.css, above the closing</head> tag:

This CSS code creates a gap of 60 pixels at the top of the page, to accomodate the menu.

Here is how our top menu looks like in the browser:

bootstrap3-top-menu

As can be seen, Bootstrap has applied a nice design to the top menu, and besides it has incorporated the functionality required by the dropdown menu, with a minimal effort required from the designer.

Responsive design

We have already mentioned that one of the main challenges that web designers mut cope with these days is the great variety of devices where the page mith be rendered: desktop computers, portable computers, tablets, smartphones,… The design must adapt to the many different screen sizes and resolutions of these devices.

Bootstrap also helps implementing a responsive design to deal with this problem.

To make a page responsive, add the following lines under the line that includes “bootstrap.min.css”:

Then, add to the <div class=”navbar-header”> element a button  that will be displayed instead of the full menu when the page is rendered in small screens:

We can now reload the page in the browser and reduce the size of the browser window, to check the result. When the window width is less than a given threshold, the top menu is replaced with a single button. When the button is clicked, a dropdown menu is displayed showing the elements in the top menu:

small-screen-menu-collapsed

Collapsed menu in small screen

small-screen-menu-dropdown

Menu dropdown in small screen

This brief introduction to bootstrap can give an idea of the possibilities offered by this framework. In next posts we will explore in more detail the characteristics and features of Bootstrap, and will review the large collection of plugins available that extend the functionalities of this useful library.

References

Bootstrap website

 Posted by at 4:21 pm

 Leave a Reply

(required)

(required)