Jumpstart Your Web Project With HTML KickStart

by on 24th January 2012 with 16 Comments

screenshot

Recently, we took a look at a really solid framework from the good folks at Twitter called Bootstrap. This toolkit is a swiss army knife of utilities and includes both a functional layout grid and enough pre-styled elements to get a great jumpstart on any project.

Today we’re going to look at a very similar tool from Joshua Gatcke called HTML KickStart. This framework is simply overflowing with great stuff that will enable you to build web page prototypes at light speed. Let’s jump in and build a page with it to see what we think.

What We’re Building

Before we jump into what HTML KickStart is and how you can use it, here’s a sneak peek at the final result of today’s tutorial:

Demo: Click Here to launch.

screenshot

What Is HTML KickStart?

screenshot

According to 99Lime.com (the project’s homepage), HTML KickStart is “an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10′s of hours on your next web project.”

According to this statement, this project could theoretically save us one or even multiple full days of work. That’s certainly no small promise! How does it make good on such a claim? By providing a huge set of features. Don’t bother asking “what’s in HTML KickStart?” Instead ask, “what’s not in HTML KickStart?” The answer is of course, “not much.”

screenshot

Getting Started: Nav Menu

To see how all of this works, we’re going to rough out a quick project. If you want to follow along, download the project and start with the sample HTML page, just be sure to strip out any placeholder elements so you have a fresh blank slate.

The first thing we’re going to do is add a topside navigation. If we swing by the HTML KickStart elements page, we’ll find three built in menu options to choose from.

screenshot

We want the Horizontal Menu option so we click on the “Horizontal” tab and find some sample code that we can use for our own purposes.

The system here is really straightforward, you simply create an unordered list with the “menu” class and each list item will become a menu item. The class “current” is added to the current page and sub lists can be used to create drop down menus.

With only this little bit of HTML and zero CSS work, our menu looks great and is perfectly functional. As with the CSS, the JavaScript magic is already being taken care of for us.

screenshot

Notice that there’s already a background image applied to our body. This is the default grid image that comes with the framework, we’ll see how to swap this out later.

Welcome Message

Next we want to add a nice big headline to our page to welcome any visitors. This will make use of the pre-built typography styles.

Welcome to a Design Shack Demo

This is a demo of HTMLKickStart, a rapid prototyping tool from 99Lime.com.

The h1 and p tags will already contain some default styling, but there’s nothing at this point governing our layout so we’ll need to help this out with some custom CSS.

screenshot

To start, we’ll want to center that text in the window. The paragraph and header also have a huge margin between them so we’ll need to tighten that up. Go into the “style.css” file and start a new section with your own styles. Then insert this code:

.headline {
	text-align: center;
}

.headline h1 {
	margin-bottom: 0;
}

.headline p {
	margin-top: 0;
}

With that, our headline is looking great. It’s perfectly centered has a greatly reduced vertical height.

screenshot

Using the Grid

We haven’t really needed it yet but HTML KickStart does come with a prebuilt layout grid. If you’ve ever used anything like 960.gs before, there won’t be any surprises here. It’s your basic 12 column grid that uses numbered classes (ex: col_5).

screenshot

As you can see, to get the full width, you need the total of your column class numbers to add up to 12. So if you want to split the page in half, you’ll create two divs, each of which have the class “col_6″ (6 + 6 = 12). You can do this with any combination that adds up to 12: col_7 + col_5, col_2 + col_10, etc.

To test this, we’ll do what I always do to test a grid system, code a basic three column layout. The CSS for this is already in place so busting out a three column layout is as easy as creating three divs, each with the “col_4″ class.

In each div we’ll toss three elements: a headline (h3), paragraph and an image. Placeholder images are grabbed via the placehold.it service.

Column One

Lorem ipsum dolor sit amet...

Column Two

Lorem ipsum dolor sit amet...

Column Three

Lorem ipsum dolor sit amet...

Now we have a nice three column section under our headline. How easy was that?

screenshot

A Little Cleanup

Looking at the example up to this point, I think the content is pushing up a little to close to the edge for my liking. To fix this, I wrapped everything after the menu into a “col_12″ div. The difference is subtle, but it feels much better from a whitespace perspective.

screenshot

Changing the Background

While we’re tweaking things, let’s go in and swap out that background graphic. You’ll find this in the style.css file under the layout section.

/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:0;
color:#000;
background:#efefef url(css/img/grid.png) repeat center top;
font:normal 0.9em/150% 'Arimo', "Trebuchet MS", arial, verdana, sans-serif;
text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */
}

All you have to do is replace the “grid.png” image with your own background pattern. I grabbed this one and dropped it in just to give our page some contrast.

screenshot

Slideshows and Buttons

We’ve still barely scraped the surface of the great elements that are available in this framework. Let’s bust out a quick new section that utilizes some more features.

Here's Another Section

This time we'll be utilizing a slideshow and a button.

A Slideshow!

Lorem ipsum dolor sit amet...

Let’s walk through this piece by piece. First, we started with a headline exactly like the last one that we used. We reused our headline class from before so we shouldn’t need anymore custom CSS.

Next up, we used the awesome HTML KickStart Slideshow feature. This is implemented in a very similar way to the menu that we started with. Just toss in an unordered list with the class set to “slideshow”, define your height and width, then drop in some list items. Each list item will then become a slide. You can put anything you want inside of slides: text, images, etc.

Just like with the menu, this slideshow will automatically be functional as long as you’ve included the requisite JavaScript files that come with the download. This is an important feature, Twitter’s bootstrap requires some extra hoop jumping to get the JavaScript up and running but it’s truly effortless with HTML KickStart.

Buttons

Notice that the slideshow is in a “col_8″ div, which means we need a “col_4″ div for the next part, which is just a simple paragraph referencing the slideshow.

In this paragraph you’ll notice that I used a simple “button” element with a class of “blue”. There are all kinds of pre-built buttons to choose from: plain and gray, colored, you can even add icons!

screenshot

I chose to go with the simple blue for this button but it’s just as easy to use any of the others. Drop in the code from the examples on the site and you’re good to go.

Here’s a shot of what this section looks like. Once again, without a single bit of extra CSS or JavaScript we were able to accomplish some impressive feats!

screenshot

Footer

screenshot

Included in your sample files is an example of a footer. This is important because it shows you how to break out of the grid and establish a full width colored area, something that I struggled with in my own attempts before noticing the footer.

Here it uses an ugly, non-semantic div to clear the floats, but this is a fairly common practice and really isn’t the end of the world so don’t get too caught up with it.

To style the footer div, some padding and color was applied and the little link to the top of the page was prettied up a bit. This transition is animated via some more fancy built-in JavaScript.

#footer{
text-align:center;
padding:20px;
margin:0;
background:#efefef;
border-top:1px solid #ccc;
color:#999;
font-size:0.8em;
text-shadow:0px 1px 1px #fff;
}

	#link-top{
	float:right;
	color:#666;
	text-decoration:none;
	display: inline-block;
	padding:5px 10px;
	background:#e5e5e5;
	line-height:100%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	}

Final Product

We could keep going for days with all of the stuff that’s in this toolkit. You’ll also find pre-styled tables, forms, image galleries, breadcrumbs, tabs, horizontal rules and even pre code snippets.

With what we’ve gone through, you get the basic idea for how it all works. The documentation is very thorough so all you really have to do is find the item you want to insert, then paste the code into your HTML and tweak as needed. Here’s another look at the page we just built:

Demo: Click Here to launch.

screenshot

Who Is This For?

Now that we’ve seen how to use HTML KickStart, it’s important to discuss why you would use it. Perhaps even more relevant is who should think about giving this a shot.

Like most fully featured frameworks and boilerplates, HTML KickStart provides you with a really solid starting point for your development projects, not only from an HTML standpoint, but for CSS and even JavaScript as well. You should think about giving it a look if you don’t currently have a system in place that makes starting new projects easy.

“The real strength in these types of toolkits is rapid prototyping”

Keep in mind that there’s a lot in this toolkit, too much for many developers’ taste. You can pick and choose what you want and leave out the rest, but also consider that the real strength in these types of toolkits is rapid prototyping. In a finished product, you may want to take the time to work out a layout scheme and all these bits of styling manually, but in the initial concept stages, why not upgrade your non-functioning wireframes to something like what we built today? It’s much more interactive than a flat sketch and really doesn’t take much more time to bust out.

Is It Any Good?

To be sure, this is not the only product of its kind on the market. There are a million different free frameworks out there, each with their own degree of custom styling. As I mentioned above, the closest thing I’ve seen to HTML KickStart is Twitter’s Bootstrap. In fact, the two projects are nearly identical at a glance.

Having tried both, there’s definitely a lot that I like about Bootstrap better. For starters, the layout is a little tighter and the docs go through advanced features like offsetting columns. I also like Bootstrap’s typography styles better and really appreciate the LESS integration.

That being said, there are some things that I like about HTML KickStart that you won’t find in Bootstrap. For instance, the slideshow feature is a huge bonus and something that I would genuinely use quite a bit. Further, all of the JavaScript in HTML KickStart “just works” while I had to do a lot of fiddling to get things working in Bootstrap.

Ultimately, I recommend that you give both a quick test drive to see which you like better. Even better, use both as inspiration for developing your own personal framework that’s custom-tailored to your needs.

Conclusion

HTML KickStart is an awesome project and I truly appreciate all the handwork that’s been put into it. When members of the development community distribute projects like this freely, I’m always amazed by their generosity and willingness to help others.

By now you should have a solid understanding of what HTML KickStart is, what it does, how to use it and whether or not it’s right for you. Leave a comment below and let us know what you think. How does this project compare to other similar toolkits that you’ve used?

Comments & Discussion

16 Comments

  • http://blogverize.blogspot.com Nirmal Shah

    Awesome find and a tut on it. I’m definitely gonna use HTML Kickstart in my next project. Thanks!

  • http://www.99lime.com Joshua Gatcke

    Hi Joshua, (great name :P)

    I was thinking about writing an introduction tutorial today for HTML KickStart, but honestly, you did a much better job that I would have. Fantastic! Thanks for checking out the project. I have added this to the HTML KickStart Blog. I hope people find HTML Kickstart useful. Thanks again!

    Happy website making.
    - joshua

  • Joshua Johnson

    Awesome, thanks Joshua! Great project, I look forward to seeing it grow and evolve.

  • Kris

    What are your thoughts on HTML Kickstart versus Foundation (by Zurb)?

  • http://webdev.michelv.be/ Michelv

    How about making it valid HTML5? And putting all the scripts at the bottom instead of in the head to display the page faster? And using the semantic HTML5 tags: , etc?

  • alamedagraphik

    html kickstart is an ideal tool for building effective web layout.
    But at a time when “the responsive design” is in the pipeline for web designers, it would have been more daring to incorporate this new approach, to make a difference with bootstrap tool for example.
    Great project!

  • http://www.99lime.com Joshua Gatcke

    @Michelv – That’s the great thing about HTML KickStart, feel free to change it however you like. The included examples are just that… samples. I hope people are customizing their templates how they see fit. As for “valid HTML5″ – not sure what I am doing that is not valid. But I love feedback. Open to suggestions.

    @alamedagraphik – There are a lot of great responsive frontend frameworks out there. This could become a feature one day in HTML KickStart… time will tell.

  • http://webdev.michelv.be/ Michelv

    First of all: I’m a big fan of your site. And I think a lot of people regard it as having lots of authority on HTML/CSS/JS coding.

    I’m afraid a lot of people are going to copy your template ‘as is’ without asking questions … So I would incorporate some best practices from the start, like always adding scripts to the bottom of the page, limit the number of includes (CSS and JS) etc.

    As for HTML5: you should always validate: http://validator.w3.org/. If it does not validate, then you claim it is HTML5, but in fact, it is not entirely what you claim.

    Some things are still required, like escaping the & in href attributes… A lot of these common issues are very easily fixed.

  • http://www.themousepotatowebsite.co.za Larry Botha

    A pity that DRY and OOCSS standards are not implemented. Bootstrap is far more appealing from a clean stylesheet point of view.

    Good effort though, will be keen to see how Kickstarter evolves.

  • http://tylerturden.tumblr.com/ Emma Louise

    Awesome! I’m gonna try this out later.

  • venkat chenna

    Really great stuff. I am very happy with your project. In my next project i will use it.

  • http://UnfriendlyMoose.com UnfriendlyMoose

    I’m kinda of a noob with building sites, can you do a section on which files you use to upload to your site and how you add them to your CSS sytles.?

  • http://catladydesignsonline.com Cat

    KickStart will be used for my next project!! This is awesome!!

  • http://www.bealondoner.com Arnaud

    I’m very impress by the work and effort put together by Joshua, I will use it too in my next project, it would silly not to!

  • http://htcwildfire.in Ravi

    Exciting. Appreciate this tutorial very much. This is helpful for beginners like me. I am planning and in fact using this for my website.

  • http://itunes.apple.com/app/puzzle-meltdown-series-ii/id494835763 Jason TEPOORTEN

    I am currently working with HTML KickStart and like its features. I’ll have my website ready for release soon.

Subscribe
Membership
About the Author