So I can finally do the big reveal…well…sort of….
In this post I am going to give you a quick preview of the finished version of the Reprise landing page. I’d like to show you the full kit and kaboodle, but at the same time I wan’t to save you some of the real thing for when it’s actually live!
Let’s Recap First…
So far in the series I have shared with you the following:
- Part 1 – Creating a Landing Page: Getting Inspiration Ideas
- Part 2 – Creating a Landing Page: The Concept
Today I’m going to go over how I decided to use one specific popular framework over all the others, as well as how I go about “putting the polish” into the templates and themes I create.
So let’s get going… shall we?
Choosing a Framework
If you’re like me, I’m sure that you have probably read about the countless debates surrounding the topic of whether to use a framework or not.
Truth be told, I’m not really in favor of one or the other – I do however believe it’s always a good idea to dabble in new technology.
Let’s face it, we never stop learning, so why should the web be any different.
There are literally so many frameworks that I could list out that it would be a whole post in itself. But that’s not what the series is about.
So enough with all that, I’ll get straight to the point. For this project I considered two frameworks:
- Foundation
- Twitter Bootstrap
Truth be told I had never used either of these before, so I figured why not try one of them out. I actually did start with the Foundation framework, however, once I got more into the documentation and awesome features Bootstrap has to offer (not to say Foundation doesn’t), I made the executive decision and decided on taking “The Boot” instead.
I may actually use Foundation for my next project, but I’ll save that for another post.
What is great about Twitter Bootstrap is all of the integrated widgets it brings to the table. Sure, some may argue that it is probably overkill, bloated, etc, but then again, I like having these features available at my finger tips
One thing I will say, is that if you are concerned about file size, that’s cool, just pick and choose the features *YOU* need for your project and scrap the rest.
But Isn’t Twitter Bootstrap Confusing?
Not at all. The best recommendation I can give you is to read through most, if not all, of the documentation. Once you do you will begin to understand how the helper and grid classes work together to form a beautiful and easily customizable grid structure.
With that said, the base layout of my design was up fairly quickly – I would say it took just under an hour.
What is great about frameworks, is that the cross-browser testing has already been done. This saved me a lot of IE headaches – which is always a nice thing.
Putting the Polish
Once the framework was in place, I began to migrate the color palette to code. This involves setting out my typographic colors, base/global styles, placeholder images and anything else that relates to the overall look and feel of the template.
So…. want to see the preview? Ok, I’ll give you four as a bonus!
Check them out below and feel free to leave me your comments, all feedback is welcome,
The Next Step…
After implementing all the necessary markup, styling, behaviors I am now ready to submit the item. Before doing so, there is some preparation work that needs to be accounted for.
In my next post, I’m going to share with you exactly the process of how I prepare my templates for submission into the ThemeForest marketplace, so make sure to check that out later on.
Thanks for sticking with me, there’s more juicy stuff to come!