xy.css

About

What, Why, When, Who, & How

What? This website is all about responsive, grid-based design. Here is a general overview of the site:

Why? Because I enjoy designing on the grid, and wanted to bring together all of the greatest design techniques:

When? I first got into web design back in 2000, started doing responsive design in 2009, then grid-based design in 2010, and then finally brought it all together with xyCSS.com in 2011. Now in 2012, I have refined the application of these techniques and streamlined the process of grid-based design with xy.css — a lightweight and extensible CSS framework for responsive, liquid-matrix design.

Who? xy.css is the ongoing work of Jeff Starr, author of .htaccess made easy, co-author of Digging into WordPress, web designer at Monzilla Media, blogger at Perishable Press, and creator of xy.css and WP-Mix. You can follow Jeff on Twitter or get in touch.

How to use the site..

  • Upper-left corner – displays the current browser width
  • Upper-right corner – buttons for showing/hiding the grid
  • Lower-left corner – displays the current @media rules
  • Upper-right corner – “Top” button

To view the vertical grid, click the “show matrix” button. To see the horizontal grid, resize the browser width to 984px and click the “layout grid” button.

Visit Tools to implement any of these techniques on your own web pages.

Show support, check out my books!

Digging Into WordPress .htaccess made easy The Tao of WordPress