Menu

Creating a Landing Page: Frameworks, Polish and More

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…

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,

Shot of the header section

Shot of the feature section

Shot of a cool draggable Google Map

Shot of a newsletter signup text field

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!

By Leo Acosta

Free Premium Template

6 Comments

Great blog Leo. I just found out about foundation today and am looking into building some sites with it. I have worked with bootstrap before and love it. Foundation looks like it will be pretty cool too.

Thanks for sharing. I’m going to sign up for your newsletter and get the free theme now.

Thanks for your comment! If you’re wanting to get started on ThemeForest then that’s awesome! As a starting point I want to ask you, what kind of coding do you like to do? Are you familiar with HTML, CSS, PHP, JavaScript, other? Let’s start with this and we can go from there…

Ok thanks for replying, I have experience in HTML and CSS including (HTML5 and CSS3), even that I’m missing work harder in practice, more than anything I upgrade a little, my point is … is recommended eg using less, coffescript and all this sort of thing … or is there some special way of documenting or comment code, that is some good programming practice?

I have also experience in php, mysql and javascript jquery.

My question is usually, which is the difference between making a website for a client, or a quick freelancer work to do a website for ThemeForest.

I wouldn’t necessarily say you would need to create your ThemeForest item using a CSS preprocessor (e.g. Less, Sass, etc) – you can start out with basic CSS. The main thing would be to just get started more than anything else.

I would however suggest that when you’re coding you comment your code where it’s needed. Also, you will need to provide user documentation with your item, as this is what your buyers will need to set the item up.

Personally, with client works vs creating an item for a marketplace, I feel there is more creative freedom, you’re not tied to any specific deadline and there is the potential of making more income from the one item. Just to give you an indication, one of my themes has made over $24,000 in sales, something which would be highly unlikely from client work.

That being said, there is also the possibility that you may launch an item and it makes very low sales, so bear this in mind as well.

Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /nfs/c08/h02/mnt/171085/domains/themechills.com/html/wp-content/themes/themechills/sidebar.php on line 1