<div class="intro">

<p>This example shows how to use the core of YUI.</p>

</div>

<div class="example">

{{>yui-core}}

</div>

<h3>Setting up the YUI Instance</h3>

<p>Here we will create our `YUI` instance, loading `node` so we can work with DOM elements in the example.</p>

```

YUI().use('node', ...

```

<h3>Using the callback</h3>

<p>The <code>use</code> method will dynamically fetch anything required for `Node` if it isn't already on the page.

If dynamic loading is required, the last parameter supplied to <code>use</code> should be a function to execute when

the load is complete. This function will be executed whether or not dynamic loading is required, so it

is the preferred pattern for using <code>YUI</code>.</p>

```

YUI().use('node', function(Y) ...

```

<p>

The function is supplied a reference to the <code>YUI</code> instance, so we can wrap all of our implementation code inside of

the <code>use</code> statement without saving an external reference to the instance somewhere else.

</p>

<p>

Now that we know all of the modules are loaded, we can use `Node`

to update DOM nodes in many ways.

Here's a simplified version of the fruit example above.

</p>

<style>

.example-simple{

height: 30px;

}

.example-simple span{

padding: 0.3em;

margin: 0.3em;

}

</style>

<div class="example example-simple">

{{>yui-core-simple}}

</div>

```

{{>yui-core-simple}}

```

<p>

</p>

<h3>Full Source</h3>

<p>

Here's the full source of the fruit example.

</p>

```

{{>yui-core}}

```