[ xy.css ]

xy.css : responsive liquid grid

xy.css is a lightweight CSS template for building responsive liquid-grid designs. xy.css neutralizes rogue browser styles and brings horizontal and vertical rhythm via synergized grid system for both typography and structure. xy.css helps you create clean, device-neutral designs without cluttering markup with non-semantic class attributes. Designed for HTML5, xy.css brings together the best CSS techniques from around the Web and integrates them into a single, powerful stylesheet template.

What’s the catch? Well, none if you’re familiar with CSS and comfortable with basic math. Grid-based designs are all about using numbers to define things like line-height, font-size and such. If your first look at the xy.css stylesheet makes you cringe, or if you know in advance that you hate math, you may have better luck with a CSS grid that provides predefined classes. Basically, the trade-off is between adding non-semantic class attributes to your markup or doing a few calculations for existing selectors.

Create responsive liquid-grid designs

Devices come in all shapes and sizes. Screens range in pixel-width from 320 to 2560 and beyond. Liquid design enables elements on the web page to flow around each other as browser width changes. To see an example of this, resize your browser a little and watch the text rearrange to fill the available space. Liquid designs provide many benefits, but there are limits to its effectiveness. Notice how the text wraps but does not resize as browser width changes. This inability to scale renders fluid designs relatively useless as screen width increases. Fortunately, responsive design enables web pages to detect media and adapt for optimal display based on client-specific characteristics such as screen width, device type, orientation, and so on. This enables you to customize design aspects such as layout and font size based on the width of the browser window. xy.css combines liquid and responsive design into fluid framework that harmonizes with screens of all sizes.

Design with horizontal and vertical rhythm

xy.css neutralizes default browser styles and establishes horizontal and vertical rhythm throughout your design. Horizontal rhythm is created via liquid-grid layout system, and vertical rhythm is created via responsive typography grid. By combining these two grid systems into a single baseline stylesheet, xy.css brings natural flow and harmony to the web page. This rhythm remains consistent across screens, regardless of device resolution or screen size. To see this dual-grid system in action, watch as the box edges and typography remain fixed to the grid while changing the width of your browser. To see the baseline layout for the liquid grid, resize the browser to precisely 984 pixels (12 columns). To help visualize the concept, click the show grid button in the upper-right corner of the screen.

Write clean, semantic HTML5

When working with a grid-based design, you need a way to target key elements with your structural CSS. Other grid systems do this by adding non-semantic class attributes to your markup, like so:

<body>
	<header class="grid_1 col_1 row"></header>
	<article class="grid_9 col_3 row"></article>
	<footer class="grid_4 col_2 row"></footer>
</body>

With this method, grid classes are all predefined in the stylesheet, with widths and margins calculated for interval column sizes.

This may simplify the process, but you get less flexibility, more bloat, and extraneous attributes cluttering your semantic HTML5. xy.css enables clean, semantic markup for your markup:

<body>
	<header></header>
	<article></article>
	<footer></footer>
</body>

Grid styles are easily applied to any element on the page, so adding classes is completely up to you, and not required for the grid to work.

Universal design

xy.css started as a base stylesheet for oversize monitors and viewing devices. It’s now common to see responsive styles for smaller screens (like mobile devices), but very few designs scale up for those visiting with larger screens (like 27″ iMacs).

If you’re viewing via larger screen, increase the browser size and watch as the responsive @media queries work their magic. Likewise, if you’re visiting via smaller screen, the liquid-grid design has been scaled and optimized just for you. The goal is to design once for all devices, browser types, and screen sizes.

Visual elements

To help visualize the grid, each color used on this demo page corresponds to a specific HTML element. For example, all <code> tags have a red background. Note that all colors are used only for the demo and are not included with xy.css. To visualize these elements, click the show matrix button at the top of the page.

  • <article> <aside> <nav>
  • <header> <section> <footer>
  • <ol> <p> <ul> <ol> <ol>
  • <small> <strong> <em>
  • <pre> <code>

Evolving grid

Any grid can be improved, and xy.css is no exception. My goal is to simplify and fine-tune xy.css toward grid perfection. If you find something that could be improved, let me know. For now, here’s a list of things that will break the grid:

  • Webkit: column-count/-gap
  • Mobile Safari: monospace fonts
  • All browsers: horizontal scrollbars
  • All browsers: CSS/markup errors
  • Internet Explorer: the usual bugs

Visit the section on evolving grid for the most current list.

Your browser info

The browser you’re using reports its user-agent as: