Welcome to the tutorial portion of Kreate! Below are a some snippets and guides to help you become a master of kreation. Are you ready? Of course you are. You were born ready. You were born awesome.

Congrats! You just kreated your first element. By default, if arguments are missing from $.kreate(), Kreate will make an empty <div>.

To Kreate something, just enter in the code below:

2. Express Kreation

There are two ways you can kreate elements - express and advanced. For this portion of the tutorial, we're going to be focusing on the express method. It's cleaner, faster, and goes great with salad.

To express kreate something, enter a string into the kreate function.

selector - Type of element (e.g. div, span, image, ul..)

#id - ID of element (not required)

.class - class of element (not required)*

* Just a heads up, you can only add one class to the element. Adding additional classes like this ".class1.class2.class3" does nothing - Nothing!.

Now that you know the express formatting, let's start expressing ourselves!

Express Creating a Single Element

Let's try express kreating a div with a class..

$.kreate('div.fancy');

Awesome! Wow, you're doing great. You just made this:

<div class="fancy"></div>

Next, let's try something a little fancier. Let's make a div with an ID & a class:

$.kreate('div.#goodness.super-fancy');

Great work - You just made this:

<div id="goodness" class="super-fancy"></div>

Express Creating Multiple Elements

Yes, oh yes. You can make multiple elements with the express method. In fact, you can make as many elements as your heart desires! Well, almost.. 12 million divs is a bit much.

All you have to do is add a number after your string. Let's try it:

$.kreate('div.fancy', 7);

Did you just make 7 divs? Yes you did - what a baller!

<div class="fancy"></div> <div class="fancy"></div> <div class="fancy"></div> <div class="fancy"></div> <div class="fancy"></div> <div class="fancy"></div> <div class="fancy"></div>

Express Outputting

By default, Kreate makes a jQuery object with all of your wonderful elements neatly wrapped inside. Alternatively, you can output your elements either as an HTML string or as a good ol' fashioned array.

To change the output type, just add either HTML or array as the third argument in the kreate function.

Outputting as an HTML String

$.kreate('div.topic', 2, 'html'); // This snippet should return // '<div class="topic"></div><div class="topic"></div>'

Outputting as an Array

$.kreate('div.topic', 2, 'array'); // This snippet should return // [<div class="topic"></div>, <div class="topic"></div>]

It looks like you've mastered the express method. I tip my hat off to you. However noble one, are you ready to take on advanced? Why did I even bother asking, of course you are!