Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web application framework | bootstrap


Published on

Twitter Botostrap is one of the most stable and widely used Web UI Frameworks around the world. The attached articles is from one of my 18 minutes talk at Advaiya Solutions.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Web application framework | bootstrap

  1. 1. 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.
  2. 2. 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. provides some quick live site references those are built using Twitter Bootstrap Framework
  3. 3. 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 • - Needs no introduction • Appster – Fastest growing mobile firm in Australia • Quicklinkr - A home for all of your favorites • Open Cooks – Website for food lovers
  4. 4. 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 webapplications. 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.
  5. 5. 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 fixedfluid 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 JQuery Plugins “jQuery is a multi-browser (cf. cross-browser) JavaScript library designed to simplify the clientside 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
  6. 6. 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 viewport 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
  7. 7. Few In-house development references In-House Development Advaiya Lab Leave Management System Library Management System Ideascale Hackathon | Data Insights Ideascale Hackathon | iSocialytics Sample Screenshot End of document Description 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. Our new leave management system which is currently under development will be using Bootstrap for its UI make-over. 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. 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. iSocialytics project on IdeaScale platform has been built using Bootstrap as the UI Frontend Framework.