CSS-Tricks PSD to HTML: You Design - We XHTML

Archive for the 'Freebie' Category



GridControl: The Bookmarklet

Reader Sansan generously worked up my little GridControl idea into a javascript snippet that was very simple to make into a bookmarklet.
Just drag the link button below up into your bookmark bar, and then click to activate on any webpage. Pretty sweet! Click once to turn on the grid, click again to turn it [...]

GridControl: A Grid Overlay System for Design Development.

Designing by grid is as old as design itself.
Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet through screens that appear right in [...]

Roundup of Design Galleries

I have a Happy New Year’s gift for all you CSS-Tricks readers! It’s a big roundup of all those web design galleries that are so popular these days. I’ve been wanting do a round of these for a while, and then when I finally started looking into it I found that there are tons and [...]

Super Simple Two Column Layout

Reader Blake writes in:
What I’m trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a main content block that fills up the rest of the width. So far, fairly standard… nothing [...]

Centering List Items Horizontally (Slightly Trickier Than You Might Think)

The current standard in coding menus is unordered lists. It’s not as semantic as a <nav> tag would be, but it’s not that bad. Navigation is, after all, a list of sorts.
If you want to make this navigational unordered list horizontal, you have basically two options:

Make the list items inline instead of the default block. [...]

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.