How to Kickstart your HTML

Wdd Logo.
January 14, 2014
How to Kickstart your HTML.

kickstart_thumbnailA primary goal of all developers is faster development, especially rapid bootstrapping. There are dozens of frameworks made available in the last couple of years that aim to have our prototypes up in minutes.

Unfortunately many of those frameworks date quickly, as project requirements evolve, and need to be refreshed or replaced.

If you’re looking for a recent framework that resolves the problems older solutions are now encountering, whilst still maximizing your workflow, you can’t go far wrong with HTML Kickstart.

The Grid

The grid is one of the most important aspects of any framework, especially as a flexible grid determines how responsive a site can be.

HTML Kickstart provides us with the option of a flexible grid, or a standard (non-flexible) grid — although it’s not clear when you’d use the latter given the increasing dominance of mobile devices.

To create a flexible grid with two equal-sized columns, we’d use:

<div class="grid flex">
<div class="col_6 column">Content Here</div>
<div class="col_6 column">Content Here</div>

As you can see, all we’ve done is add some simple classes to three divs. If you’d prefer the non-flexible grid, all you need to do is remove the flex classname from the outer div.

(Note that the flexible grid will stretch to the width of the entire screen, whereas the non-flexible grid has a maximum width of 1024px.)

In addition to the based classes above, there are a number of helper classes that we can use, for example:

  • show-desktop and hide-desktop with these classes you can decide if you want that grid to be visible on a desktop computer.
  • show-tablet and hide-tablet the same concept applies here, but for tablet devices.
  • show-phone and hide-phone once again, these classes dictate visibility, this time for smart phones.

If we wanted to hide our two column grid on smartphones, for example, we’d use code like this:

<div class="grid flex hide-phone">...</div>


HTML Kickstart gives us three menu options: vertical left, vertical right and horizontal.

The version you’ll want most often, is the horizontal menu. To code it, we just need unordered lists:

<ul class="menu">
<li class="current"><a href="">Item 1</a></li>
<li><a href="#">Item 2</a>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Item 3</a></li>

If you want a vertical left menu, just add vertical to the opening ul, and if you want a vertical right menu, add vertical right, like so:

<ul class="menu vertical">...</ul>
<ul class="menu vertical right">...</ul>

It really is that simple to code responsive menus with HTML Kickstart.

Default styles

HTML Kickstart gives you some great basic styles from the off. Obviously you’ll want to refine them for your project, but for rapid prototyping, they’re more than sufficient.

When it comes to typography HTML KickStart uses Steve Matteson’s Arimo font by default. You can see the full range of type settings here.

Button styles are always the center of a lot of attention in any framework, and HTML Kickstart comes with buttons in all shapes and sizes. You don’t even need to use classes for this, just create a button tag and the styles will automatically be applied.

If you’d prefer the button styles to be applied to an anchor tag, you just need to add the button class to it:

<a href="" class="button">WDD</a>

We can also apply colors easily. Just add the name of the color you want:

<button class="blue">Blue</button>

There are also a number of different styles we can apply:

<!-- Pill Style -->
<button class="pill">Pill</button>
<!-- Pop -->
<a class="button pop" href="#">Pop</a>
<!-- Inset Button-->
<button class="inset">Inset</button>
<!-- Square Button-->
<button class="square">Square</button>

Finally, we also have the option of creating a button bar, with a syntax similar to the horizontal menu:

<ul class="button-bar">
<li><a href="">New</a></li>
<li><a href="">Upload File</a></li>
<li><a href="">Delete</a></li>


HTML Kickstart helps improve UX by generating pop-ups for galleries and images for you. It’s a much better solution than opening a new window.

To create a fully functional JavaScript-based pop-up gallery all we need is the following code:

<div class="gallery">
<a href="img/image1.jpg">
<img src="img/thumb1.jpg" width="100" height="100" />
<a href="img/image2.png">
<img src="img/thumb2.png" width="100" height="100" />

It’s simple to implement, and you didn’t need a single line of JavaScript.

Images also have some great helper classes, such as caption. This class applied to an image shows the title of the image as a styled caption:

<img class="caption" title="My Caption" src="img/image.png"/>

We also have align-right and align-left classes that we can use to float images left and right. (HTML Kickstart will add a little margin so the images aren’t up against the text.)

<img class="align-left" src="img/align.jpg"/>

And of course, HTML Kickstart also provides us with simple slideshows. It uses BXSlider slider to handle this.

The code for a simple slider will look something like this:

<ul class="slideshow">
<li><img src="img/image1.png”/></li>
<li><img src="img/image2.png”/></li>
<h3>A Content Slider</h3>
<p>This slider handles HTML content as well as images.</p>

The slider is touch-enabled for mobile devices, and once again, you didn’t need a single line of JavaScript.


The last thing I want to introduce you to is forms. Forms are vital to any framework, because they are one of the hardest things to style on a web page.

HTML Kickstart maintains its simplicity when it comes to forms, and a vertical form can be created as simply as:

<form class=”vertical”>
<label for="name">Name</label>
<input id="name" type="text" placeholder=”Your Name” />
<label for="age">Age</label>
<select id="age">
<option value="0">-- Choose --</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<textarea id="notes" placeholder="Some Notes"></textarea>

As you can see, I’ve hardly had to use any classes at all for this form. All I’ve done is add the class vertical at the top so that the form elements aren’t treated as inline.

One of my favourite parts of HTML Kickstart are the simple error notices used with forms:

<!-- Error -->
<div class="notice error">Error Notice <a href="#close" class="icon-remove"></a></div>
<!-- Warning -->
<div class="notice warning">Warning Notice <a href="#close" class="icon-remove"></a></div>
<!-- Success -->
<div class="notice success">Success Notice <a href="#close" class="icon-remove"></a></div>


There are tons of options that come with HTML Kickstart, we’ve really only scratched the surface; there’s a huge set of icons, tooltips and even tabs.

The real strength of HTML Kickstart is the simplicity of its code. The lack of extraneous divs and classes makes it a great time-saver, less code means less errors. If you’re looking to get started coding your own HTML from scratch, or if you’re looking for a simple framework to rapidly prototype a design HTML Kickstart is a great option.

Have you used HTML Kickstart? Do you prefer a different framework? Let us know in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…

5 Marketing Tools Every Designer Needs

Yes, designers do need marketing tools. From freelance graphic designers who need to land more work to designers who…

Exciting New Tools For Designers, September 2023

At the end of another summer, we are all getting ready to knuckle down for some serious work in the fall. But we want…

Elon Musk calls LinkedIn ‘Cringe’—Announces Competitor

Elon Musk recently announced his intentions to create a direct competitor to LinkedIn. Musk’s grand plan is to make his…

Everything You Need to Know to Embrace the Y2K Design Trend

The turn of the millennium was a major cultural shift, and the Y2K aesthetic emerged as a visualization of what the…