Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Bootstrap it.
4074
single,single-post,postid-4074,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Screen Shot 2013-08-14 at 6.48.52 AM

Bootstrap it.

Being on a few recent projects that utilized this magical framework, I wanted to know more about this crazy wizardry that devs were able to deploy sites so quickly and chock full of features. So I did some research over the internets.

What is this Twitter Bootstrap (said the new guy in the back to himself as to not look foolish in front of his Dev comrades)?

I’m glad you asked. Silently.

NASA

Well new guy, according to Wikipedia, it’s “a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography,  forms,  buttons,  charts,  navigation and other interface components,  as well as optional JavaScript extensions., It has been the most popular project in GitHub and has been used by NASA and MSNBC among others.” Yeah, that’s right, NASA.

Not only is TBS (that’s it’s acronym) compatible with all major browsers, it’s also a mobile first platform that is responsive and has a ton of great features, common UI elements and Javascript tools free to use. This is too good to be true. It’s not. This is real.

This platform is already becoming the next WordPress as far as theme development and sales (minus the CMS), where any clown can throw his sweet logo onto a page and call himself a “design studio”. Did I use those quotes right?

At any rate there are some great tools & resources out there for devs and creatives when it comes to working with TBS.  It’s probably safe to assume that most of the designers and writers in the room have now checked out. Come back. Stay with me. There’s something here for you.

TBS for Devs

Bootstraphero.com – This may be the motherload site of all things Bootstrap. I dare you to find something more comprehensive. Seriously.

bootstraphero

JetStrap - Jetstrap is a web-based interface building tool for Twitter Bootstrap. It’s most likely on the previous site, but I liked the design so I put it on here. Don’t hate.

Jetstrap

TBS for Design

Well, here’s where we get into some of the great tools for creatives when designing around a Bootstrap platform. What you might recognize with many of the Bootstrap designs is the overall flat design language that is popular right now and it led me to many of the articles and links below. Read more about the trend here and here as well.

In addition, there are a few great sites that have PSDs that you can take and edit to make your own that enable you to save a bunch of time with UI elements and design overall. Here are a few that I’ve downloaded and used so far:

Flat UI – This is a great kit that is free to download and use to design out your UI components.

Flat UI

 

 

Bootstrap Photoshop Template - Bent Design Studio has this great PSD available for download that has a lot of great  components you can also grab and edit to jumpstart your design with. Have a look.

 

bootstrap-1

 

A couple hot sites built on TBS

www.richardphotolab.com

richardphotolab

designedtomove.org

 

designedtomove

Here’s a few more Bootstrap resources

In case you didn’t get enough…

BuiltwithBootstrap.com

List of 20 Resources Link

BootMetro