Twitter Bootstrap is a cutting edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the single page site or splash page. We have already covered a bit of design theory in our “Z” design post, and we will be using many of the same techniques.
If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in our part 1 of our series.
- Check Out The Whole Series!
- Twitter Bootstrap Part 1: What is Bootstrap Anyway?
- Twitter Bootstrap Part 2: Design a Responsive Homepage
- Twitter Bootstrap: Build A Stunning Two Column Blog
- Twitter Bootstrap Part 3: Design a Responsive Contact Page
Let’s Get Started
Let’s take a look at what we will be building today.
Here, we have what is considered a fairly “best practice” example of a “Z” design layout homepage. As such, our image features the Bootstrap navigation bar, a featured content carousel or slider, a standard call to action with an accented button color as well as three columns of content.
We should take note at this point that in no way is this a set-in-stone required layout for your next project. Inherently, this is the real beauty of using a front end framework. Would you like to achieve a different layout? Go for it, with a little bit of math (including the ability to count to twelve) you can achieve any number of layouts.
Take it From the Top:
In this tutorial, I am going to assume that you have already read through our first post about the framework, downloaded it and unzipped it to somewhere easy like your desktop. Now, you are going to need a text editor so that we can manipulate the HTML/CSS and JavaScript. Depending on your platform, there are many great free programs to choose from. However, I have come to enjoy the excellent Sublime Text 2.
Set Up The Navigation
The Navigation portion of our site is relativly easy to integrate. However, one should take note that the default navigation style included with Bootstrap is “Fixed” to the top of your page. This allows for the navbar to stay within the view of users as they navigate your site.
The Slider
Call To Action
Footer & Finishing Up
I hope you have enjoyed this tutorial. Twitter Bootstrap is a fantastic tool that will allow for faster development and more user satisfaction in any project. Do you have a web design or development question for us? Drop us a note on our contact page, and we will get back with you as soon as possible.
By VINCENT C FULCO July 29, 2012 - 3:19 pm
Hey Brock- Great tuts esp. for newbie designers or those who simply don’t have the coin to hire a pro yet! Can twitter::bootstrap code be brought into wordpress directly or does it require a lot of modding? It is not obvious to those new to the field. There would seem to be some pre-made combo twitter/WP themes floating around the web but I avoid them like the plague with all the malware and secret links built in to many of them. Keep up the great work. V.