YUI Dependency Configurator

The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.

Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.

So instead of:

<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> 
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> 
<link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css">
 
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="lib/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="lib/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="lib/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="lib/yui/selector/selector-min.js"></script>

You can use the YUI Dependency Configurator to create::

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>

Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.

You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks