Grow your CSS skills. Land your dream job.

Links of Interest

Published by Chris Coyier

960 Grid System

960.jpg
Nathan Smith has launched a CSS framework called the 960 Grid System. The theory is that 960 pixels is a great number for a fixed width site, because it fits nicely onto a 1024px screen and is evenly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it ideal for splitting into columns for designing grid based layouts. There is a lot to like here. Grid based design is great and if this helps you get started with that, go for it. There are even templates included here for many professional design programs. Personally I don't like using frameworks like this because there ends up being more that you don't use that what you do use. Plus you get code with stuff like <div class="grid_12"> in it, which I find terribly unsemantic. Thanks to Edwin for sending this in!

 

Create a fading header

fading-header.jpg
Swedish fika has a post on how to create a fading header. They are using jQuery to fade an image into another image as a rollover effect. Very simple and very cool effect, makes me jealous =). Check out the example page.

 

Flexigrid

flexigrid.jpg
While we are looking at cool jQuery stuff, check out Flexigrid. This is a table framework for adding some interactivity to otherwise boring tables. I've always been a big fan of Alan Grakalic's Tablecloth, but this is also very cool. It has the ability to "turn on" multiple rows which Tablecloth doesn't do.

 

Waitable Bookmarklet

waitable.jpg
In Non-CSS news, my friend Richard has released a cool addition to Waitable, a bookmarklet. The theory of Waitable is that all products eventually drop in price, so you can add products to your wait list and when the product drops to that price, Waitable will let you know. Now instead of having to go to Waitable to add products to your list, you can just click the bookmarklet while you are on an Amazon.com page, enter the price, and you are done! Pretty sweet way to shop, start marking those Christmas present ideas now =).

Comments

  1. Jay Friedman
    Permalink to comment#

    Lots of great info here Chris, specially that fading header effect. Thank you so much.

  2. Permalink to comment#

    These are just great. Thanks!

  3. Permalink to comment#

    Downloaded 960, looks ‘good’, especially the part where i deleted all the files except the photoshop lines. If u gonna use grid layoutst.. atleast code it your self, much more setishfaction at the end.

    Im not a huge fan of jquery, but the tuts are allright : )

  4. in it, which I find terribly unsemantic

    why?

    it is a 12 pixel grid, whats unsemantic abt that ? not using li for menus etc. is unsemantic, not this imho.

  5. in it, which I find terribly unsemantic.

    why? whats unsemantic in this?

    while we are at it, what do you REALLY mean by unsemantic? cos the word seems to get bandied around pretty easily.

  6. Edwin
    Permalink to comment#

    Flexigrid looks great, it’s still a beta, I wonder how it will be improved in the coming time :) I now use zapatec grid, but this looks like a great alternative

  7. Valamas
    Permalink to comment#

    Hi Chris, do you know what fonts are used in the “960 Grid System” banner?

    thanks

  8. @Anonymous: Semantics in HTML mean that the tags and classes/IDs that describe the page element in a way that refers to what it IS, not what it LOOKS like. For example, using class=”callout” is more semantic than class=”big-and-red”. In this example, class=”grid_12” is describing the specific size of a section, not what it IS (perhaps it’s a sidebar?). This is to future-proof your CSS. If someday that item that is “big and red” really should be small and green, your class name is now entirely irrelevant while if it was “callout” you’d be all good.

    @Valamas: Unfortunately I don’t know what that font that is, but it sure is nice! If you find out let me know.

  9. Permalink to comment#

    I’m loving all the tutorials using scripting out there. I’m working away from using flash for the web. That jQuery header is sweet! Correct me if I’m wrong, but from what I understand the jQuery library is more compact than others. Anyone know anything regarding this?

  10. Rob S
    Permalink to comment#

    The 960 Grid System looks interesting but doesn’t seem to provide much over Blue Print…

    http://code.google.com/p/blueprintcss/

  11. Permalink to comment#

    For those interested, 960′s header uses the font FF Meta. I love it!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".