layout: post title: “Bootstrap: Making front-end development easier since 1842 (note to self: check dates)” date: 2016-01-12 07:41:35 -0500 comments: true
Throughout the first six weeks I’ve spent in the Flatiron School’s Web Development immersive course, we’ve largely stuck to the dark and bewildering world of the back-end, wading waist deep into the nitty-gritty muck and grime of SQL databases and Model View Controller designs. There’s been a lot of plain code on plain screens.
But you know what? Sometimes it’s nice to feel pretty. So today I’m going to talk about front-end frameworks.
In the same way that Rails is a framework of helpful tools for developing web-applications, front-end frameworks bring together a library of CSS, HTML and JavaScript tricks and techniques to help make the process of front-end design easier. Rather than creating default layouts and aesthetics from the ground up, they provide a jumping off point that saves you from doing spending a ton of time making sure that your <div> containers aren’t bonkers. In short, they’re pretty neat.
So let’s look at one in particular: Bootstrap.
Bootstrap is the most popular front-end framework in use today, and has been forked over 38,000 times on Github. It began life as ‘Twitter Blueprint’, an internal project at Twitter aimed at ensuring coherence of design, and to reduce maintenance burden. The project soon escalated beyond its initial purpose as an internal tool, and in 2011 was released as an open source project. Subsequent versions (currently Version 3 with Version 4 in beta) introduced a focus on mobile design, and a flat, minimalist UI design.
At its core, like any framework, Bootstrap is a toolkit for you to use for your own projects. It can be downloaded as CSS and JS files that can be linked to in your HTML files like any other stylesheet or script. In fact, to reduce filesize, you can download customised versions of these files that contain only the features your want to use.
The Bootstrap provides an extensive overview of its components, and provides example code that can be easily copied into your projects to get its features working.
But what are these features? Just what exactly is Bootstrap bringing to the table. In the next section, I’ll share 5 of things I find lovely about Bootstrap.
Take a look at any site on the internet, and you are almost literally guaranteed to see the same thing: boxes. Take this very blog for example. All of the features of the site, like the header, blog articles, excerpts, and footer, are made up of different sized and shaped rectangles. This is called grid-based design, and is a pretty ubiquitous principle for web-design, some noteworthy examples not withstand cough cough the surprisingly extant Space Jam website cough cough.
A pre-built grid system facilitates quicker front-end design. Bootstrap provides a pre-built system for easily dividing your page into rows and columns. At its core, the screen is divided into 12 columns, labelled in your HTML with the .col class. The number at the end of your .col indicates the width of the particular column you are using, from 1 to 12. In the below screenshot, you can see how different column widths can be placed together. Depending on the size of the browser or screen, these columns become stackable - they automatically drop down to the row below, rather than forcing the user to scroll to the right.
Moreover, the .col class can also be divided altered using the -xs, -sm, -md or -lg modifier. These correspond to media queries, so that we can assign different types of layouts depending upon the device being used.
Your rows and columns must be wrapped within a .container or .container-fluid class. The standard container is a responsive and fixed width container, while the ‘fluid’ version is full-width and spans the width of your browswer or device screen.
Using this system, you can quickly create a neatly organised site that acts responsively across different sized devices and viewports. In many ways, this is the biggest reason to use a front-end framwork - not just Bootstrap, but other simpler frameworks that focus only on providing grid systems.
As a compliment to the grid-system, Bootstrap lets you determine which HTML elements are visible or invisible, depending upon the viewport size. By adding the .visible or .hidden class with a particular size (eg. -xs or -sm), you can specifically choose what the user will see.
Link to glyphicons on Bootstrap website
Link to components on the Bootstrap website
Link to jQuery plugins on the Bootstrap website
I used Bootstrap for the design of my Sinatra project ‘breddit’, precisely because it provided a quick way to organise the page layout into rows and columns. However, when tasked with porting the project to Rails, I had some problems getting the project o recognise my bootstrap files.
Luckily, as we’ve discovered with a great many things, there’s a gem for that. In your Gemfile, include the following:
1 2 3 4 5 6 7 8 9 10 | |
Next, we need to import the CSS assets into our Bootstrap CSS file. As Bootstrap uses different versions of CSS (LESS and SASS), we rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.sass, and then add the following code:
1 2 3 4 | |
To import the Javascript components, go to your app/assets/javascripts/application.js and add the following:
1 2 3 4 5 6 7 8 9 | |
Congratulations! You’re off to the races with Bootstrap!