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 xy.css 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? Jeff Starr is a professional developer, designer, author, and publisher with over 10 years of experience with WordPress. His books include Digging into WordPress, .htaccess made easy, The Tao of WordPress, and WordPress Themes In Depth. Jeff also writes tutorials on WordPress, web development, security, and much more at Perishable Press, DigWP.com, and WP Mix.
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
@mediarules - 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:
..and Premium WordPress plugins:
