Here is a more detailed guide to using xy.css. This walkthrough assumes that you’re familiar with CSS and comfortable using basic math ;)
Step 1 : Download & Setup
The xy matrix is contained in a single stylesheet. To see how it works, check out some demos. Here’s how to get started:
- Include xy.css
- Optionally include visual matrix
- Optionally include other tools
After including xy.css, stick HTML elements to the xy matrix as described in the following steps.
Step 2 : Horizontal Grid
Let’s say we have a basic layout using HTML5 markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xy.css" media="all">
</head>
<body>
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</body>
</html>
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%
We’ve now established the mathematical basis for our horizontal liquid grid. This enables us to add the following CSS rules to our stylesheet:
header, footer { width: 100%; }
article { width: 66.6667%; float: left; }
aside { width: 30.769231%; float: right; }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:
<header>Lorem ipsum dolor sit amet</header>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit malesuada feugiat...</p>
</article>
<aside>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit malesuada feugiat...</p>
</aside>
<footer>Lorem ipsum dolor sit amet</footer>Now that the markup contains some text content, xy.css automatically sets the typography baseline to 1em = 12px with default font-size and line-height values applied via the body selector:
body {
font-size: 0.750em; /* = 12px = 12 x (1em / 16px) */
line-height: 1.50; /* = 18px = 18 / 12 (unitless) */
}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:
/* 2. typography */
h1 { font-size: 3.000em; line-height: 0.500; margin-bottom: 0.500em; /* 36px */ }
h2 { font-size: 2.000em; line-height: 0.750; margin-bottom: 0.750em; /* 24px */ }
p { font-size: 1.000em; line-height: 1.500; margin-bottom: 1.500em; /* 12px */ }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:
/* medium screens (excludes iPad & iPhone) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
h1 { /* 30px */
font-size: 2.500em;
line-height: 0.600;
margin-bottom: 0.600em;
}
h2 { /* 18px */
font-size: 1.500em;
line-height: 1.000;
margin-bottom: 1.000em;
}
p { /* 12px */
font-size: 1.000em;
line-height: 1.500;
margin-bottom: 1.500em;
}
}
/* medium large screens */
@media only screen and (min-width: 1224px) and (max-width: 1824px) {
h1 { /* 42px */
font-size: 3.500em;
line-height: <span class="white">0.858</span>;
margin-bottom: 0.429em;
}
h2 { /* 30px */
font-size: 2.500em;
line-height: <span class="yellow">0.900</span>;
margin-bottom: <span class="yellow">0.900em</span>;
}
p { /* 14px */
font-size: 1.167em;
line-height: <span class="yellow">1.929</span>;
margin-bottom: 1.286em;
}
}
/* large screens */
@media only screen and (min-width: 1824px) {
h1 { /* 64px */
font-size: 5.333em;
line-height: <span class="white">0.5625</span>;
margin-bottom: <span class="white">0.5625em</span>;
}
h2 { /* 38px */
font-size: 3.167em;
line-height: <span class="white">0.948</span>;
margin-bottom: <span class="white">0.948em</span>;
}
p { /* 16px */
font-size: 1.333em;
line-height: <span class="white">2.250</span>;
margin-bottom: 1.125em;
}
}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.
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).