Bootstrap for Designers

Are you a seasoned designer finding yourself tasked with designing for the Bootstrap grid, but aren’t sure where to start? Do you find yourself limited by developers forcing their preferred front-end framework down the throat of your beautiful designs? Is your design CV riddled with print, but you want to learn to design for the web?

These are questions based on common issues we hear from creative/branding firms, freelance designers, and many others. The goal of this entry is to give you some valuable starting points on the Bootstrap 3 framework and show you how to walk in unison with today’s modern developers.

Bootstrap is easy to learn and holds no limits to your creativity! Their website states “Designed for everyone, everywhere”, and they mean it.

What is Bootstrap?

Bootstrap is a powerful, mobile-first, responsive, front-end framework for building websites. It’s built using the holy trinity of web development: CSS, HTML, and JavaScript.

As of this writing, Bootstrap is in version 3.3.4 with version 4.0 on the way.

Why Developers Love Bootstrap

Developers and designers think very differently, but I don’t think it’s a waste of time for you to understand why developers love Bootstrap. This will help you communicate with them and understand some of the concepts that they hold near and dear.

• It’s easy to use! Getting started with Bootstrap is a pretty quick and easy process. And it’s flexible: you can use it with Less or CSS, and even Sass (if you download the Sass version).
• The Grid. Bootstrap uses a 12-column responsive grid. It even supports nested and offset elements. The grid can be kept responsive, or you can easily change it to a fixed layout.
• Ready-made components. Bootstrap has so many ready-made components and resources available. It can significantly speed up your development process. We use it to quickly prototype an idea in the browser without having to bother the visual design experts. We do this by making use of the extremely handy base styles.
• Base styles. Bootstrap comes with base styles for a ton of HTML elements you’re going to be using anyway. It includes styles for typography, forms, images, and much more. Pre-styled components for dropdowns, nav bars, alerts, and many others come built in to Bootstrap. It so easy!
• Modular Javascript. As developers we like to keep thing minified to maximize page load times. This means don’t go crazy with a different jQuery library to take care of every feature in an app/website. The JavaScript components built in to Bootstrap can be added or removed at will, making it quick and lightweight to add functionality. It makes it easy to manipulate things like modal windows, tooltips, alerts, and more. We can skip writing scripts all together.
• Plays well with others. Bootstrap can also be integrated with a variety of other frameworks and platforms, on both new sites and existing ones. You can even use just specific elements of Bootstrap alongside your existing CSS.
• Lastly, it’s DRY. That’s Do not Repeat Yourself …meaning don’t write the same crappy code over and over to get something to work. Bootstrap keeps everything nicely organized and compact.

Why Designers Should Love Bootstrap

Here are some reasons why you should care about Bootstrap:

• Great price: FREE and open source. No need to convince anyone to get out their wallet.
• The Grid. Design in & around any division of a 12-column grid. Also, you can change the number of columns at different screen widths.
• Rapid development. See your designs realized in code more quickly than without Bootstrap.
• Appropriate constraints. Useful set of constraints you can rely on to account for most devices & browser, yet fully customizable, so you don’t have to pull any punches creatively.
• Focus on design. Bootstrap takes care of the non-domain specific elements so you don’t have to repeat yourself.

Designing with front-end and back-end development in mind is essential to the success of any web project, but for designers it can be difficult to understand what constraints you really need to take into account. Most of the time, if a developer tells you they can’t do something, it just means that they personally aren’t aware of how to accomplish it. But web development capabilities have come a long way in the last few years and the sky is the limit when it comes to creative expression.

Regardless, we’ve found that many designers propose “unrealistic” design solutions not because they must have things a certain way, but because they really don’t know what’s possible. If they were aware of a particular constraint or had more models shared with developers for some common ways to approach design problems, they are much more likely to find the most beautiful and functional way to do things.

Becoming familiar with a framework like Bootstrap doesn’t mean you have to learn how to code. And it doesn’t mean you have to pull any punches creatively, it simply means taking a few extra steps to make life easier for the developers who have to work with your Bootstrap-inspired design down the line. Rather than trying to get developers to speak your language (which will require the freezing of hell and the de-clouding of heaven), you can start speaking their language and then work together to find solutions from that common framework of understanding.

Ok let’s dig into working with Bootstrap…

The Grid!

Making the shift to Bootstrap means getting familiar with the responsive grid, understanding the constraints of the framework and taking a mobile-first approach. Designing for Bootstrap does not mean that your creativity will be compromised in any way, or that you’ll need to design something that looks unoriginal, bland or generic. Again, useful constraints — no punches pulled.

Breakpoints/Screen sizes (The Container)

Since Bootstrap’s columns are percentage-based (instead of pixel-based) what happens is that the device’s screen width determines the overall container size. But once you hit 768px wide, the container width only goes up incrementally at two more breakpoints.

• xs = 320px to 767px (100% container, minus 30px); tiny, right?
• sm = 768px to 991px (750px container)
• md = 992px – 1199px (970px container)
• lg = 1200px and up (1170px container)

It is possible also to override these settings. For example, you could add another even larger breakpoint for people with massive screens. All you have to do is tell the developer what width you want and they can override Bootstrap’s defaults.

Rows

Every container has a row in order to create horizontal groups of columns. Within each row should be 12 columns. A row resets and clears each column group. You can also nest rows (more on this below) to group things deeper.

12 Columns

There are no more than 12 columns in a row. Not all columns must contain visible content. All 12 columns in a row equals 100% of the container width where each column width is percentage-based depending on the container width. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Nested Elements

Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). Rows with column with rows with columns with rows with columns. Freakin’ Inception!

Offsets

Offsets increase the left margin of a column by X columns. So you are not limited to started everything left-justified.

For example, when it comes to the magic number 12, and we’re counting columns, we could have a column that spans four, then an offset of four then a column that spans four. The two four-span columns would be equal in width, but would have gap between them of the same width.

Or you can put two four-span columns after a two-span offset, resulting in two centered content areas with equal margin on either side.

Different numbers of columns at different widths

This is one of the most magical features of Bootstrap. You can specify that on small screens a particular content area will span 10 columns. But then when the screen is medium, that same content area will only span 5 columns, and when large only 2 columns.

It looks like this in the code:

    <div class="container">
      <div class="row">
        <div class="col-sm-10 col-md-5 col-lg-2">
          WHOA
        </div>
      </div>
    </div>

What is “Mobile First” anyway?

A phrase which is as common as your corner Starbucks these days, the idea of mobile-first follows the design philosophy of progressive enhancement. The idea is that you begin designing at the smallest device viewport you wish to support, then add more to the design as you progress up through the viewport widths.

This way, you start with the most important content only, and you add to it as the screen size increases. The user gets a more consistent experience across platforms, as there are no major style changes needed to fit mobile constraints. This idea isn’t really specific to Bootstrap, but it should help guide you towards a way to start your designs that will work nicely into a developer’s workflow and expectations.

• Start by designing a 320px wide version with content spanning 290px and 15px gutters down both sides.
• The portrait layout tablet mock-up should be 768px (standard iPad portrait width) wide and designed using the Bootstrap grid template.
• Then work your way up to larger sizes.

You don’t have to pull any punches creatively!

Here’s a handy little reference table for column widths and canvas sizes

What Next?

Get Resources

Download these free resources from around the open source community, but specifically by alterplay.

This UI Kit contains all Bootstrap 3 UI controls in vector format, Glyphicons that come with Bootstrap and lots of bonus UI elements that are perfect for mocking up control and admin panels. There’s also a handy grid for Illustrator in here.

Download Bootstrap Goldmine

Commit

Commit to doing your next project in Bootstrap. I’ll be here for you.

Remember: Useful constraints — you don’t have to pull any punches creatively.

Keep in Touch

Why should you listen to me anyway? I’m a co-founder, Production Director, and front-end developer by trade for Giant Hat, a software development consultancy based out of St. Louis. I cut my development teeth in the early days of Bootstrap and have presented this material to top design firms in the Midwest. Please let me know how I can help you or your creative agency.

Follow me on the Tweets @reidelliott

Giant Hat at @GiantHatWorks