Bootstrap Triptych

The Bootstrap Triptych was my first experience designing responsive sites using the Bootstrap front-end framework.

The triptych consisted of three separate pages displaying roughly the same content. They varied in their design and their implementation of bootstrap.

Panel One

I coded the first panel by hand using only the HTML and CSS skills I accrued in the first few months of class and some basic Bootstrap tools including a basic top hero section, a collapsable navigation menu, and table using Bootstrap’s grid system. The design of the page was extremely basic and provided a base I could build on for the other two panels.

My goal for this panel was to figure out how to use Bootstrap to build page elements. My main struggle was trying to build the table at the bottom of the page. It took me a while to figure out Bootstrap’s grid system, but eventually I was able to get it to look how I wanted minus any fancy visuals.

Panel Two

I created the second panel utilizng a bootstrap theme. The visuals on this panel came completely from the theme, using no custom css.

This was my first time working with a theme, and it forced me to get used to working with someone else’s code. This was frustrating at times as the theme creator’s solutions to certain problems were really different to my own, but it also gave me some insight into some unfamiliar design philosophy.

Panel Three

This panel is the final version of what I wanted the page to look like. I used the same bootstrap theme that I used for the second panel, but for this one I also added my own custom css to get the fonts and colors to look exactly how I wanted them.

On this page I really concentrated on making sure that the page and all of its elements were properly responsive. I went through and made a few tweaks to ensure that each section looked nice on mobile as well as desktop.
By the end of this project I felt that I had reached a level of competency with Bootstrap. This served as my introduction to front-end frameworks in general and gave me an idea of how they can be useful. It also intorduced me to the concept of mobile-first design philosophy and provided me with the tools to create responsive sites that are visually appealing across multiple devices.