Monthly Archives: July 2013

Bootstrap 3 – How to Prepare Yourself

Posted July 27, 2013 by Max Lynch

On August 19th @mdo and @fat released the first final version of Bootstrap 3, ending a months-long development process aimed at making the hit framework even better.

With Bootstrap 3 out, I’ve received many questions from bootstrap developers and Jetstrap customers about whether it will work with v2, what the big changes are, and if it’s worth upgrading to.

I hope this post helps explain the new version of Bootstrap, and the most important changes and what you need to know to take advantage of them (check the v3 pull request for a complete list of changes):

Flat Design

The first thing you’ll probably notice with Bootstrap 3 is how flat the design is. This is following a fairly recent web-design trend in throwing out excessive gradients, shadows, and textures, and going for a simple, minimalist look.

Though the flat design in Bootstrap 3 isn’t a design statement, for many developers that are considering going Flat, the look has several important benefits.

First of all, it’s now easier than ever to customize Bootstrap to fit your brand. No more will you have to fiddle with various color stops on a background gradient, or try to remove animations on multiple stages of a button click.

Your websites will now look more modern, at least for as long as flat design reigns.

With the simpler design, I expect we’ll see less “bootstrappy” looking sites. This might be a pipe dream but I hope the flat design encourages web devs to tweak and fiddle with the default look.

At any rate, the new look breaks the monotony of the old 2.x look and feel that has become ubiquitous. But if you still yearn for a more gradienty time, you can still use an optional Bootstrap 2 theme.

Grids

Grids are the cornerstone of Bootstrap, and they’ve received a major overhaul in 3. For an in-depth review of the new Grids, see our recent Bootstrap 3 Grid article.

The grid system is now a single fluid and mobile-first grid.

This means the grid now only uses percentage based widths instead of pixel-based widths. And now that it’s mobile-first, the grid starts stacked and scales “up” for larger screens.

In the past, Bootstrap was targeting a 940px width page, perfect for most desktop-oriented websites.

But mobile growth has only continued to explode, and more and more websites need great mobile experiences to take advantage of this growth.

With this in mind, Bootstrap 3 adds a set of classes that let you control grid behavior on all different devices. For example, you can configure your grid to not stack on small screens, or only expand into columns on large screens.

With that change, the span-* classes are gone, so old grids will not work with the new grid system.

The new grid system is powerful, and I expect it’s going to confuse a lot of people. Expect to spend a good amount of time in the grids section of the Bootstrap docs before you get the hang of it. I know I had to!

New Components and Usage

Bootstrap 3 now includes two new components: List Groups, and Panels.

I’m most excited about List Groups, which give you an iOS-looking list control. Perfect for grouping related items, and they make it easy to add annotations such as badges and form elements.

Along with new components, just about every component has received changes, either to their markup, required classes, or behavior.

The Modal, in particular, has received many important changes. For example, no longer should you apply the hide class, they are hidden by default. They also require new markup in certain cases. Be sure to take a look at the docs and cross-check with the complete changes list on the pull request.

IE7, We Hardly Knew Ye

With Bootstrap 3, support for Internet Explorer 7 has been removed from the project.

If you need IE7 support, consider trying out bootstrap-ie7, which is sure to be one of many community sponsored projects to improve older browser support in Bootstrap.

To make sure your Bootstrap 3 websites work well in older browsers, take a look at the Browser Compatibility guide in the official Bootstrap docs.

Migrating to Bootstrap 3

With all the changes introduced in Bootstrap 3, you can’t just link to the new stylesheets and javascript from an old v2.x project and expect it to work.

Grids are completely new, and must be upgraded. Many controls have new behavior or require new classes and markup.

I recommend big projects that already use Bootstrap 2.x to just stay on that version. While there are many important updates and improvements, upgrading a large project might not be worth the effort.

However, I think new projects should start to consider Bootstrap 3 as it moves through the Release Candidate phase and becomes more stable.

Right now Bootstrap 3 has bugs and isn’t 100% production ready. However, with the release of RC1, you can expect the API to stay relatively stable through to the official release.

ETA on Jetstrap Support of B3?

As of August 19th, Jetstrap now supports Bootstrap 3 in all new projects in Jetstrap.

We are excited about the new changes and we know they will only make this great framework even better.

And as always, feel free to leave a comment with any questions you might have. I am also learning about Bootstrap 3 so I can probably learn a thing or two from you!

Less Like Bootstrap – 5 Ways To Customize Your Designs

Posted July 15, 2013 by Jon Hainstock

This is a guest post by Jon Hainstock, co-founder of ZoomShift, easy to use online employee scheduling software. 

Hundreds of thousands of sites are using Bootstrap to jumpstart their web design and front-end development. For a lot of developers and designers, implementing Bootstrap is a no brainer. Some rely on Bootstrap for the responsive capabilities, while others simply like using the built-in elements.

Most of the sites that use Bootstrap do little to customize the look and feel–which, in my opinion, is too bad. I’m disappointed, because Bootstrap offers a great foundation that you can work with to prototype and design a completely custom site. It doesn’t take much to customize your design and give visitors a unique experience using Bootstrap’s elements.

In this post I’ll show you 5 easy ways you can avoid the standard ‘Boostrap look’ and create a custom design.

To use the examples below, create a new CSS file and link to it below the bootstrap.css file (found in the <head> of your page). Now any styles you add will override the default Bootstrap styles when targeting elements. I’m also including a zipped copy of the HTML and CSS from these examples a link below.

1. Create Custom Buttons

The default buttons are a dead giveaway that a site is using Bootstrap. You’ll notice in Bootstrap’s documentation that they create different colors for buttons using a btn-description naming convention. Instead of overriding these classes, create your own naming convention. Something like ‘btn-color’ works well. When it comes to customizing the color of your buttons, there is no better tool than Charlie Park’s ‘Beautiful Buttons for Bootstrap’ tool.

To go for the ‘flat’ look that is popular right now, simply add ‘background-image:none’ to your btn-color class to override the gradient. Once you have the perfect color, play around with padding, font-weight, letter-spacing and text transform properties to give your buttons their own look and feel.

Here are a couple examples of buttons that can be created using these methods. These examples show the flexibility you have with just a few lines of code. Feel free to use the snippets as a starting point to create your own.

HTML for Bootstrap buttons

Geckoboard Buttons

Basecamp Buttons

ZoomShift Buttons

Stripe Buttons

2. Avoid The Standard Navbar

Similar to buttons, Bootstrap’s standard navbar can be completely restyled easily. Use inspiration from the web, and create your own custom header instead of relying on what Bootstrap includes right out of the box.

Here are a couple example snippets you can use to help you explore different header options.

The HTML for a standard Bootstrap Navbar

Simple Navbar Header Inspired by Simple.com

Colored Navbar Header Inspired by Harvest

3. Use Custom Fonts

Fonts add dimension and personality to your site just as much as color or layout. There are tons of free fonts that you can use to liven up your design. I prefer Google Web Fonts, but also would recommend Typekit for finding awesome web fonts if you can afford it.

Learn by copying font choices from sites that are designed well. 10 Great Google Font Combinations You Can Copy is a great place to start. You can also find out what fonts sites are using with this Google Chrome plugin. If you want to get nerdy and learn the theory, check out this article on font pairing. And if Helvetica is your thing, then by all means, continue to use Bootstrap’s default font and adjust font weights to keep things interesting.

Here are a couple of examples of sites that use custom fonts with their Bootstrap design.

4. Create Unique Layouts Using Offsets

Another way you can customize your Bootstrap design is by using offsets to create unique layouts. The general concept with offsets is to add whitespace to the left of a Bootstrap span. Play around with offsets to find some layouts that work well for you. At ZoomShift we use offsets to tighten up layouts where there is not a lot of content. Using offsets and a lot of vertical padding creates breathing rooms in your designs and can set it apart from the traditional layouts.

Here’s an example of the 3-2 layout on the ZoomShift homepage.

Here’s an example of nested columns in a closed two-column layout on the Desk pricing page.

5. Expand Your Icon Choices With Font Awesome

Icons can help you communicate big ideas and concepts quickly to your visitors. The default Bootstrap icons are great for most applications, however, there are times when you need more options. Font Awesome offers an expansive set of icons that you can use to improve your site’s feel.

Closing Thoughts

These are just a few of the ways you can create your own look and feel with Bootstrap. I’d love to see how you are using Bootstrap to come up with your own custom designs in the comments below!