Dont Trust This Guy why not take my word for it? A blog by Jim Jeffers

It’s been too long since I’ve written anything on this blog. Fortunately, I’ve had the opportunity to work on a few interesting projects in the last couple of months. The one I’m sharing with you today was done as a surprise for the Ignite Phoenix team and the community in general.

Visually Phoenix

On the surface I’ve tried to incorporate colors and tones more representative of Phoenix. You’ll find illustrative elements resembling our city as well. The site headline contains the Phoenix skyline – as does the site footer. I’ve also made a minimalist illustration of the Tempe Center for the Arts; the amazing venue hosting the event.

More notable however is the extensive use of transparency used throughout the site. This was achieved with PNG images and rgba color values in the CSS. For viewers in IE7 and IE6 these features have been gracefully degraded. Indeed the entire design and build of this site was an extensive exercise in progressive enhancement.

Overflowing with CSS Tricks

A lot of tricks with overflow and absolute positioning were used to achieve various effects throughout the site. For instance, the three flickr images shown in the intro content are cropped by a containing element. The border around them is achieved with rgba transparency to create a unique effect for those who are visiting the site with modern browsers.

Getting Inline with Block

Another fairly simple CSS feature I took advantage was the ‘inline-block’ display mode. A well supported CSS feature that I’ve not used to much extent prior to this project other than a work around when we ran into layout complications. In this case I was able to use rgba transparency and ‘inline-block’ to create a pretty neat highlighting effect. I also liked how I was able to make elements of different formats run into each other quite naturally with this display mode.

Advanced Positioning

Nearly every major element of the page is absolutely positioned so that we could achieve a fluid layout that spans the entire width of the browser window but meets gracefully in the center. The content itself is contained in a 960px grid from the 960.gs system. To use absolute positioning so extensively we had to hack some magic with some simple jQuery:

function ensureAboveEachOther(onTop,onBottom,spacing){
   if(onTop.length > 0 && onBottom.length > 0) {
      onBottom.css('top',onTop.position().top+onTop.height()+spacing);
   }
}

A Navigation That Watches You

The main content of the site is presented in a single page layout. So naturally, it works just fine without javascript as the nav anchors point to targets on the page. However, for a better experience I’ve implemented some smooth automated scrolling via jQuery. Still though, it helps to know what section you’re in, and these fixed position navigations fail if they don’t update as the user scrolls out of the current section. Again, jQuery is here for the rescue:

// Setup scrolling selector update.
      var scrollTarget = $(window);
      scrollTarget.scroll(function(){
         // TODO:
         // Refactor this into a nice function sometime later.

         // About
         if(scrollTarget.scrollTop() > about.position().top-100 && scrollTarget.scrollTop() < venue.position().top-100) {
            $('#primary_navigation li.about').addClass('current');
         } else {
            $('#primary_navigation li.about.current').removeClass('current');
         }
         ...
   });

A Big Thanks

Overall I'm really pleased with how the site came out. I have to thank Tomas Carrillo who went out of his way to make sure that this project got to see the light of day. Though I did all of the work to create and build the theme, there was a considerable amount of work done to make sure the theme wouldn't break existing content on the site. If Tomas didn't make the time to do this the theme would have sat on the sidelines as nothing more than a pretty concept. This is for everyone who is involved as an organizer, sponsor, speaker, or community participant just coming to see the event. I hope you enjoy it and see you in June!

One More Thing

Since this is a community project the entire source for the wordpress theme is available on GitHub. Feel free to check it out!

• Visit the new Ignite Phoenix website!
• Grab the Theme Code Off GitHub