So it’s 2015, and I’m not here to tell you that front-end development frameworks are anything new. If you’re a developer, I’m sure you’ve used one by now, and if you’re a designer I’m sure you’ve heard the word ”Bootstrap” thrown around. You’ve seen designing on a grid come into style, debated out of style, and then come back again.
I’m with you. I think my first encounter with one could be traced back to CSS “Reset” stylesheets. There’s a few different versions, but they all aim to the accomplish the same thing: Override some of the default styles that different browsers include, styles which could interfere with your own. Each browser sets things up differently, so a CSS reset file levels the playing field and allows you to start fresh with your own styles. So already you’re using a small, but powerful CSS framework. Eric Meyer’s Reset can be traced back to 2007. Eight years ago… do you even know how long that is in internet years?
With thousands of lines of code “built-in”, Bootstrap is an extremely powerful library that can be given a great deal of soul through customizations. And there are a seemingly endless number of other front-end frameworks in the same vein, Foundation, Blueprint, Gumby and Ink to name a few. But, since we use Bootstrap here, I’m going to keep referring to it throughout this article.
Bootstrap works “on a grid” that provides structure which is essential for responsive design. It provides default behaviors… the grid helps us understand how an interface will appear on small (and large) devices without customizations. This helps our team optimize our design concepts based on the objective at hand.
Bootstrap is more than just a grid
The grid system gives you a great jumping off point for any responsive design but there are also a number of smaller components that Bootstrap includes that a designer may need to use in a project, but don’t have strong opinions on.
Modals with Bootstrap
This modal design is something a user is used to seeing on the web .
Tooltips with Bootstrap
Tooltips are even easier. All you have to do to is include a data attribute that toggles the tooltip, and another that specifies the placement. The title you define is the text of the tooltip.
Tada! Pretty little tooltip friend.
Forms with Bootstrap
But my favorite set of styles Bootstrap provides are the ones for forms. Have you seen a bare bones naked form lately? They’re disgusting. You do not want to let these guys leave the house looking like this:
How Bootstrap fits into the DT design process
We like to pay attention to detail and microinteractions. So Bootstrap gives us a chance to prototype and actively contribute to the design process. In the same way a developer customizes a technical framework with, a designer familiar with Bootstrap’s components can follow a similar process. Brian Stieler, one of our awesome UX Designers said, “Web apps are complex beasts! Bootstrap provides default answers to many tough questions. When both designer and developer are aware of the possibilities our creative energies are focused on ways to make the experience better.”
We’re all about reducing friction here at DT, and with a little bit of shared understanding, a framework can be more than just a quick start for developers, but a tool to bridge the gap that sometimes exists between the role of a designer and the task of a developer.
Remember what I said in the beginning about CSS Reset stylesheets leveling the playing field for browsers? Think of using a front-end development framework in the same way. If two team members both understand what a tool like Bootstrap does, then they immediately share a common method of communication that they can reference when bringing a design to life. That keeps us aligned, and more productive.
Let’s start a conversation!
As a designer: do you know much about front-end development frameworks?
As a developer: do you find it helpful when a designer is familiar with the particular one you’re using?