Navigation

How to Kickstart your HTML

By Sara Vieira | HTML | Jan 14, 2014

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="http://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.

Share this post
Comments (no login required)
  • Mnesikles

    … less code means FEWER errors …

    DOH!

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      It’s a rhetorical device to emphasise the simplistic nature of the statement :)

    • Ivanov Karmazov

      Bet you are super fun at parties. lol

  • Tiago ☠

    looks great, but i may ask, what does this framework has or is better than Bootstrap/Fundation frameworks?

    • Luca Guadagnini

      or UIKit? or SemanticUI? or PureCSS? or Workless? in my opinion… nothing. It strongly depends on what you’re doing, for instance: why Foundation? Foundation is very cool and much more mobile-first than others, easy to use and with a strong support by Zurb, but with less components than Bootstrap, therefore if you need something just to make a prototype for mobile or a base for your own personal web-site/web-app then go for it, it is very very simple to customize it (more than Bootstrap in my opinion).

      why Bootstrap? Bootstrap has a very strong community, a lot of side projects and support from other companies (for instance Telerik, the company behind KendoUI is a fan of it), there are a ton of jQuery plugins compatibile with it. therefore if you need something to start as soon as possibile your web-site/web-app, Bootstrap could be a nice choice.

      UIKit is another great choice in alternative of Bootstrap, even because it has a very nice web-tool for customizing the basic theme of the “framework” and it has a lot of components. Workless is just another alternative of Bootstrap.

      instead if we talk about SemanticUI… well this is a very cool framework and there’s a nice idea behind it, but at this moment I don’t personally consider it for a full web-app, but I prefer it for a web-site, the components of it look much more for a well-designed personal web-site/portal.

      PureCSS is a very particular bootstrap library and tries to minimize the problem of loading the necessary stylesheets by providing basic features for typography, buttons, etc… and it has been doing it pretty well so far, since it’s a very small library!

    • Sara Vieira

      I don’t think it’s either better or worst , it’s simply different. This framework is simpler to write and put on the air because it requires less markup and if that’s what you need this one is great

    • Miroslav Stibor

      Bootstrap/Foundation are over-complicated to me. I am not able to use them. To download them only is a lot of pain. It is like using Boeing 747 to travel 5 km.

      This framework (HTML Kickstart) is so simple to use (or modify). Just a few tags into your html and it is finished.

  • Buccaneer Faithful

    Thanks, Sarah. Great framework!

  • http://neonc0de.zz.mu/ Widy Graycloud

    where’s the image ??
    this post really need some image

  • jenniebeme

    My HTML Kickstart menu looks like poo on mobile. I’m not seeing any built in functionality for a mobile specific menu… like where you click the 3 bars and the menu slides in (is there a name for those)? If anyone has any documentation on how to achieve this I would be very interested in reading it.

  • Newton

    So, has anyone here taken elements from different frameworks (a piece of Bootstrap here, Kickstart there, etc., etc.) and just created a Frankenstein monster stylesheet? I’m new to the game for sure, but it seems to me that, since these are all just elaborate CSSes, cherry pick what you want…within legal limits, of course.

  • JG

    Thanks Sara for a very comprehensive presentation.