Notice the inclusion of the xy.css stylesheet in the <head> section. Double-check that the file path is correct.

To create a responsive liquid design, we need to define all structural widths as percentages. Then, to base the liquid design on a horizontal grid, we need to choose a base layout width.
Referring to the grid chart included in xy.css, let’s say we choose a 12-column layout, which has a width of 984 pixels. Before applying this width to the <body> element, we subtract the widths of the right and left margins:

body width:984px - (24px + 24px) = 936px

So we have 984px as the total width and 936px as the body width. To enable liquid layout, we convert these values to percentages:

total width:(984 / 984) x 100 = 100%

body width:(936 / 984) x 100 = 95.121951%

We may now use these numbers to calculate the percentage widths of their child elements, <header>, <article>, <aside>, and <footer>.
For each of these elements, we choose a number of grid units from the xy.css grid, subtract margins, and divide by the <body> width (936px):

aside (4 grid units): (312 - 24) / 936 = 30.769231%

article (8 grid units): (648 - 24) / 936 = 66.6667%

header/footer (12 grid units): 936 / 936 = 100%

Too much work? Check out the preset classes in the xy.css stylesheet. Also includes notes and tips on usage.

We’ve now established the mathematical basis for our horizontal liquid grid. This enables us to add the following CSS rules to our stylesheet:

These structural styles ensure our layout will remain proportional as the browser/screen changes size. The same formula may be used to define widths for any element on the page. To get a better understanding, check out some examples. Now let’s set up the vertical grid..

Step 3 : Vertical Grid

The vertical grid applies to typographic properties such as font-size and line-height, as well as anything with vertical definition such as margin and height. To see how this works, let’s flesh out our hungry markup with some lorem-ipsum text using heading and paragraph tags:

Don’t let the math scare you. It takes some time at first, but gets easier with practice. Or, just use the pre-defined classes.

With this baseline in place, the main thing to remember is that all vertical distances such as font-size and line-height must be some multiple of the default line-height, 18px (equivalent to 1.50em). So to style the heading and paragraph tags in our working example, we calculate font-size, line-height, and margin:

font-size = (desired font-size) / (default font-size)

line-height = (desired line-height) / (default line-height)

margin = same as calculated line-height

To make things easier, I’ve created a list of copy/paste font styles for all evenly numbered font sizes, 8px – 64px. To style our example, we copy/paste some rhythmic font styles into the typography section of xy.css:

At this point, we can see both vertical and horizontal grids in the basic example we’re building here. Notice that the <header> and <footer> text inherits font-size and line-height from those defined for the body selector. Once you’ve got your typography styled, it’s time to get responsive.

Step 4 : Responsiveness

With your design locked into the xy.css matrix, resizing the viewing screen will fluidly rearrange layout widths, but typography, images, and other elements will remain fixed in size. This is where responsive design comes into play. Using @media queries that target devices based on width, height, print, and other properties, we can scale font, image, and other properties while keeping the grid. For example, let’s scale the typography of our working example. We add the following CSS to xy.css:

Values highlighted with yellow are multiplied by a factor of 1.5. Values in white are multiplied by a factor of two.

With these CSS media queries in place, our example typography will scale to fit their target devices. The xy.css framework includes an entire set of standard @media queries. You may also create your own custom queries as needed. Going further with the design, we could further enhance the user-experience by doing things like changing/rearranging the number of columns for larger screens, and delivering a single-column layout for smaller screens.

Designing with xy.css

Once the basic structure and typography is established in the xy.css file, you’re ready to continue styling our design to make it awesome. To help keep things organized during development, I suggest putting all of your non-structural styles in a separate stylesheet. You can always combine and optimize them for the production site.

Consider xy.css as a blank canvas — a starting point for clean, semantic, grid-based design.

Visualizing the matrix

To visualize the liquid matrix, download the jQuery plugin and include in your web pages. To see it action, click the “show matrix” button in the top-right corner of the screen. Works great in all browsers except IE less than 9. And speaking of good ol’ IE..

Support for Internet Explorer

So what about Internet Explorer? IE keeps the grid surprisingly well. The vertical typographic grid works great, but IE’s many bugs will break the horizontal layout grid in most cases. So if you’re seriously concerned with older versions of IE (pre-9), working out the layout bugs is the best way to maintain the xy liquid matrix. Examples of CSS support styles for IE may be seen in the ie.css stylesheet included with each demo.

The main thing older IE doesn’t do is @media queries, which means no responsive design out of the box. I haven’t found it yet, but I’m sure there are ways of bringing media-query responsiveness to good ol’ IE. Shout it out if you know any solid solutions.

More information

For more information and tips, check out the demos and their associated source codes. Another good resource is the CSS and markup used to design this site, which is entirely based on a (heavily commented) xy.css stylesheet. WP-Mix is another site designed with xy.css. I also invite you to subscribe to Perishable Press, where I’ll be posting tricks and tips for designing with the liquid grid (and other cool web design stuff).