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?

MySpace

As you can imagine, front-end dev frameworks have come a long way since then. The development team at DT prefers using Bootstrap (by twitter) as our go-to CSS and JS framework on a majority of our projects. Bootstrap is a large collection of pre-styled components and Javascript interactions that you can include in your project (it really beats writing everything from scratch) to get a quick start.

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.

responsive-grid-v02

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 and tooltips are two such components you’re used to seeing in their ‘strapped state.  You even probably argue that for the sake of using something familiar, you might not even *want* to customize these UX elements too much. So in that case, a designer can just opt for a good old fashioned Bootstrap standby. And since Bootstrap has already done the heavy building, a developer can include and initialize this default modal with just a few lines of code. No styling and no custom javascript required.

Modals with Bootstrap

modal5 (1)

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.

Bootstrap Makes Tooltips Easy

Hey! Look it’s code, and SublimeText makes it gorgeous.

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:

Unstyled Form Browser Default

So you throw on a couple .form-group classes, specify a sizing class and instantly your forms are sitting pretty. It’s so much easier than dealing with the styling of each input, label, radio button and checkbox by hand. Also included: Javascript to validate your form and provide alerts if you’re not using a proper email address or something like that. Bootstrap provides 800 lines of CSS code devoted to forms alone, so they have you covered in this regard.

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.”

 benefits of bootstrap

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.

Behind the Design View Reading List

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?

Comments
  • As a designer, I believe it’s vital to understand the medium I’m designing with. During the 90’s I designed a lot for print, which meant getting to know how paper fibers reacted to ink, foil and varnish, among a host of other constraints. Designing for the digital experience requires a solid understanding of digital constraints. Working with something like Bootstrap gives the designer a list of known constraints, which can be liberating, assuming it is a good fit for the project. Known constraints, as you mentioned, are critical for creating a shared vocabulary – they’re also important for knowing when and where to push the boundaries.

    • Bethany Brown

      Absolutely Kedron, I totally agree. Well said!

  • great intro post to Bootstrap

    • Bethany Brown

      Thanks Matt! Glad it was useful.

  • My very own site has the CSS reset from Meyer, LOL. How about that… I need to play with these frameworks

    • Bethany Brown

      Yeah! I’d encourage you give it a try, might prove to be really helpful.

  • This was seriously so helpful! It conceptualized all of the confusing concepts we covered in my 300-level, semester-long, design course. My instructor was super action-oriented and didn’t take the time to explain how our actions and the tools we use contribute to the design process. Thanks for putting things into perspective so I know how to think about frameworks!

    • That’s great AnnMarie! Happy to help clear up confusion for you 🙂