Posted on Leave a comment

How I Call YUI CSS Grids in My Hybrid WordPress Theme

I have found there are four ways so far. The first one is by calling it via google.com cdn library simply by using “google.load(“yui”, “2.7.0”); just after the <body> tag in my blog theme header. This looks very simple and the easiest one, but I must admit, I have not yet used this even once. I cannot give any opinion on this. I will do so sometime later.

The second method is commonly used, directly calling the link like this on the header.php of the theme.
<!--Include YUI Loader: -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yuiloader/yuiloader-min.js">
</script>

This is just to call the library. After that we need to call the functions or the reasons we called YUI Library as follows:
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
require: ["utilities","container","tabview","reset-fonts-grids","datatable"],
onSuccess: function() {
//instantiate your DataTable here...
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script></code

We can see here, we are calling “reset-fonts-grids”, “skin”, “tabview” and whatever functions we want to use in our blog.

I have used this method for long time now and I have developed some child-themes using this method. However, as commonly known, this is not the way that most bloggers would recommend us to call a JS or CSS library.

Then I used a third way, that is, using “media.php” file under the ‘functions’ folder of my them. If you are familiar with our Hybrid Theme Framework, then you will know what I am talking about here. This “functions” folder is my Hybrid Child Folder, under /library/ folder. In fact my Hybrid Child Themes also use the same structure as the Hybrid Theme folders.

In media.php file, I call any library I would like to call, I register those js, then I enqueue them

wp_enqueue_script( 'yui-utilities' );
wp_enqueue_script( 'yui-tabview' );
wp_enqueue_script( 'yui-bubbling-core' );
wp_enqueue_script( 'bubbling-dispatcher' );
wp_enqueue_script( 'bubbling-accordion' );

I want to use YUI Tabiew and bubbling core, that helps my theme to display tooltips, as you can see in this theme. That is why I call YUI ‘utilities.js’ and then YUI ‘tabview.js” plus bubbling ‘core.js’

A third way of calling YUI Library is directly from the theme functions.php, by adding ” add_action(‘wp_enqueue_scripts’, ‘yahoowp_init’, 11 );” For this function, then I will use

if ( ! function_exists('yahoowp_init' ) ) {
 function yahoowp_init() {

The last way is to call it from a WordPress Plugins folder. I created the media.php file and changed it into a plugin, then I activated the plugin in order to call the Yahoo! UI Library that I needed. I think I will dig more into this method in order to keep my child theme clean so that it can be easily updated.

I will explain more on what these “calls” or “functions” do to my Hybrid WordPress Child Themes in separate entries.

Posted on Leave a comment

Crash Course: YUI Grids CSS

The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often left unnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries. Today, I’d like to give you a tour of the YUI Grids CSS library.

Why?

Why should you even consider using the YUI Grids CSS library (hereafter referred to a “YUI grids”)? What makes it stand out? I haven’t looked extensively at other grids libraries, but I find these things compelling:

  • YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could come back to your code in a month and know which parts are from YUI and what each piece does.

  • This reduces your load twice: no need to host the file on your server, as well as faster page loading if the client has the file cached.

  • Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.

  • With multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layout combination . . . all in less than 5kb.

Of course, YUI grids isn’t perfect. It’s a bit limiting when it comes to the pre-baked sidebar widths; however, if they suits your needs, you’ll save plenty of time, coding, and headaches when laying out your site.

Complete Guide: HERE

My Notes:

I think this is the most useful article that I have ever read regarding how to use YUI CSS Grids for my website templates. This is why I am also posting this as a separate page on this blog, as this is the core issue I am promoting in this blog, i.e., implementing YUI CSS Grids in my wordpress themes.

 

Posted on Leave a comment

YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme
YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme. This is my first WordPress Theme based on YUI CSS Grids. It comes with 8 selectable color schemes, 5 different page widths and 6 combinations of page layout.

Color Schemes:

  • dark blue
  • facebook
  • green
  • greenish
  • orange
  • purple
  • red
  • tan blue

Page Widths:

  • 750px Centered
  • 950px Centered
  • 974px Centered
  • 100% Fluid

Page Layout

  • Left Sidebar, 160px
  • Left Sidebar, 180px
  • Left Sidebar, 300px
  • Right Sidebar, 180px
  • Right Sidebar, 240px
  • Right Sidebar, 300px

Download YUI CSS Grid WordPress Theme.

Customize your theme using the WordPress Dashboard menu Themes > Customize Theme after installing this theme.