xy.css – Responsive Grid Design

Updated July 27, 2024 • 10 comments

For the past year or so, I’ve been heavy into responsive, grid-based design. In December, I “soft-launched” my new site, xyCSS with a simple tweet:

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

Features

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:

These key techniques coalesce in xy.css, providing the control, flexibility, and consistency required for responsive, grid-based design. To see some examples, check out the Demos.

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 @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 diagnostic techniques on your own web pages.

Visualize the xy matrix for any page on the site by clicking the “show/hide matrix” button

Responsiveness

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

Visit xyCSS for responsive, grid-based action!

Learn more..

Check out these links to learn more about xy.css:

I’ve also designed my new site with xy.css — check out WP-Mix.com for a fresh mix of code snippets and tutorials, delivered via responsive liquid grid. Learn more about WP-Mix!

Thanks for reading! :)

design websites

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.

10 responses to “xy.css – Responsive Grid Design”

Dan Shure 2013/01/16 6:58 pm

Jeff, this is phenomenal. Thanks so much for putting it together and sharing. We all know responsive is the way to go now, but this is ahead of the curve for sure. I love the collapsing circles – I think people are only scratching the surface of the potential for responsive.

I can only imagine the first ecommerce site to do something like this – unless you know of any examples?

Thanks again!

Jeff Starr 2013/01/16 11:12 pm • Post Author

Thank you Dan, and thanks for the tweets as well :)

I can’t think of any examples, but I’m sure by now it’s been done. Maybe someone else knows..?

Cheers!

airos chou 2013/01/16 10:03 pm

wa, i had knew from another site to intro your new site!

Jeff Starr 2013/01/16 11:13 pm • Post Author

Maybe from WP-Mix..? I’ll be announcing that site also this week ;)

Muskie 2013/01/16 10:59 pm

Interesting… (I typed Interesting… then hit tab and it took me to your search box.) Tab order of forms, the forgotten old school website usability optimization technique. Anyway I’ll check it out in depth tomorrow and it the mean time. I’ll Tweet.

Jeff Starr 2013/01/16 11:20 pm • Post Author

What is “the forgotten old school website usability optimization technique”? And, is there a better/newer way of doing it?

JeffM 2013/01/18 4:23 am

Impressive stuff, Jeff. You just can’t stay away from that bleeding edge, can you?

It’s definitely leagues ahead of 960grid and ooCSS, both of which I’ve meddled with in the past.

I’m curious to know your thoughts on the vertical grid technique adopted in TwentyTwelve (using rem units with pixel-equivalent fallbacks).

I’ve only just got my head around that and yes, it’s a chore to double-state everything but it does avoid the gotcha where em units cascade into nested lists.

How are you coping with that in xyCSS?

Jeff Starr 2013/01/18 4:27 pm • Post Author

Never used rem units, never had the need to go beyond pixels, ems, and percentages. I do like the TwentyTwelve theme but haven’t really looked at it too much. I think it’s great if the design is grid-based.. will now have to check it out.

Why use ems for lists? Using pixels works great for (nested) lists, so that’s how it’s done in xy.css. I think a lot of people are getting confused with too much talking and not enough doing.

Matt McDowell 2013/01/25 3:51 pm

What are your thoughts on using the generic font-family: sans-serif; versus font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;?

See: http://css-tricks.com/sans-serif/

Nel 2013/07/05 8:33 pm

Liquid works great. Love to hear your thoughts on keeping logos and images looking as they’re meant to look on small screens/mobile browsers.

Comments are closed for this post. Something to add? Let me know.

Dan Shure 2013/01/16 6:58 pm

Jeff, this is phenomenal. Thanks so much for putting it together and sharing. We all know responsive is the way to go now, but this is ahead of the curve for sure. I love the collapsing circles – I think people are only scratching the surface of the potential for responsive.

I can only imagine the first ecommerce site to do something like this – unless you know of any examples?

Thanks again!
- Jeff Starr 2013/01/16 11:12 pm • Post Author
  
  Thank you Dan, and thanks for the tweets as well :)
  
  I can’t think of any examples, but I’m sure by now it’s been done. Maybe someone else knows..?
  
  Cheers!
airos chou 2013/01/16 10:03 pm

wa, i had knew from another site to intro your new site!
- Jeff Starr 2013/01/16 11:13 pm • Post Author
  
  Maybe from WP-Mix..? I’ll be announcing that site also this week ;)
Muskie 2013/01/16 10:59 pm

Interesting… (I typed Interesting… then hit tab and it took me to your search box.) Tab order of forms, the forgotten old school website usability optimization technique. Anyway I’ll check it out in depth tomorrow and it the mean time. I’ll Tweet.
- Jeff Starr 2013/01/16 11:20 pm • Post Author
  
  What is “the forgotten old school website usability optimization technique”? And, is there a better/newer way of doing it?
JeffM 2013/01/18 4:23 am

Impressive stuff, Jeff. You just can’t stay away from that bleeding edge, can you?

It’s definitely leagues ahead of 960grid and ooCSS, both of which I’ve meddled with in the past.

I’m curious to know your thoughts on the vertical grid technique adopted in TwentyTwelve (using rem units with pixel-equivalent fallbacks).

I’ve only just got my head around that and yes, it’s a chore to double-state everything but it does avoid the gotcha where em units cascade into nested lists.

How are you coping with that in xyCSS?
- Jeff Starr 2013/01/18 4:27 pm • Post Author
  
  Never used rem units, never had the need to go beyond pixels, ems, and percentages. I do like the TwentyTwelve theme but haven’t really looked at it too much. I think it’s great if the design is grid-based.. will now have to check it out.
  
  Why use ems for lists? Using pixels works great for (nested) lists, so that’s how it’s done in xy.css. I think a lot of people are getting confused with too much talking and not enough doing.
Matt McDowell 2013/01/25 3:51 pm

What are your thoughts on using the generic font-family: sans-serif; versus font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;?

See: http://css-tricks.com/sans-serif/
Nel 2013/07/05 8:33 pm

Liquid works great. Love to hear your thoughts on keeping logos and images looking as they’re meant to look on small screens/mobile browsers.