With a little help from my [framework] friends…

One of the fundamentals of programming is “don’t repeat yourself” or DRY, focused on “reducing repetition of information.”1While one might think of applying this principle only to the code they are developing themselves, the Open Source software movement is so large and vast, that there is a very good chance that something you are trying to develop has been done before and subsequently shared with the community for usage and further enhancement. As a result rather than starting from scratch, a programming framework, “an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software”2,  can give you a place to start from.

From a front-end development perspective, Bootstrap is one of the most popular frameworks used today and a great place to start building a website design. Originally created by a team at Twitter, Boostrap has since been adopted by an uncountable number of sites, though some prominent implementations include Spotify, NASA, ING, Vevo, Microsoft, and Mongo.

What makes Bootstrap such a viable option is the size and depth of its capabilities, providing CSS, HTML, and basic Javascript/jQuery components. This includes:

  • HTML/CSS
    • default font and typography settings (including styles for headings, body, lists, and formatting other HTML 5 components)
    • table formatting options
    • form objects (input fields, selections, buttons, drop downs, radio and checkmarks) with the ability to add validations and symbolic icons
    • headers and navigation bars, breadcrumbs
    • image helpers to properly size thumbnails
    • standard color combinations across elements
    • progress or alert bars
  • JavaScript
    • pop-over/modal windows
    • drop down navigation menus
    • image carousels
    • etc.

Today, users generally expect that regardless of what type of device they are using to access the website (i.e. laptop, tablet, smartphone), they will have a usable experience and the content will be formatted to the proper screen size (aka viewport) accordingly. This concept, known as responsive design (e.g. responsive to the size of the screen), plays a key-role in Bootstrap’s grid system. Bootstrap’s grid system, using CSS, assumes a page is made up of up to 12 columns and depending on a given viewport, it will automatically make each column a certain width. Bootstrap may wrap columns to new lines as necessary, but provides various css styles that coupled with the implementation of media queries, helps to better control how a page will display on a screen. Previously, a basic table would have been used to set up this kind of layout, however, there was not a great way of testing and knowing how it would display on a specific screen. Bootstrap takes away a lot of this mystery.

Bootstrap’s ease of use can also be attributed to its ability to maintain consistency as it names  different elements, using easily understood semantic conventions throughout. If you want a small button, your styling would include

btn-sm

if you want a large input box, your styling would include

input-group-lg

if you wanted a red progress bar, it would be styled

progress-bar-danger

and if you wanted a red alert bar, it would be styled

alert-danger

The one caveat with using a CSS framework like Bootstrap is that since the framework is easy to use and readily available, if sites do not do additional customization (“selectively changing”) on top of the framework, it can make web sites feel very similar to one another. Occasionally, I’ll be using a website and question “is this site using Bootstrap?” and sure enough if I look at the source code, I see it referencing a bootstrap.css file.

There are many other CSS frameworks available, including Zurb Foundation and YAML, among many others. Some may include a standard for all front-end components (CSS, HTML, JS) like Bootstrap does, while others may focus on a specific aspect such as a grid system. Bootstrap’s website (getbootstrap.com) has a lot of great resources to get you started, including CSS code required to implement the framework within an existing site, either by referencing files on your local server or on one of their CDN partner hosts, as well as sample templates to get a new website going from scratch.

Bootstrap and other frameworks in general, offer a lot of capability out-of-the-box. But to make your site “personal”, you will likely need to augment it by building on top of the framework or including additional plugins or styles. It will take time and patience but in the end, your site will be mobile-friendly and responsive, very usable and easy to maintain, and built on top of one of the most popular front-end frameworks used by individuals and corporations alike.

For an example of a Bootstrap’d website see my Entertainment Management System.

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *

About This Blog

This blog will serve as my outlet to share my thoughts and learnings as I dedicate myself to becoming a full-stack web developer...something too long in the making.

What I’ve Been Learning

+ Ruby
+ Ruby on Rails
+ HTML/CSS
+ JavaScript
+ jQuery
+ AngularJS

Archive