Bringing it all together: https://perishablepress.com/xycss/
As implied (and explained),
xy.css is a lightweight CSS template for creating semantic HTML5 designs on a responsive liquid matrix.
At its core,
xy.css neutralizes rogue browser styles, combines horizontal and vertical grids, and provides a flexible template for responsive design. From there,
xy.css facilitates clean, device-neutral designs with a complete set of preset classes for easy layouts via grid-based columns and rows.
My new baby has eight circular and symmetrically positioned heads
xy.css brings together the best CSS techniques from around the Web and integrates them into a single, powerful stylesheet template. As showcased on the home page:
- Liquid layout
- Vertical grid
- Horizontal grid
- Responsive design
- Progressive enhancement
- Custom fonts
- Semantic markup
- Universal support
So that’s it in a nutshell:
xy.css is a CSS template for responsive grid-based design. It’s all open source and very much a work in progress. The plan is to bring a few like-minded individuals on board and take it to the next level. Drop a line to learn more.
Custom fonts displayed on the vertical grid
About the site
The site itself — xy.css — is built with WordPress, HTML5, CSS3 and of course
xy.css. To help visualize the responsive, grid-based design, the site includes numerous on-page tools:
- 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 diagnostic techniques on your own web pages.
Visualize the xy matrix for any page on the site by clicking the “show/hide matrix” button
Here are some additional screenshots demonstrating the responsiveness of xy.css.
For large screens, the main menu is positioned on the right side of the content
As screen width decreases, the menu items rotate 90 degrees to optimize space
For smaller screens, the menu slides to the top of the page to further optimize space
For increasingly smaller screen sizes, the menu items begin to “squish” together, which is fun to watch
And of course all of this responsiveness is perfectly aligned with the liquid matrix (horizontal and vertical grid). Here’s one more for the road..
The eight circles on the xyCSS homepage collapse into menu items for smaller screens
Check out these links to learn more about
Thanks for reading! :)