Benefits of the Bootstrap Framework

I started playing around with Bootstrap in 2015 when I didn’t understand what Bootstrap was or why a web designer would build websites using Bootstrap. Since then, I have built 6 Bootstrap sites and can now give five broad reasons to choose Bootstrap as a theme/framework for building a website.

Bootstrap is more than a web site theme with a unique set of styles, fonts, and page templates. Bootstrap is a framework, which could be considered a super theme (technically a superset of HTML, CSS, and Javascript technologies). Many Bootstrap developers share and contribute to Bootstrap making it more than a theme but an entire website design framework. The Bootstrap framework is an open source (read: public) project that many developers and designers have contributed to mostly via the Github social network.

Five Benefits of Bootstrap

  1. speed of development
  2. responsiveness
  3. consistency
  4. customizable
  5. support
Patagonia only needs one online version of their catalog–a Bootstrap website and no more expensive app(s) development

The first benefit of Bootstrap is speed of web site development. As a web designer and/or programmer, you don’t code to reinvent the wheel. Hundreds of developers have already contributed to the Bootstrap code base and all these developers share their chunks of code or design components. A web designer initially configures the web features desired, and then, the configured Bootstrap files are downloaded for initial site testing. Each configured Bootstrap site can be a unique design and each could be considered a Bootstrap theme. With all the Bootstrap resources available, the developer can quickly start creating a site structure without having to code individual site components.

The second benefit of Bootstrap is site responsiveness. Bootstrap is a mobile-first theme meaning it is designed for small smartphone screens. Bootstrap has a grid layout which scales nicely for wider screens. Bootstrap sites display correctly for almost any internet device available. As a developer, you don’t need to do as much device testing as in the past and this saves the developer even more time.

The third benefit of Bootstrap is consistency. Your Bootstrap site could be handed over to another Bootstrap experienced developer, and the web interface would remain consistent. For example, the menubar would function the same no matter which Bootstrap developer had last updated it. This consistency also relates to the many different web browsers available. The Bootstrap site responds and displays consistently when tested with most modern browsers.

The fourth benefit of Bootstrap is that it is easy to customize. The Bootstrap developer can choose any website components (buttons, sliders, date picker, popups, etc) to create the web experience that the client desires. With lots of Bootstrap components to choose from, the developer can create a unique customized theme.

The fifth benefit of Bootstrap is support. Github has over 600 developers sharing code and ideas on Bootstrap. The framework is always evolving and improving. A standard WordPress theme might be built and tested by a single developer or small team, but the worldwide community of Bootstrap developers would result in a superior theme.

When you combine the tools of faster development, device responsiveness, browser consistency, easy customization, and a good network of online support, the Bootstrap framework offers many time-saving advantages for web developers.

Some Bootstrap sites:

**Bootstrap sites I have built

Kayaking Colombia

Colombia is a mix of mountains and jungles which creates a rich area of bio-diversity. An invitation to a wedding gave me the opportunity to visit this South American country in February of 2016. The photos are from around Cartagena (wedding site), Tayrona National Park on the Caribbean coast, and kayaking in the Antioquia region east of Medellin.

I didn’t have a contact for kayaking in Columbia but guidebooks suggested visiting the town of San Gil, as it is a major outdoor sports area. Later, I came across Expedition Colombia’s website and contacted Jules Domine based out of Medellin. I asked him if he could pick us up at the Medellin airport (with boating gear) and go boating for three days in the Antioquia region east of Medellin. After a warmup run on Rio Cocorna, we boated a two day run on the Rio Samana.  Jules is an excellent boater and guide. I highly recommend his services including his fluent Spanish, English, and French. He has done the Samana many times and knows the locals who live and gold mine along the river.

Rio Samana (Norte) is a 28 mile, big water, pool drop run. It was first boated about 4 years ago (2012) and can be rafted as well. The trip usually requires two days and overnight gear. There are about 30 class 3-4 pool drop rapids and another 5 drops that would be more like class 4-4+. Beware that the Rio Samana can rise very quickly from upstream rain. At the end of the run marked by hydro release tubes, there is a class 5 gorge with an additional 5km of whitewater down to the Puerto Garzo bridge. If the hydro tubes are releasing there could be quite a bit of additional water going down the gorge. The putin is a bridge on Highway 60. There are no facilities at the putin but further down the highway at Rio Claro, there is a rafting-canyoneering resort that has a hotel and dining facilities. The take out is at bridge at a small town of Puerto Garzo with a restaurant. In the near future the Rio Samana will be damned by a hydro project.

After years of civil war and kidnapping, traveling in Columbia has improved. The interior regions and major cities of the country seem quite safe. There are some border areas that the government doesn’t seem to have total control over various groups that are still unhappy with the Bogota government. During our visit one remote region had protestors handing out propaganda literature but no violence. There are also issues along the Venezuela border with Columbian refugees being kicked out of a deteriorating Venezuela. Expect military presence in tourist locations, highway roadblocks, and at all major bridges. We found the Columbian people to be very courteous and accomodating.

Dengue, Zika, and Chikungunya are all found in Columbia. Sleep in screened rooms or hammocks with screened tops. We had RAID electric mosquito repellent dispensers which you can buy at grocery stores or pharmacies. You plug the dispenser into an electric outlet in your hotel room. Fewer mosquitoes are found in cities located in the mountains.

We did have GI problems in Colombia probably because we ate too much greasy street food. If you’re not too adventuresome, you will probably be fine. Bottled water is found everywhere.

Bootstrap Filtered Photo Gallery

Photos tagged “desert” and red filter buttons

This spring I embarked on a new photo gallery. I wanted to streamline and consolidate getting my photos and videos online. I didn’t want to have to create posts or even photo galleries. I wanted to use WordPress’ Media Library Uploader, tag the photo, and be done. This post gives an overview of how I created my filtered photo gallery.

The default Media Library doesn’t provide for photo tagging but a little code added to the functions file will create a tag field for each photo. Photos with the same tag can be viewed or “filtered” as a group on my thumbnails template page creating a filtered gallery page.

Filtered Photos Theme Option, add photo tags here for Photo Page

I realized that it might be nice to control which tagged photos would be included on the thumbnails page, so I created a photos theme option panel to control which groups of tagged photos would be presented on my thumbnails page. Each photo tag on the option panel, displays the tag as a tag filter button. Clicking on these filter buttons displays only photos with the same tag. So viewers can easily filter through a large number of thumbnails which on my site I grouped/tagged by sports: skiing, climbing, kayaking, etc. If I want retire a group of images from my thumbnail page, I just remove the tag name from the Photos Option Panel. There is also a theme option to control the display of captions underneath each image.

Tag and video URL fields added to image attachment settings
Tag and video URL fields added to image attachment settings

If any thumbnail image is clicked from the thumbnails page, the viewer see an overlay hover description (image caption text) and view button. Clicking this button moves to an image slider page (my other template page). This page has the Bootstrap carousel which allows full-size viewing of the images with the same tag. Because the carousel is Bootstrapped, the images are always displayed responsively in all devices.

To consolidate all my media, I also added videos to my filtered gallery. I have a Vimeo Plus account, so my videos are streamed from Vimeo’s video servers. In order to include videos within my gallery, I needed to add a second input field to my image attachment settings where I store the Vimeo URL of each video. The uploading process is slightly different for videos: upload any pic for my video’s thumbnail image, use the tag “video”, and included the embed URL to the video (Vimeo or You Tube). Any video thumbnail tagged “video” will be routed to the video player instead of the photo carousel. This allows photos and videos to be organized together and I no longer need any video plugins installed into my WordPress site.

My current filtered gallery displays about 50 photos and 12 videos all together on one webpage. The page’s performance seems good for this much media (see Pingdom results). I wanted to have retina/4k quality photos, so I am using Jetpack’s Photon CDN (Content Delivery Network) to deliver correctly sized images per the requesting device, including devices with retina/4k screens.

Gallery thumbnail page with Pingdom performance testing
Gallery thumbnail page with Pingdom performance testing

I learned a lot from this project. Maybe the next step for me would be to package everything into a WordPress plugin. I am mostly happy to be able to upload my trip pics quickly, and know they will display responsively on all internet devices.