PSD to HTML conversion using Bootstrap Responsive framework
When Twitter was expanding, Mark Otto and Jacob Thornton realized the need for a standardized framework and tools that would facilitate consistency and ease of development in the expansion of the Twitter website. The project took a life of its own and we got an HTML and CSS toolkit, named Bootstrap or formerly Twitter Bootstrap, which made the process of web development a little easier. Bootstrap is currently used by many different types of web sites, including NASA and MSNBC, and is currently one of the most popular open source projects on GitHub.
To convert a PSD image design to a responsive HTML website, the most important step is to write the style CSS that ultimately dictates whether the site is responsive or not. Bootstrap helps in writing this CSS code. To be more precise- it’s the CSS code that could be used in creating a responsive website.?
Now, the question comes what exactly is bootstrap and how can we use it. To explain it in a single line- ‘Bootstrap is a collection of tools and HTML/CSS templates that could be used to build a website’. And since Bootstrap version 2.0 (the latest version of bootstrap), has support for responsive web development it can be used to build a responsive website. As for what it can be used for, well it can develop any type of website and could be used with any type of content management system (CMS) that has support of integrating custom CSS, such as WordPress, Joomla, Drupal etc. The best thing about this framework is that it is supported by every major web browser such as Chrome, Firefox, Internet Explorer, etc.
What is a responsive website?
A responsive website provides optimal viewing experience to a website even when viewed through different screen sizes. Here, optimal viewing means accessing website content with minimum to no left to right scrolling and good legibility of text, images, and other media. Therefore, for optimal viewing the website must automatically adjust its rendering width, images sizes, and text size according to viewing screen size.
How responsive websites are generally made?
To make a mobile compatible site, web developers generally use two major techniques. One is by using an altogether separate domain such as m.example.com or example.com/mobile, and redirecting the mobile traffic to this domain. Of course this domain contains the mobile optimized version of the site. This approach, though gets the job done, has a number of disadvantages related to search engine optimization of a site such as duplicate content, promotion of two separate domains, and diluting of link juice.
The other way is by creating a responsive website cleverly using CSS style sheets to render a different styled version of a website according to the screen size. The size of the screen is detected through Media Queries. The CSS used in this screen size loads a rendering style that most fits the screen. The only disadvantage is that the latest versions of CSS are not supported by old browsers such as Internet Explorer 6 thus they cannot display such CSS sites optimally. But this is also changing as more and more people are shifting to the newer versions of browsers.
Bootstrap: Making life easier for web developers
Bootstrap is a pre built CSS framework that could be used by web developers to create websites of any type. The framework provides tools that the developers can call from website’s HTML. Bootstrap has the basic style definition of all the major HTML components that you can use in your website such as alerts, modals, tool-tips, button dropdowns, dropdowns, button groups, navbar, navigational tabs, pills, lists, labels, page headers and hero unit, thumbnails, progress bars, accordion, carousel, and typeahead.
Bootstrap is based upon LESS, a dynamic style sheet language that is considered to be an extension of CSS. As such- LESS is considered to be way faster than other extensions such as SASS. And since it is written in JavaScript, it is easier to understand by a majority of web developers as most are well versed in JavaScript.
Though some professional web developers prefer to create custom code as much as possible, many uses Bootstrap CSS files to create their websites. The only disadvantage of Bootstrap is that it does not fully support HTML5 and is not completely built in CSS3. This is because only the latest browsers fully support these two technologies and most web users have not updated to these browser versions. So, to make a site completely compatible with most of the web browsers, some sacrifices have to be made.
Getting started
Let’s get started with bootstrap now. But before we proceed to bootstrap it is important to note that no matter how easy using bootstrap may sound, you can never harness its full potential unless you have a complete idea of CSS and HTML. Also contrary to the popular belief, programming languages, or more specifically CSS and HTML programming languages, are not that difficult so you can easily master CSS and HTML in 3-4 months. Here’s a list of some great resources through which you can learn CSS and HTML on Internet.
For using Bootstrap first download the compiled version from http://twitter.github.com/bootstrap/index.html. The site has the facility to allow you to customize the Bootstrap framework according to your needs. This is the miniaturized and compiled version and therefore you can get started automatically with it. It does not include any source files. If you wish to download the source, visit here {https://github.com/twitter/bootstrap/zipball/master}. However to use it you have to first compile it.
Once you have downloaded the zip file extract it in a folder. Now you will have to initialize Bootstrap in the head section and the associated JavaScript in the body section
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
…
</head>
<body>
<script src=”http://code.jquery.com/jquery.js”></script>
<script src=”js/bootstrap.min.js”></script>
…
</body>
A thing to note here is that you don’t need to call JavaScript here as all the major components will work without it. But some functions such as alert and dropdown menus and buttons use JavaScript to give stylized animations and functions.
Bootstrap Grid
Bootstrap comes with a 12 column grid and is available in both fixed and fluid grids. For those who don’t know, fixed grids use exact column width in pixels whereas fluid grids uses relative lengths that is represented in percentages.
To make the website responsive, Bootstrap uses the fliud grid system that modifies the width of the column in the grid and resizes the heading and the text accordingly. Similarly the fluid grid also resizes the images as image sizes are also entered in percentages. In addition to make a responsive site you have to use stack elements instead of float. Though you can make a responsive site using fixed width, but it is not generally preferred.
Learn Bootstrap
Now as we said earlier, you cannot understand bootstrap completely until you have learned CSS and HTML. For those who have knowledge of these two languages, following are some great resources for learning Bootstrap and making a responsive websites.
- The official GitHub site of Bootstrap :- This site is the best source of learning Bootstrap and all its components. It has detailed examples of every feature of the framework and how it can be used.
- W3resources:-is really a comprehensive tutorial about bootstrap. It includes all there is to know about the framework including its working, its usage, and examples, along with its integration with JavaScript plugins and their usage.
- Webdesign.TutsPlus:- It has a complete video tutorial series about Bootstrap. It contained detailed videos about uses of every major component of the framework.
- One Extra Pixel:- This tutorial is for those who are proficient in CSS and HTML and are just gathering the basic idea of Bootstrap without delving much into the framework.
JavaScript and Bootstrap
Bootstrap comes with JavaScript files that have supported different components of the bootstrap framework and thus extends the abilities of these components. The best part is that all the plugins come in a single file and you can access all the plugins through simple mark API without writing a single line of JavaScript; though you can turn off this feature. The main components that use JavaScript in Bootstrap are affix, alerts, buttons, carousel, collapse, dropdowns, modal, scrollspy, popover, tab, tooltip, transitions, and typeahead.
Conclusion
Bootstrap makes life easier for programmers who want to create responsive websites. But they are not the only framework out there. There are other Responsive CSS frameworks such as Foundation, Intuit.css, LESS Framework 4, etc.In addition it is important to note that Bootstrap is an open source project that is constantly evolving and changing. So, it may not have a complete support for HTML5 and CSS3 at present, it may have in the future.
