Links of Interest
960 Grid System
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
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
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
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 =).
Loading ...
1
Lots of great info here Chris, specially that fading header effect. Thank you so much.
Comment by Jay Friedman — March 26, 2008 @ 6:27 am
2
These are just great. Thanks!
Comment by Janet — March 26, 2008 @ 7:32 am
3
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 : )
Comment by V1 — March 26, 2008 @ 8:43 am
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.
Comment by Anonymous — March 26, 2008 @ 11:53 am
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.
Comment by Anonymous — March 26, 2008 @ 11:55 am
6
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
Comment by Edwin — March 26, 2008 @ 2:00 pm
7
Hi Chris, do you know what fonts are used in the “960 Grid System” banner?
thanks
Comment by Valamas — March 26, 2008 @ 4:24 pm
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.
Comment by Chris Coyier — March 26, 2008 @ 7:17 pm
9
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?
Comment by Adrian — March 26, 2008 @ 9:25 pm
10
The 960 Grid System looks interesting but doesn’t seem to provide much over Blue Print…
http://code.google.com/p/blueprintcss/
Comment by Rob S — March 27, 2008 @ 3:38 am
11
For those interested, 960’s header uses the font FF Meta. I love it!
Comment by Adrian — March 28, 2008 @ 9:39 am