YUI 3.1.0 Preview Configurator (requires internet connectivity)
Results
Included Modules - Selected Modules Plus Dependencies
Select the modules you'd like to use on your page, from the lists below. The corresponding set of files you'll need to include along with the list of modules included, will be displayed above. NOTE: File size totals do not currently include the Skin CSS files.
Options
Modules
Sub Modules
- Click on a module row to view it's sub modules
Configuring Your YUI 3.x Implementation:
Seed Files and Self-Completion versus Static Implementations
There are two principal ways of putting YUI 3.x on the page:
- 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 module's User's 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.
- 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 theanim-color
submodule. Similarly, if you are taking this approach (and will not be loading any YUI files dynamically you may not need theget
andloader
submodules for the YUI component, and you can save pageweight by just includingyui-base
.
Using the Dependency Configurator
The new YUI 3.x 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'sget
andloader
submodules. - Explore the pageweight impact of your choices. The Page Weight Analysis tab will reveal details about the k-weight of the YUI components you've chosen to use. Note that the minified weight is the size of the files as they consumed by the browser; the gzipped weight is the amount of data that is actually transmitted over the wire to the browser.
More About Files Hosted by Yahoo!
You can read more about using YUI files directly from Yahoo's servers on YUI's main Configuration and Hosting page.