Sign in with Facebook
Surendra Mohan's Reviews > Twitter Bootstrap Web Development How-To
by
Twitter Bootstrap Web Development How-To written by David Cochran an Associate Professor of Communication at Oklahoma Wesleyan University. He alongwith his students is fond of envisioning and producing exciting projects, with well-built standards-compliant websites playing a central role in them. He frequently publishes online tutorials to share insights gained in the course of those projects.
'Twitter Bootstrap Web Development How-To' is a 13 essential and good-to-know topics book. It not only gives us a walk through to Twitter Bootstrap, instead it also covers varied tricks to apply during their respective situations.
The author has explained each and every point in such a way that it can grab interest of the readers / developers to major extent, irrespective of whether he/she is a newbie to web development or an experienced professional.
To justify my statements, I would like to pen-down my views topic wise.
Downloading and setting up:
This section involves steps to download the code base and how to install your basic twitter bootstrap site.
Each important step has been demonstrated by screengrabs for better understanding of the readers / developers. In addition to this, debugging tips have been provided by the author for the bugs / errors which are prone to occur during the installation / setup process.
Headings, links, and buttons:
This section includes how, where and what to write to code the headings, linking and apply buttons of different types, color and sizes.
Headings - This sub-topic discusses in details on what are the different types of heading tags alongwith their significance. This will help the developers to choose their heading tags in one shot, meeting their or their customers' requirements.
Buttons - This sub-topic describes the different types of CSS class available to apply a button (with varied significances and usage) onto their Twitter Bootstrap web portal, demonstrated with examples including the screengrab of the end result. It also explains the proper way to debug incase the developer doesn't get the expected result.
A few of the CSS classes discussed on Page 13 of the book are as follows and for the remaining classes, the author has provided the URL to the corresponding documentation (Page 14).
- Colors
-- btn-primary
-- btn-info
-- btn-success
-- btn-warning
-- btn-danger
-- btn-inverse
- Sizes
-- btn-large
-- btn-small
-- btn-mini
Linking - This sub-topic has been demonstrated with the help of a couple of sample codes
and which explains how to create / apply a button and link it to their respective URLs.Conquering the layout:
It provides solutions to the persistent issues usually faced in web design, ie. cross browser compatibility issues, non-responsiveness, etc.
Twitter Bootstrap features a variation on the popular 960 grid system, which offers a simpler syntax and a responsive layout, adjusting itself on devices of varied sizes from desktop computers to tablets and handheld devices, un-affecting it's layout.
It also deals with customizing the layout just by using the relevant tag(s) alongwith their significance of their usage.
Creating a standard sub-page:
This topic concentrates on designing a standard layout for the sub-pages. It also talks about how to customize the layout, meeting the customers' requirements, defining varies widths of the columns, usage of images and placeholders, etc.
A couple of methods have been discussed to add a large introductory image to the main (broad) column of the page.
First, by using image from the local system: [image error]
Other, by using placeholder.it image: 
Creating a portfolio page:
In this section, the author has demonstrated how to create a portfolio page, mainly concentrating on the usage of images. Since using placeholder.it is more time saving, he has used this methodology, however recommended the readers / developers to try out both the options to it's implementation.
The CSS classes to get the desired layout of the portfolio page, has been discussed in details (demonstrated with a complex example), especially
Each and every piece of code and value has been explained in depth so as to have proper understanding to the readers / developers, guiding where and what to use.
Creating a products page:
How to create a basic product page with columns and rows for products, prices and their other features, has been discussed in this section. To do so, the author has demonstrated with an example wherein use of Table Class plays a vital role. The book has shared lot more tips. For instance, 'In the page, we'll use a narrow left-hand sidebar for an introduction to our table. Update the column div class="span8" by changing the span8 to span3' (Page 26) and how to implement the table classes. For instance, using
Customizing the navbar:
This section deals with how to organize and customize the navigation bar of our twitter bootstrap based website. The use of CSS class navbar alongwith their associate properties plays a vital role in accomplishing this feature. For instance,
Use of nested DIVs, lists and links; which are very important concepts; have been demonstrated by an example in a crystal-clear manner so as to seek readers' / developers' interests exploring it.
Making it responsive:
This section talks about how to make your website more responsive regardless of the size of device you are using (Tablets, laptops, PC, etc.). Since version 2.0 of Twitter Bootstrap, the navigation bar cleverly shrinks itself adjusting with the size of the device, however, doing so, it provides a quick access to the website via a single button which intern is a drop-down functionality which expands to display all the menu items in the navigation bar. Since, this drop down functionality is not available, the website needs to be fine-tuned using Javascript plugins to enable this drop down functionality and make the layout more responsive.
Adding drop-down lists:
In the section, the author talks about the implementation of same drop-down list which have been discussed in the previous recipe 'Making it responsive'. Since the drop-down list is ready, this section deals with adding the markup to it. The author has demostrated this implementation with an example wherein he has used a couple of CSS classes which facilitates the activity.
For instance; in the code base Your Account , a special class and a data-attribute has been added to turn this link into a drop-down toggle.
Alongwith the available recipe provided by Twitter Bootstrap, the author has provided the link to it's documentation, which makes the topic more appealing and reader / developer friendly.
Using tabs for switching content:
This section discusses and demonstrates on how to implement tabbed content switcher using javascript, taking the product page as the playground. The best part of this section is that each and every activity / functionality has been achieved using the available classes, making the development activity a time and effort saver.
In addition to the above, author has shared the link to it's documentation so that the readers / developers can explore further and play-around with all possibilities.
Creating a homepage carousel:
This section deals with adding a carousel plugin based carousel on the home page so as to make the page more attractive and appealing to the visitors. Author has demonstrated it's implementation with an example, adding some tips-and-tricks as a flavor to it using carousel specific classes.
For instance; in the code piece below; the Bootstrap's carousel plugin gets initiated, reflecting the magic on the home page.
Optimizing and customizing:
This section deals with how to optimize and customize your Twitter Bootstrap based website to achieve better performance in terms of load-time and have your custom look-and-feel.
To optimize the website, the book emphasizes more on the following 2 steps which makes a lot difference to the load-time:
1. Trimming down our CSS and JavaScript files by removing unused code
2. Using the minified versions of the CSS and JavaScript files
To do so, author has explained using an example; demonstrating the steps to follow, wherein you can un-check the unwanted CSS modules and features. Similar steps have been discussed for jQuery / Javascript plugin so as to have a light-weight code.
Uploading, testing, and launching:
This section discusses about how to upload the code base, test it appropriately and finally ready to celebrate for the launch! Even though, Bootstrap provides robust capability to have bug free code and to conquer cross-browser compatibility issues, it is always suggested to test the build before it is launched.
The book emphasizes on creating a robot.txt file with the content as follows to instruct the search engines not to pay attention to the test site.
User-agent: *
Disallow: /
The book explains each and every steps that need to be followed while uploading the build in a systematic manner.
For testing the test site efficiently, the author has provided a couple of references to freely available tools which would make the work more easier and reduce / eradicate overhead to testing alongwith the guidelines to use those testing tools.
Reading the book, I interpret that it is Easy to read, valuable tips-and-tricks have been shared, way to debug and solutions to possible errors have been provided, impressive Layout has been included and the best part is that the topics have been demonstrated by appropriate examples making the book more readable and understandable to the readers / developers. Moreover, 'Appendix' has been included which is a store for Bootstrap resources reference URLs for documentation, blogs, etc.
Conclusion:
'Twitter Bootstrap Web Development How-To' is a must for any serious developer or site builder. It will definitely serve as a handy resource. It will teach you how to build a robust website with appealing layout just in short duration.
Disclaimer:
I volunteered to review this book and received a free copy from Packt Publishing.
You may click here to grab a copy of the book for your shopping cart.
This review has been cross-posted at My Personal site
Twitter Bootstrap Web Development How-To
