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

Read Next

15 Best New Fonts, October 2024

Welcome to our roundup of the best new fonts we’ve found online in the last four weeks. In this month’s selection we…

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…