CSS Grid Frameworks – The What/When/Why/How

CSS Grid Frameworks such as Blueprint and 960 Grid System have been getting more popular. I recently download a wordpress theme that was built with 960gs and I was delighted with how easy it was to use. I’ve always been a huge fan of building my own css, but being organized and separating the stylesheets by text, layout, forms, etc. I have looked at some other frameworks, but these two seem like the only ones I would use because of their simplicity and the community around them.

Why should I use a framework?
Do you feel like you spend a good amount of time designing, then an equal amount of time coding those designs? With frameworks, you can cut your coding time down by half. Why half? With a framework, you can knock out the basic layout using a grid system which is cross-browser compatible (ie6, ie7, FF, Safari, Chrome) and then focus on your custom style sheet.

How to use a framework?
The first time I used Blueprint, I started using it after I had designed my page – I was essentially retro-fitting Blueprint to my design. I would not recommend using Blueprint in this way, I felt restricted and was annoyed with Blueprint. I ended up making it work, but wasn’t ultimately happy. The best way to use a framework is from the beginning, before you start designing setup your grid – it makes a world of difference! Blueprint has some great resources for setting up grids for use in Photoshop and Illustrator.

When to use a framework?
Anytime! I have been using the 960gs framework for landing pages because of its small footprint (3.6kb) and quick ability to get up and running. I love the confidence of knowing the layout will work cross-browser, so it allows me to get my designs up and running fast (very important! in web).

Stay tuned for a more in-depth look at both of these frameworks and a redesign of this blog using Blueprint!

jQuery Image Cloning Script

I recently ran into an issue at work where we have been spending countless hours making 6 and 12 bottle shots by hand in Photoshop. We would take one bottle and copy/clone it over 6 or 12 times, then save and resize the image for the web. It became so repetitive that I created a little script that would do the same thing, but only using one image and some fancy jQuery.

Here is my script:

JavaScript and jQuery

    
    
    

CSS to float the images left:

    

HTML to display the images:


	

See it in action:
jQuery Bottle Clone Example

jQuery Highlight Navigation Menu v.01 Script

A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state.

Here is the code:


// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.

// ----------- highlight tab function -----------
    var path = location.pathname;   

    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() { 
        $(this).addClass("selected");
    });
    

Feel free to adapt and use this code on your site, I would appreciate it if you could leave my comments in as the creator in the .js file. If you are unfamiliar with how jQuery works, you can read this tutorial which will get you up to speed!

jQuery Highlight Script (1749)

Appcelerator Titanium – The Future of Open Souce RIA

Yesterday, I received an email from Appcelerator, informing me of a new product of theirs called Titanium. Appcelerator Titanium is an open source RIA platform for developer desktop web apps, similar to the Adobe AIR platform, in that it uses standard, common web languages such as html, css, and javascript. That is what caught my eye, as I’ve read a few books on flex and messed around a bit, but I already know the ins and outs of html/css/javascript. Thats my everyday toolkit for building websites and user interfaces. I ventured onto their website, and watched a few screencasts and then downloaded the demos, which included a twitter and youtube demo.

After checking out the demos sourcecode, I was pretty damn impressed. I thought to myself, “What’s next? How do I start? “. I found the SDK, but just the word SDK can be a little daunting for a web developer, I like to think of it as more of a WDK or Web Development Kit. So I downloaded it, installed it, and followed a screencast from their website to generate my first app. It took about 20 min from start to finish, and Voila! I had a sample app running from an installer. Amazing!

My past experience with Ruby on Rails also helped, as the setup of the app is very similar to that of a ruby on rails project. The terminal commands were easy, and the ability to create installers for OSX, Windows, and Linux were kickass! The documentation was also excellent for such an early release, I only ran into one bug on windows, but I think it had to do with Chrome support for my code, so it could have been a self-inflicted bug and not a Titanium bug.

One of the most desirable things about Titanium is that it has the jQuery library built-in, AWESOME! So I decided to dedicate 2 hrs to messing around in Titanium to see just how far I could get. Well, in 2 hrs I built a little desktop app that allows you to play 6 videos through a custom flash player that are streamed from the web. I basically re-used code from another project that utilized flash, jQuery, and html/css to see if it would work and how fast I could get something up and running. Its not anything I would release to the world, but it really opened my eyes up to how fast I could get something done and the possibilities that Titanium have opened for me.

I’m ready to sell my books on Flex, remove Flex builder from my desktop and go all out on Titanium. What does Flex give me that Titanium doesn’t, and if there is something – then Im sure the guys at Appcelerator will be adding soon enough, as this is just a Preview Release.

So if you haven’t yet checked out Appcelerator Titanium, I highly encourage you to do so.

Thank you Appcelerator!

Also, today someone posted great article on The similarities/differences of Appcelerator Titanium and Adobe AIR

Top 10 Job Websites for Open Source Web Designers and Developers

If you are a web designer, front end developer and/or an open source web developer looking for a job or freelance work, there are many websites online with job postings targeted to just what you do. Here is the top 10 in no particular order that I have found, used and highly recommend.

1.

Sensational Jobs offers freelance and full-time jobs for web professionals.

2.

Fresh Web Jobs targets web designers and developers that are looking for freelance and/or fulltime opportunities.

3.

From the creators of Basecamp and Backpack, the 37 signals job board is a great place for web designers and open source developers to find jobs.

4.

Creative Hotlist is a great resource for finding creative jobs, they also offer a place for you to host your online portfolio.

5.

Authentic Jobs was created by Cameron Moll, a revolutionary in the CSS/Web Development space. His site is a great place to search/find web design and development positions across the USA.

6.

Think Vitamin is an online publication/resource for web designers, they also have a jobs section for css/web designers looking for work.

7.

Freelance Switch is the ultimate resource for freelancers. They have an extensive freelance job board where you can apply to jobs for $7/month, but its free to post jobs.

8.

Slashdot is a more general web developer/programmer job board, their tagline is “Jobs for Nerds”.

9.

Krop is a site dedicated to listing creative and tech jobs, they have a history of listings for many notable fortune 500 companies such as Facebook, New York Times and Apple to name a few.

10.

Coroflot is similar to Creative Hotlist in that they offer job listings and portfolios, its like a community for creatives.

This list is comprised of the most popular open source web designer and developer job boards, if you see a site that fits into this post and you believe should be added, please let me know.

JobPile aggregates all of the above job sites into one site, allowing you to search all of them in one place. Its a great site!

Beautiful Cascading Stylesheets

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs.

Instead of creating ids or classes like, lefttop-red-text – its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. “mainnavigation” is better than “leftnavigation”. Use “.copyright” and “.pullquote” instead of “smallgrey” or “indentitalic”. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

    Some other online resources:What\’s in a name?
    Good Class NamesCSS Naming Standards

CSS Naming Standards

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs. Instead of creating ids or classes like, lefttop-red-text – its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. #mainnavigation is better than #leftnavigation. Use #.copyright and #.pullquote instead of #smallgrey or #indentitalic. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID. Some other online resources:
    What\’s in a name?
    Good Class Names