Bootstrap Your Application Using Twitter Bootstrap

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 11 Comments

As a front-end engineer, I was always excited to be a part of an assignment where I got to code the markup and CSS from the scratch. Like any other professional, the prospect of implementing my own ideas and exploring fresh techniques, on a fresh project, used to make me euphoric. As time passed by, the number of fresh projects that I was handling increased substantially, and the concept of starting all over again no longer remained an exciting business.

It was a pain to start coding the UI components all over again in each and every project (though I maintained snippets and reused the code, it was not an effective solution for the rework!). It was then I realized the need of maintaining an extensive library of reusable components which could be used across any projects. The idea seemed to be interesting, but the fact was such an effort needed a lot of detailed analysis and extensive testing across multiple platforms and browsers, to be rest assured that, the code be reused without any hiccups across any projects. The idea was to create a framework which was reliable and flexible enough to be reused.

Twitter bootstrap to the rescue

How to Build a Website Using Twitter Bootstrap and SASS: Part 1, Part 2

Just when I was contemplating the idea of creating an in-house framework, with all the goodness and wisdom gathered over time, a couple of front-end engineers from Twitter (@mdo and @fat) launched this awesome open-source web development framework, which to date has helped numerous front-end engineers across the world to reuse, organize and code standard compliant, killer UIs.

TBS (Twitter Bootstrap, will be referred to as TBS from here on in this article) can be defined as a set of well defined, extensively tested, standard compliant HTML, CSS and JS rules, which can be used to build the UI of an app, from top to bottom.  This framework, so far has excelled in bringing all 3 aspects of UI under one umbrella – Content, Presentation and Behavior.

How it is different from other frameworks

TBS is a complete web development framework, converging all the 3 key aspects of a UI – HTML, CSS and JS and stands apart when compared to other frameworks. The magnitude of its importance and usefulness will be understood only by going through the growing of UI library that this awesomeness has to offer. To point out, some of the key features that makes TBS stand apart are:

  1. Designer Developer gap shrinks. TBS is an elite example of how smart and optimized usage of technology can reduce the most prevalent issue in web development – ‘the designer – developer gap’. By painstakingly devising and coming up with a comprehensive set of UI elements (which in fact are aesthetically pleasing as well, from a graphic designer’s point of view), Mark Otto and Jacob Thornton have set a benchmark on approaches which can narrow this gap. With TBS, now developers can be more design conscious and there won’t be any scrappily built pages with any unattended and unstyled elements. Kudos to the team!
  2. Cross browser/device compatibility. With its support for all major browsers (including ie7!) and tablets and smart phones, a framework can’t get better than this. I have made use of its features and I am completely blown away by the productivity it brought to the team and the value it offered.
  3. Completely ‘Responsive’ design. The new age is all about responsiveness. With the introduction of a multitude of devices, the screen resolution variation has undergone a mushrooming growth. TBS has embraced the Mobile space, which is expected to be the next big thing for the web by providing support to tablet and smart phone devices. The smart usage of media queries and advanced selectors make coding for multiple devices a breeze.
  4. HTML5/CSS3 support. TBS comes with HTML5 and CSS3 support. You just have to follow the rules set by the framework (the class and ID names,  the markup structure), and start using it with HTML5 tags. The CSS is coded using advanced selectors and CSS3 attributes to make the most of the latest browser features, and a more clean and super advanced code.
  5. Open-source More than anything else, this framework is built for the masses and thrives on collective wisdom. TBS is open source and available on github. You can contribute and suggest for any changes and enhancements to the framework via github, and after review those changes will be implemented if found useful and relevant enough by the reviewers.
  6. Growing UI library. TBS comes packed with almost all UI elements needed for a web application, ranging from lightweight loaders to accordions and carousels. This list of UI elements keeps on increasing with each release thanks to the community and the smart minds behind this framework. The library is growing with timely updates.
  7. Unobtrusive JS and jQuery plugins. Unobtrusive JS approach is one commendable feature in this framework. With this, using basic interaction elements are just a class name or and ID name away, along with the correct markup. Also, TBS comes packed with some common and frequently used jQuery plugins, built for faster integration. With the unobtrusive JS approach, integrating these plugins are a breeze.
  8. Smart Front-end development wisdom. Mark Otto, and Jacob Thornton have set some really smart and specialized benchmarks when it come to front-end development, with this framework. The techniques they’ve used to handle some common problems, like clearing floats, including icons, unobtrusive JavaScripting, etc are really admirable. No matter if you adopt TBS as a framework for your next project or not, TBS definitely will be adding some piece of wisdom to your front end engineering skills in times to come. So please don’t miss having a look at it!
  9. Ability to customize – power of pre-processor and variables TBS is built using LESS preprocessor, which means there is more control over the CSS code, with the introduction of the concept of variables, mixins and more features that comes packed with LESS. This means customizing the framework for your needs is really easy. TBS also offers a UI based customize feature, where you can select and customize various features and variables (including the no of columns for the master grid of the framework).Refer to http://twitter.github.com/bootstrap/download.html for more insight.

Who should adopt TBS?

Any one who wants to build an awesome web application! But yeah, there are some recommendations which supersedes the statement, which are:

  1. If you are planning to build an app from scratch without a visual designer with a very limited timeframe available for front end development, this is for you.
  2. For a front-end engineering teams looking to set their own benchmarks, best-practices, process and standards, TBS can be the best start. Though I am not advocating to completely adopt and follow the techniques followed by this framework, most of the techniques and strategies used here are worth adopting for a team of front end engineers.
  3. TBS is a set of well defined rules and conventions for HTML and CSS. So, obviously starting it up should be under supervision of a seasoned front end engineer. One should have solid understanding of the basics of CSS, markup and JS to start off with TBS.

Starting up with Twitter bootstrap – some key concepts to get started

Starting off with TBS, requires a strong understanding of the overall strategy of the framework. Some of the key building blocks of the TBS framework strategy are:

  1. Scaffolding (and responsiveness) TBS have defined a solid grid system and a set of smart rules around it, to deal with the creation of complex layouts and multiple columns in a hassle free manner. By default TBS follows a 12 column approach with a default width of 60px per column and a 20px wide gutter space. It follows a row and column based approach in building layouts.

    • Columns: It has used a 960 style class architecture for the grid system where classes ranging from ‘span1’ to ‘span12’ (depending on the no of columns defined) are used to define width for individual columns where span1 is ‘60px’ wide, with a gutter space of 20px.
    • Rows: Each rows are nothing but cleared containers. TBS uses the class ‘row’ to define a row, which will accommodate columns in it. Eg. To build a 3 column structure with 3 equal width columns, the markup will be something like:<div class=”row”>
      <div class=”span4″>4</div>
      <div class=”span4″>4</div>
      <div class=”span4″>4</div>
      </div>
    • Offsetting a column: TBS neatly provides an option to offset a column, which technically means giving an offset left margin to a container. Adding a class ‘offset’ ranging from ‘offset1’ to ‘offset12’ depending on the total no of columns will add relevant left margins to the container. By default ‘offset1’ has a value of ‘100px’ and the value is bound to change with the inclusion of ‘bootstrap-responsive.css’
    • Fluid grid: In case you plan to make the whole grid a fluid one add a prefix ‘–fluid’ to the class ‘row’. Ie, the previous markup for a 3 column structure will be looking like :<div class=”row-fluid”>
      <div class=”span4″>4</div>
      <div class=”span4″>4</div>
      <div class=”span4″>4</div>
      </div>

    (Important note: If ‘bootstrap-responsive.css’ is included, the width and gutter-space (margin-left) of ‘span’ classes, undergoes change, depending on the viewport sizes. This is made possible by effective usage of media queries, identifying max-width and min-width for the screen sizes)

  2. Hook and markup based rules In TBS, each UI patterns is a combined rule of CSS hooks (class names / IDs) and predefined markup (HTML tags). The key to get used to the framework and to start creating pages instantly, is to understand these rules correctly. Taking ‘Form’ as an example – TBS offers 4 different form orientations – vertical, horizontal, inline and search. For a basic form with a label and an input field, following is the markup according to TBS:<form>
    <fieldset>
    <legend>Legend text</legend>
    <div>
    <label for=”input01″>Text input</label>
    <div>
    <input type=”text” id=”input01″>
    </div>
    </div>
    </fieldset>
    </form>By just changing the class name ‘form-horizontal’ to ‘form-vertical’, the orientation of the form wil be changed! That is the way almost all the UI patterns are developed in this framework, thereby making the code flexible enough for changes, without much markup changes. Most of the UI patterns are a combination of such rules, and the key lies in understanding them well.
  3. Extending UI elements by overriding base classes
    TBS follows a neat and simple way to enhance each UI patterns by adding an extra class in addition to the base class which defines the core styling of an element. Eg. a button in TBS has a base class ‘btn’ which has all the basic styles needed for a normal button. There are many other variations available for a button in TBS like bigger one, smaller one, variations in bg colors, and a disabled state variation, and a combination of these variations. For each variations, we need to add an extra class to the tag, in addition to the base class ‘btn’. For example, while markup for a default button in TBS  will look like:
    <a href=”#” class=”btn”>Submit</a>
    for a bigger variation of a button, the markup will be:
    <a href=”#” class=”btn btn-large”>Submit</a> Following is a table of extended classes to be used for different button bg color variations

    This is one of the strategy used by TBS, to apply enhanced styling for most of the UI patterns. Understanding this will make the adoption of TBS a smooth and easy business.
  4. Custom jQuery plugins (use of data and rel attributes)
    Without the behavior layer no application is complet, and that’s where the importance of JS based interactions come into play. TBS uses jQuery framework for all its JS based interactions and comes packed with some custom jQuery plugins, which are minimal and easy to implement. TBS uses HTML5 ‘data’ and ‘rel’ attributes to store additional data useful to trigger some interactions (popovers, modals etc). Like a pop-over component has the attributes, data-content=”content to be appeared in the popover” and rel=”popover”. ie, if a tag is to have a popover on mouseover, the markup would look like:
    <a data-content=”And here’s some amazing content. It’s very engaging. right?” rel=”popover” href=”#” data-original-title=”A Title”>hover for popover</a>
  5. Using TBS with or without LESS
    By default, TBS follows LESS CSS framework. You may follow LESS or may code using normal CSS, without adopting any preprocessors like LESS. But in my experience, coupling TBS with a powerful CSS framework like LESS or SASS, has its own advantages. In my previous article on CSS Preprocessors, i have detailed out the ups and downs of using a pre-processor in a project. Take some time going through that information, and decide, whether to take the leap or not.

Pitfalls and precautions before you start

With every technique and tool comes a set of pitfalls and precautions to be taken to leverage its use optimally and make the most of it. As a front end engineer who has used TBS, and as a passionate designer, I have gathered some wisdom on this sweet framework over time which i believe will be useful for new and early adopters equally. I would like to keep this section a little more open to discussion and these are just my findings and a healthy discussion could bring out more interesting facts and information. So please keep your comments coming on the following list :)

  1. Frameworks should not limit creativity
    A rampant discussion and topic which always comes our way while adapting a framework is its effect in limiting the creativity in terms of visual appeal of an application. Since TBS provides UI elements and patterns on the fly, developers can just start building pages and UI, based on the default styles offered. Though this seems to be a better option than crappy designed app UIs, as a designer I feel effort should be given to customize the UI and create an identity of its own. A graphic designer’s service should be sought after for every application development life cycle. The stress should be on increasing the productivity while creating the UI, but not on churning out identical set of pages all across. Its motivating to see tons of apps, which makes use of TBS, have customized UIs with great visual appeal. Have a look at some awesome TBS based apps here.
  2. Golden rule: Never edit the native CSS files
    This should be the golden rule to be followed, while implementing or using any frameworks. Never make it a practice to edit the native stylesheet or JS files of the framework. Always override using a new CSS file, preferably with the name of the app or theme (ofcouse, make sure you include the custom CSS after including all the others). So, the CSS file structure will look something like the figure below, after adding a custom stylesheet, which overrides the native TBS styles, with the custom design for the app.
  3. Never blindly update the Twitter Bootstrap CSS to the latest release
    Each releases of TBS comes with major updates, and these updates might need markup changes and class name changes, and even CSS rule updates, which might break the pages, which still uses the old markup. So its always recommended to stick to a single major release of the framework, maintain the local copy of all the framework assets. If you really want to upgrade your app to the latest version of the framework, spend some time analyzing about the changes being made to the latest release, make the relevant changes in the markup, test thoroughly and then deploy with the latest release of the TBS CSS.
  4. Give the visual designer a detailed walk-through of the framework
    With the collection of UI patterns and elements available in TBS, it would be a good idea, to let the visual designer know about the framework, and to give him a detailed walk-through of the UI patterns available. It would help him to suggest customizations and give him a direction to frame a design philosophy. One important point to note would be, to let him know, not to limit his creativity within the aesthetics of the UI elements available in TBS.
    This would ensure, all the design mockups delivered by the designer would have the consistency and preciseness with the framework (though seasoned visual designers, do prepare a detailed style-guide for the design that they create, this would help any designer to stick to the basics and reiterate the importance of creating a detailed styleguide and importance of consistency across each UI elements).
  5. Make the most of Pre-processor
    Scalability and flexibility are the 2 base features of any application. As far as front end engineering is concerned, Scalability stands for the ability to accommodate more data and more features without drastic revamping, whereas flexibility refers to the ability of the app to withstand changes in design and architecture to a certain level. With the usage of pre-processors, where the goodness of variables and mixins come into play, I would suggest we make use of these features to the maximum extend possible. Use all the variables in a separate CSS file, and import it in the main stylesheet, so that whenever there is a need to change the theme of the application we just have to import another variable CSS file for a complete makeover for the whole app.
    While using variables, it is recommended to target all the presentational attributes, and convert them to variables. Eg. all color values, base font sizes if possible, iconography etc. The extend to which variables are used, defines how far can the app be customized by just replacing a CSS file.

With more front end engineers and developers embracing this framework with every passing day, TBS itself is getting refined day by day, with the community contribution and with timely releases. With collective wisdom and contribution by enthusiasts, Twitter bootstrap has everything in it to become one of the best way to get started with building an application. If you haven’t started using it yet, this is the time. Get going now!

Watch out for my next post which will give an in-depth account on creating a page from scratch using TBS and SASS

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

12 Written ArticlesWebsite

A User Experience designer with specialized experience in front-end engineering, i have over time developed a strong passion in being associated with product-based teams. The unified goal and challenges that a product's life cycle offers is simply unbeatable! For me, proficiency in tools takes the back seat when it comes to User Experience Design, and i believe one has to be passionate and equally agile to be a key part of the team. I bring to the table the diverse hands-on experience on various facets of experience design, and have played key roles in the team bridging the gap between design, dev and biz groups within product teams. My vision is to be the key hand behind the UX design of a world-class product in a team of passionate and uber-smart techies and designers! Specialties: Information Architecture, Wireframing, Heuristic Evaluation, Web standards, Interaction design, Semantic markup, OO CSS, Usability Review

11 Comments Best Comments First
  • Richard Lewis

    Friday, June 29th, 2012 07:19

    10

    Nice Guide Ranjith, have you mentioned in your guide that the offset rule doesnt work within a row-fluid as its margin is set in pixels and not %, though i believe this issue will be fixed in release 2.1.0

    +2
  • Simon Hamp

    Sunday, June 24th, 2012 11:55

    1

    Great intro to Bootstrap, Ranjith! I agree that it’s a great way to kick off the design aspect of any bootstrapped projects. Remember, you can always re-skin later, especially that there are some great Bootstrap resources around: WrapBootstrap for premium themes, BootSwatch for free themes…

    I particularly liked your ‘Pitfalls’ section as these are really important things to remember, especially not letting Bootstrap stifle your creativity – one thing we’re hearing more of right now is that a few folks are getting a bit tired of vanilla Bootstrap sites, so don’t be afraid to throw some personality in there!

    I just want to mention for you and any readers, if you want some promotion of your Bootstrap-based sites, apps or tools, submit a free listing on Built With Bootstrap site. Don’t forget to check out the gallery of sites for some inspiration too!

    0
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:35

      8

      Thanks Simon … would love to get our app listed.

      0
  • Justin Avery

    Monday, June 25th, 2012 00:48

    3

    Great initial primer on using Twitter Bootstrap.
    There looks to be a few items that are missing in the article, I assume they slipped outside of the <pre> and <code> tags.

    Fluid grid: In case you plan to make the whole grid a fluid one add a prefix ‘–fluid’ to the class ‘row’. Ie, the previous markup for a 3 column structure will be looking like :

    Rows: Each rows are nothing but cleared containers. TBS uses the class ‘row’ to define a row, which will accommodate columns in it. Eg. To build a 3 column structure with 3 equal width columns, the markup will be something like:

    0
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:34

      7

      Missing code snippets are now back Justin :)

      0
  • Pravat

    Sunday, July 1st, 2012 06:52

    11

    Great Article Ranjith :) I am leveraging this framework in one of the my project.

    0
  • Mike Ember

    Tuesday, June 26th, 2012 08:55

    9

    Yeah Bootstrap is a great thing! I’ve used that in few of my projects for clients.

    0
  • rajasegar

    Sunday, June 24th, 2012 23:41

    2

    Thanks Ranjith for the great post, me too a huge fan of twitter bootstrap i have been using it for months and still a lot to learn…

    -1
  • stooni

    Monday, June 25th, 2012 05:26

    4

    Thank for these Post !!

    I think there are endless possibilities

    —Stooni

    -2
  • Cristopher

    Monday, June 25th, 2012 10:31

    5

    Nice article, just wanted to point out you seem to be missing some markup code. Under the key concepts part -> scaffolding. In the UL you are missing examples after “the markup will be something like:” and after “the previous markup for a 3 column structure will be looking like :”

    -2
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:34

      6

      Thanks for pointing out Christopher … those have been fixed now. :)

      -1
  • Pravat

    Sunday, July 1st, 2012 06:52

    11

    Great Article Ranjith :) I am leveraging this framework in one of the my project.

    0
  • Richard Lewis

    Friday, June 29th, 2012 07:19

    10

    Nice Guide Ranjith, have you mentioned in your guide that the offset rule doesnt work within a row-fluid as its margin is set in pixels and not %, though i believe this issue will be fixed in release 2.1.0

    +2
  • Mike Ember

    Tuesday, June 26th, 2012 08:55

    9

    Yeah Bootstrap is a great thing! I’ve used that in few of my projects for clients.

    0
  • Cristopher

    Monday, June 25th, 2012 10:31

    5

    Nice article, just wanted to point out you seem to be missing some markup code. Under the key concepts part -> scaffolding. In the UL you are missing examples after “the markup will be something like:” and after “the previous markup for a 3 column structure will be looking like :”

    -2
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:34

      6

      Thanks for pointing out Christopher … those have been fixed now. :)

      -1
  • stooni

    Monday, June 25th, 2012 05:26

    4

    Thank for these Post !!

    I think there are endless possibilities

    —Stooni

    -2
  • Justin Avery

    Monday, June 25th, 2012 00:48

    3

    Great initial primer on using Twitter Bootstrap.
    There looks to be a few items that are missing in the article, I assume they slipped outside of the <pre> and <code> tags.

    Fluid grid: In case you plan to make the whole grid a fluid one add a prefix ‘–fluid’ to the class ‘row’. Ie, the previous markup for a 3 column structure will be looking like :

    Rows: Each rows are nothing but cleared containers. TBS uses the class ‘row’ to define a row, which will accommodate columns in it. Eg. To build a 3 column structure with 3 equal width columns, the markup will be something like:

    0
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:34

      7

      Missing code snippets are now back Justin :)

      0
  • rajasegar

    Sunday, June 24th, 2012 23:41

    2

    Thanks Ranjith for the great post, me too a huge fan of twitter bootstrap i have been using it for months and still a lot to learn…

    -1
  • Simon Hamp

    Sunday, June 24th, 2012 11:55

    1

    Great intro to Bootstrap, Ranjith! I agree that it’s a great way to kick off the design aspect of any bootstrapped projects. Remember, you can always re-skin later, especially that there are some great Bootstrap resources around: WrapBootstrap for premium themes, BootSwatch for free themes…

    I particularly liked your ‘Pitfalls’ section as these are really important things to remember, especially not letting Bootstrap stifle your creativity – one thing we’re hearing more of right now is that a few folks are getting a bit tired of vanilla Bootstrap sites, so don’t be afraid to throw some personality in there!

    I just want to mention for you and any readers, if you want some promotion of your Bootstrap-based sites, apps or tools, submit a free listing on Built With Bootstrap site. Don’t forget to check out the gallery of sites for some inspiration too!

    0
    • Ranjith kumar

      Tuesday, June 26th, 2012 06:35

      8

      Thanks Simon … would love to get our app listed.

      0

Comments are closed.

54.243.23.129 - unknown - unknown - US