Web Application Framework | Bootstrap

Building presence, voicing thoughts | Amit Dubey

In today’s world web applications are the preferred choice of development as more and more platforms

are abiding to web standards. In such a competitive and dynamic compositions it becomes essential to

work with frameworks and tools that can help scale your web applications to multiple web platforms

including desktop, laptop and ultra-books to smart phones and tablet devices.

Twitter’s Bootstrap is one such web application framework that helps you build web applications which

are inherently responsive to various resolutions, display aspect ratios and can be used from your choice

of device including mobile devices.

Introduction

Definition of web application framework

“A web application framework (WAF) is a software framework that is designed to support the

development of dynamic websites, web applications, web services and web resources.”

Brief history of web application framework

Earlier web application developers thought process for developing web application UI’s

“Just fit anything to make it run”

Mark Otto and Jacob Thornton at Twitter soon realized that this is not a good idea for future web platforms and

especially for twitter. In August 2011 they published their own made first web application framework under the

banner of Twitter Bootstrap which was most popular GitHub development project by February 2012.

Twitter bootstrap laid the foundation for thought process of responsive user interfaces for web based

applications. Twitter released bootstrap 2 by end of January 2012 which was another massive hit and people

started using Twitter Bootstrap framework actively in their applications.

http://builtwithbootstrap.com/ provides some quick live site references those are built using Twitter Bootstrap

Framework

What is Responsive Web Design?

Responsive web design inherently means reacting to change in environment, in case of web applications this can

be

- Browsers

- Resolutions

- Display Aspect Ratios

- Devices

EXAMPLE OF RESPONSIVE WEB DESIGN

Few more examples of sites built with Twitter Bootstrap • Toyota.com - Needs no introduction

• Appster – Fastest growing mobile firm in Australia

• Quicklinkr - A home for all of your favorites

• Open Cooks – Website for food lovers

Why Bootstrap?

Provides a clean and uniform solution for building an interface for developers

Bootstrap makes use of compact and clean CSS that provides a very clean and uniform solution building

approach. This CSS can be customized as per ones needs, however using the default version also provides enough

features for rapidly building a good looking, crisp and clean web-site or web-application.

User Interface Framework (JS, CSS and Images)

Bootstrap makes use of standard JS, CSS and images providing a consistent look and feel across multiple web-

applications. It becomes very easy even for system users to grasp the application usability quickly and this also

reduces the end user learning curve across web-applications since all of the applications follow the same simple

and clean UI constructs.

Open Source project

You can customize and build your own copy. It’s open source and licensed under Apache 2.0 license making it

free to use and distribute with your own customizations.

Supports all major browsers incl. IE7

Bootstrap has been built inherently on LESS framework making it possible to work across browsers and devices.

LESS is a framework to generate CSS based on parameter settings dynamically, in simple words it’s a way of

generating CSS on runtime that suits your environment and needs.

Supports HTML5 and CSS3

JavaScript takes much longer on MAC platforms and few previous versions of MAC do not even support flash

making it difficult to embed dynamic content into the site. Bootstrap supports and works on HTML5 which has

native support on all popular platforms including MAC and support on all popular browsers making it work

across platforms and devices.

Beautiful and functional built-in components which are easy to customize

Bootstrap come pre-built with standard set of widely used components including buttons, carousels, panels, etc…

Behavior of all these components is driven by the Base CSS component of bootstrap making it really simple and

easy to customize the look and feel and behavior of these controls. Being open source there are also external set

of customized components available those enhance the components to greater extent by introducing higher

degree of customizability.

Bootstrap Constructs

Scaffolding

“A temporary structure on the outside of a building, made of wooden planks and metal poles,

used by workers while building, repairing, etc…”

Twitter Bootstrap scaffolding consists of fixed\fluid GRID system and LAYOUT making it possible to adhere to

responsive design standards. Twitter Bootstrap’s scaffolding also consists of LESS making it easier to customize

the complete structure without even digging deep.

Base CSS

Twitter Bootstrap’s Base CSS covers design constructs such as Typography, Code, Tables, Forms, Buttons, Images,

Icon’s. Bootstrap 2 onwards supports GLYPHICONS.

“GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with

an emphasis on simplicity and easy orientation.”

Components

Twitter Bootstrap comes with pre-defined set of commonly used components including Dropdowns, Button

groups, Button dropdowns, Navigational tabs, pills, and lists, Navbar, Breadcrumbs, Pagination, Labels & Badges,

Page headers and hero unit, Thumbnails, Alerts, Progress bars.

There are external third parties who have also contributed to the component developments to enhance existing

set of components and also add new components. An extensive list exists here http://bootstraphero.com/

JQuery Plugins

“jQuery is a multi-browser (cf. cross-browser) JavaScript library designed to simplify the client-

side scripting of HTML.[2] It was released in January 2006 at BarCamp NYC by John Resig”

JQuery spices up the overall user experience by adding dynamism to components and HTML DOM elements like

Transitions, Modals, Dropdowns, ScrollSpy, Togglable tabs, Tooltips, Popovers, Alert messages, Buttons, Collapse,

Carousel, Typeahead, Affix.

JQuery also exposes various events which can be used by developers to add custom handlers for achieving a

specific task.

Twitter Bootstrap Structure

Bootstrap Benefits? Courtesy: Zing Design

Bootstrap development is FAST If you need to push out a new site or app in a matter weeks and have a shoestring design budget,

Bootstrap is perfect! You can grab one of the great templates available, make a few style changes, throw

in some images, pop on a bit of snazzy interactivity and you’re away! In the past, fast and easy has been

synonymous with bad practice, and while there are a few issues, Bootstrap has been built from the

ground-up by some of the smartest, geekiest geeks on the planet. Cross-browser and device

compatibility have been taken into account, which will cut down your debugging time phenomenally.

It’s platform agnostic Remember: while it might seem like magic, it’s just CSS and JavaScript. You don’t have to learn anything

new, just plug it into the head of the document and all of it’s magnificent power will suddenly become

available. Just in case things weren’t easy enough, you can get a Compass version of Bootstrap if you

prefer SASS to LESS, there are Bootstrap packages like this one for .NET and, of course, a WordPress

plugin.

You can just pop magical classes onto any HTML element and

make it do fancy stuff! Now I know what you’re thinking… ‘Hey isn’t that going to make my HTML horribly unsemantic?!‘. Well

maybe it doesn’t follow best practices, but it is easy and fast. If time is of the essence, or the site is a

one-off promo or landing page, Bootstrappin’ is a no-brainer. If you are worried about non-semantic

markup but are still eager to use Bootstrap for a big project, you may find you have to dig into the

Bootstrap source code.

It’s responsive from the get-go! By using the fluid grid layout, designing for responsive websites is a walk in the park. Everything just

works! Enjoy the true power of the grid, watch as your columns respond fluidly at every important view-

port width. Bootstrap makes mobile-first development even easier as you don’t need to go altering

your mark-up with every new screen width that you are designing for.

It’s fully customizable

Few In-house development references

In-House Development Description

Advaiya Lab Our very own Advaiya Lab is using Twitter Bootstrap for in-house

projects. Advaiya Lab will soon be publishing various flavored

Bootstrap Templates to be used in live projects too.

Leave Management System Our new leave management system which is currently under

development will be using Bootstrap for its UI make-over.

Library Management System One small application recently developed and used within Advaiya

Lab is Library Management System. This version is a SharePoint App

and uses Bootstrap for its UI.

Ideascale Hackathon | Data Insights Data Insights project on IdeaScale platform has been built using

Bootstrap as the UI Frontend Framework. This project was one among

the First Price Winner.

Ideascale Hackathon | iSocialytics iSocialytics project on IdeaScale platform has been built using

Bootstrap as the UI Frontend Framework.

Sample Screenshot

End of document