How to Kickstart your HTML

A 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>
</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>

Navigation

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>
 <ul>
 <li><a href="#">Sub Item</a></li>
 <li><a href="#">Sub Item</a></li>
 </ul>
 </li>
 <li><a href="#">Item 3</a></li>
</ul>

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="https://www.webdesignerdepot.com/" 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>
</ul>

Images

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>
 <a href="img/image2.png">
 <img src="img/thumb2.png" width="100" height="100" />
 </a>
</div>

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>
 <li>
 <h3>A Content Slider</h3>
 <p>This slider handles HTML content as well as images.</p>
 </li>
</ul>

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

Forms

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>
 </select>
 <textarea id="notes" placeholder="Some Notes"></textarea>
</form>

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>

Conclusion

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.