YUI Configurator

Select the modules you'd like to use on your page, from the list below. The corresponding includes for your page will be displayed below. NOTE: File size totals do not currently include the Skin CSS files.

Configuring Your YUI 3 Implementation:

Seed Files and Self-Completion versus Static Implementations

There are two principal ways of putting YUI 3 on the page:

1. Use the YUI seed file and its self-completion capability: If you include the YUI seed module (the full YUI module, including all of its submodules) on each page, your YUI implementations can load all other YUI functionality on demand using the intrinsic dependency calculator and loader. YUI can self-complete any implementation and will do so using a single HTTP request (when properly configured). For many uses, this is the simplest and most performant approach to using YUI. See the YUI user guide for more information on this approach; most YUI examples make use of this approach as well. When you are using this approach, the only module you need to select in the Dependency Configurator above is the YUI module.
2. Calculate your full dependency list and include all necessary files on the page: If you want to load the full set of required YUI modules via a script tag directly on the page, use the Dependency Configurator above to select the modules and submodules that are required for your implementation. Note that in most cases you will not need all submodules for a given component — most animations are not animations of color, for example, and so don't require the anim-color submodule. Similarly, if you are taking this approach and will not be loading any YUI files dynamically, you may not need the get and loader submodules for the YUI component, and you can save pageweight by just including yui-base.

Using the Dependency Configurator

The new YUI 3 Dependency Configurator above is a work in progress, so please bear with us as we continue to work on improving the user experience. Here's the quick overview of its intended usage:

• Choose your options settings. By default, files will be served from Yahoo's CDN, combo-handling will be used to create single HTTP requests for CSS and JS files, and the smallest (minified) files will be used. You can modify all of those settings as desired.
• Are you using the seed file? Read the section above carefully — if you plan to use YUI's self-completing loading capability, the only component you need to load is the full YUI module.
• If you're using more than the seed file, choose the modules/submodules that you plan to use. If you are configuring a more complex implementation that uses more than the seed file to begin with, you can choose the specific modules you want to use. For each module, there may be submodules; where these are present, choose just the submodules you plan to use in order to keep your implementation as light as possible. As you hover over a module or submodule, descriptive text appears on the right side of the screen to help guide you as to the nature of that element. Note: If you know you will not be loading any modules dynamically (via YUI's use method), you may be able to lighten your implmentation slightly by unselecting the YUI component's get and loader submodules.
• Explore the pageweight impact of your choices. The File Size Analysis tab will reveal details about the k-weight of the YUI components you've chosen to use. Note that the minified size is the size of the files as they are consumed by the browser; the gzipped size is the amount of data that is actually transmitted over the wire to the browser.