Coming Soon: Updated jQuery, Global CSS and an Interview with Peter Griffin!

Gwen Heimburg 8/10/10 1:36 PM

0 page views

OK, everything but that last part is true.

One of my summer projects was overhauling the global CSS and JavaScript. If you're unfamiliar with the concept of these global files, they are used throughout our partner sites to help create the look of your site.

If you're well-versed in this lingo, keep reading. If you're not, know that we've made great strides to optimize the page-load time of your site this summer. We did so by minimizing requests to the server and streamlining our global scripts, files and code.

The main objectives were to eliminate redundancies, reduce HTTP requests, and decrease file sizes. This is all very behind-the-scenes stuff, but there are a few things worth noting. The updates will go live with the next code deployment.

JavaScript Overhaul:

We run jQuery for all our JavaScript needs on CP5. In this update we removed any unnecessary JS files from the servers, combined several files to reduce HTTP requests and minified all the files to reduce their size.

As I mentioned, most of these changes will not be noticable on the front end. However, one change will be. I've added in a new jQuery plugin named "Equal Heights". This script has been integrated into the Tabs Element's auto-rotate state. Now, when you select auto-rotate on the tabs element, the height of the tab box will be automatically set to the height of its tallest tab. No more page jumping, fixed-height settings or teaser-tweaking for you.

I've also added a few more jQuery plugins that will not be integrated into elements, but can be invoked easily without having to upload the script to your site.

  • jCarousel - Turn your spotlight element into a carousel with a piece of script. Many schools already have this implemented on their sites - check it out on The Daily Gamecock. (Tutorial coming soon)
  • JQuery UI Accordion - Save space by turning elements into an accordion with this script and some HTML/CSS. Check this out in action on the Daily Orange. (Tutorial coming soon)

Global CSS Overhaul:

The goals for the Global CSS were pretty much the same as for the JavaScript - reduce, remove, re-awesome. I removed all unnecessary CSS files, combined everything possible into the file and minified it. Instead of a separate print.css file to manage how browsers print your articles, I've implemented the @media print function.

Also, the number of selectors used in the Global CSS have been reduced. For example the current list of selectors for the Tab Box navigation anchor is: 

div.yui-skin-sam div.yui-navset ul.yui-nav li a { }

This has been reduced to:

.yui-nav li a { }

Removing unnecessary selectors, combining files and minifying the files all help to reduce file size, HTTP requests and improve the load time of your site.

The most noteworthy change is that all global images are now referenced as a single global sprite. If you're not familiar with CSS sprites, check out this explanation.

One very important note: If you are currently referencing any global images in your local CSS those references will break during the next update. Any image reference in your local CSS that starts out like this /polopoly_fs/7.107!/... should be removed/fixed prior to the update. The images uploaded to your local stylesheet will not be affected!

Gwen Heimburg is CMN's CSS and JavaScript guru. She also appears to have an affinity for "Family Guy ."


Read all comments

Add comment