What? This website is all about responsive, grid-based design. Here is a general overview of the site:
- Home page – visual overview
- Overview – written overview
- Documentation – how to use xy.css
- Downloads – download xy.css
- Demos – designs made with xy.css
- Tools – resources for grid-based design
- Blog – posts about grid-based design
Why? Because I enjoy designing on the grid, and wanted to bring together all of the greatest design techniques:
- Custom fonts
- Horizontal grid
- Liquid layout
- Progressive enhancement
- responsive design
- semantic markup
- Universal support
- Vertical grid
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
- 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.