RD - riccardodegni.net | Blog

Before starting the tutorial, I would like to thank Dion Almaer of Ajaxian for his kidness and for having dedicated a post about the GX framework (which I appreciated very much) as well as all the users that downloaded and are downloading GX in these days. I’m glad to report here the responses directly from the Download Counter:

• Friday: 288
• Saturday: 493
• Sunday: 637
• Monday: 894
• Tuesday: 1026
• Wednesday: 1081

I’m very happy to read the data informations placed above and I hope you’ll enjoy GX in all its features.

Now stop talking and let’s start the tutorial!

Handling hexadecimal notations

As you probably have read from the Docs, with GX you can handle CSS colors in a variety of ways, one of which includes the hexadecimal notation, either full and short. See the following example:

// full-hex notation
$('el').gx({color: '#ff00ff'}, 2000, 'Bounce');

// short-hex notation
$('el').gx({color: '#f0f'}, 2000, 'Bounce');

Obviously, both the previous examples will give the same result.

Handling Array notations

Another way for handling colors with GX is to use the Array notation. See the following:

// animate to white
$('el').gx({color: [255, 255, 255]}, 600, 'Elastic');

// animate to blue
$('el').gx({color: [0, 0, 255]}, 600, 'Elastic');

// and so on...

As you can see, using the Array notation can be very useful, like in the case you know exactly the r, g and b percentages (probably it represents the best choice for some particular Plug-Ins based on GX).

Handling Custom colors

The real killer feature of handling colors with GX comes with the Custom Colors, or color keywords. GX has in fact the capability to handle color “strings” or well, “keywords”, and has 5 internal core values that you can actually use: “red”, “green”, “blue”, “black” and “white”.

// predefined color keywords
$('el').gx({'color': 'white',
            'border-color': 'blue'});

Moreover, you can add additional keywords by extending the GX.Color.customColors object, like for example, the CSS standards colors:

// adds the 'fuchsia' and 'aqua' colors
Fns.Extend(GX.Color.customColors, {
  fuchsia: [255, 0, 255],
  aqua: [0, 255, 255]
});

// let's use them!
$('el').gx({'color': 'fuchsia',
            'border-right-color': 'aqua'});

In this code snippet I used the internal Fns.Extend method to extend the GX.Color.customColors object to be more consistent with the GX syntax, but you can extend it in every way.

Of course, if you don’t remember exactly the required Array notation, you can use the GX.Color.cssToRgb method and pass the hex notation as string to it: GX will do the dirty job for us:

// adds the 'coral' and 'chocolate' colors
Fns.Extend(GX.Color.customColors, {
  coral: GX.Color.cssToRgb('#ff7f50'),
  chocolate: GX.Color.cssToRgb('#d2691e')
});

// let's use the new color keywords!
$('el').gx({'color': 'chocolate',
            'border-left-color': 'coral'});

Let’s use our Custom colors!

Although it’s possible to extend the GX.Color.customColors object by adding the standard colors, the amazing feature comes when you add YOUR custom colors!

For example, if you have a template with a specified color scheme and you have to create animations for handling these colors, it can be very tedious to repeat the same operation more than once by writing redundant code as in the following snippet (I picked the color values directly from my template, for the sake of convenience):

// first script...
$('el').gx({color: '#a18385'})
       .gx({color: '#aab3c2'})
       .gx({color: '#a18385'})
       .gx({color: '#aab3c2'});

// second script...
$('otherEl').gx({'background-color': '#a18385'})
            .gx({'background-color': '#aab3c2'})
            .gx({'background-color': '#a18385'})
            .gx({'background-color': '#aab3c2'});

Sure, it’s tedious.

Of course, you can create your personal color keywords and use/reuse them in all the pages of your application. For example, in my case, I created a new file called myGXColors.js that contains my personal custom colors. It’s like the following:

/* myGXColors.js */

// RD Theme Colors
Fns.Extend(GX.Color.customColors, {
  RDviolet: GX.Color.cssToRgb('#a18385'),
  RDdark: GX.Color.cssToRgb('#aab3c2')
});

Then, I put the script in my pages and I’m done:

<script src="jquery.js" type="text/javascript"></script>
<script src="GX.js" type="text/javascript"></script>
<script src="myGXColors.js" type="text/javascript"></script>
<script type="text/javascript">
// ...
// first script...
$('el').gx({color: 'RDviolet'})
       .gx({color: 'RDdark'})
       .gx({color: 'RDviolet'})
       .gx({color: 'RDdark'});
</script>

As you can see, this technique allows you to modularize your code and vastly reduces redundancy. If later, for any reason, you need to change your template or its color scheme, you won’t have to worry about changing values in all scripts, you will only have to update the myGXColors.js script and you’ll be done.

Conclusion

In this tutorial we have learnt how to handle CSS colors with GX in all the features offered by it.

As usual, if you have any doubt, suggestion, tip or whatever you want, don’t hesitate to post them here.

GX, Javascript, Tutorials GX, Tutorials