Bootstrap

As I got into building my website, I noticed a problem. At home when I was using my desktop at home, the resolution was different to that of my laptop. Hence, when I'd import the project to my laptop, the boxes and objects would mess up.

Before:

After

The font size, boxes and image were not proportionate to the window size

After looking into this issue, I found out that there was this free CSS, Javascript plugin called Bootstrap that solved this issue. By including the files into my project and assigning main divs certain class names, Bootstrap will automatically re-scale the objects when the window size is modified.


Pros

• Great standardised platform with all the basic styles and components needed (layout grid, panels, tables, buttons, modals, form styles, etc) to build on which saves a lot of time.
• Support for all major browsers and fixes CSS compatibility issues.
• Consistent UI that looks good out of the box.
• Designed with responsive structures and styles for mobile devices.
• Icons included (now as a font file for infinite scaling).
• Good documentation and community support.
• Lots of free and professional templates, themes and plugins.

Cons

• Javascript is tied to jQuery (it's by the far the most common Javascript library though and the plugins can just as easily be left unused).
• Can require lots of overriding styles or rewriting their files if you have lots of customisation or want to deviate from Bootstrap structure.
• Websites can start to look the same if you don't customise the styles and colours much.

Learning bootstrap wasn't too hard. Basically, Bootstrap would split the page into 12 columns. All I had to do was add the class "col-md-number" (number between 1 -12) to an element. Once that was done the element would become responsive.

Remodelled Page 2

Despite not looking very aesthetically pleasing, it was responsive.