6 Responsive Bootstraps and Theme Starters

6 Responsive Bootstraps and Theme Starters

Posted by Rainey

Rapid prototyping is awesome!  Recently I created a website wireframe for my client using Bootstrap from Twitter.  This wireframe is static HTML with no color, but allows me to show my client how the content would be structured and how users will interact with the website.  Plus, I got to showoff how the site would look on mobile with the same wireframe. Needless to say my presentation went over really well and I was able to address many of their questions with this wireframe.

So why is this so great and why did I not
use a wireframe tool like Axure, Balsamiq, etc.?

One benefit to this approach is my client gets a better understanding of how the site will look on various devices.  I can post the wireframe on a web server and allow my client to interact with it on their phone, tablet or PC. I realize that some wireframe toolkits can do this also, but the big reason is I have the base CSS and JavaScript in my hands from the first moment. Most things I add to the wireframe can be carried over to the final product.  This saves me lots of time because I am building the foundation of the website while I am making the wireframe.  Once I have approval to move on with the website, I can create my design based on wireframe and marry the wireframe with the design and code for the actual website. Brilliant!

So are wireframe tools dead?

Absolutely not. Building a wireframe the way I mention above does have some limitations. There will be cases when a unique problem cannot be shoehorned into this method.  The site I mentioned above is basically a shopping cart and it needs a degree of familiarity that Bootstrap from Twitter certainly offers. But, for 80-90% of my projects, this approach will work just fine.

So with this in mind, here are 6 responsive bootstrap and theme starter tools that I am currently exploring. The starter tools are WordPress since that is what I use most, but I would be up for checking out others. Please let me know if you have a favorite so we can check it out.

 

responsive bootstrap solution from twitter

Bootstrap from Twitter

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers viaresponsive CSS as well. A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own. Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub.

Get Bootstrap from Twitter

 

responsive bootstrap solution from initializr

Initializr

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Get Initializr

 

 

responsive bootstrap solution from foundation

Foundation

Foundation is the most advanced front-end framework in the world. While the framework works all the way back to IE8, we’re taking advantage of new, awesome Web technology to help you build better and faster.

Get Foundation

 

 

responsive wordpress framework from

Bones

Built around the HTML5 Boilerplate, Bones is a rock solid foundation to start any WordPress project. Keep what you need, remove what you don’t. It’s totally up to you.  Bones is bare and as minimalistic as possible. It’s meant to be used as a per-project template, this means no Child Themes. Hooray!

Get Bones

 

responsive wordpress framework from automatic

_s

Hi. I’m a starter theme called _s, or underscores, if you like. I’m a theme meant for hacking so don’t use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.

My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you’re designing your awesome theme.

Get _s

 

responsive wordpress framework from skeleton

Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles:

  • Responsive Grid Down To Mobile
  • Fast to Start
  • Style Agnostic

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Tools

    • android app making software

      This is awesome work. I have read the article and it seems
      to me very innovative indeed. Want to really see some more update here. Keep it
      up man. Web design Zurich