2736N/A<div class="intro">

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

2736N/A</div>

2736N/A

2736N/A<div class="example">

2736N/A {{>yui-core}}

2736N/A</div>

2736N/A

2736N/A<h3>Setting up the YUI Instance</h3>

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

2736N/A

2736N/A```

2736N/AYUI().use('node', ...

2736N/A```

2736N/A

2736N/A<h3>Using the callback</h3>

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

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

2736N/Athe load is complete. This function will be executed whether or not dynamic loading is required, so it

2736N/Ais the preferred pattern for using <code>YUI</code>.</p>

2736N/A

2736N/A```

2736N/AYUI().use('node', function(Y) ...

2736N/A```

2736N/A

2736N/A<p>

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

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

2736N/A</p>

2736N/A<p>

2736N/ANow that we know all of the modules are loaded, we can use `Node`

2736N/Ato update DOM nodes in many ways.

2736N/AHere's a simplified version of the fruit example above.

2736N/A</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}}

```