Liquid Matrix

xy.css : responsive liquid matrix

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.

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. Other items such as images, forms, and tables also will flow and rearrange. Responsive design enables us complete control over grid resolution.

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 or decreases considerably.

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 a fluid framework that harmonizes with screens of all sizes.

Design with 360° rhythm

Designing with a typographic grid is known to bring vertical rhythm to the web page. In a similar manner, designing with a lateral layout grid brings horizontal rhythm, further enhancing the user experience. xy.css combines a horizontal layout grid with a vertical typographic grid to create a virtual liquid matrix that brings 360-degree rhythm and harmony to your design. This rhythm remains consistent across screens, regardless of device resolution or screen size.

To see the dual-grid matrix in action, click the “grid style” button in the top-right corner and watch as the box edges and typography remain fixed to the grid while changing the size of your browser. To see the baseline layout for the liquid grid, resize the browser to precisely 984 pixels (12 columns). To enhance the layout grid, click the show grid button in the upper-right corner of the screen.

Notice how all the layout edges align perfectly with the grid. This is what liquid-grid designs are all about. Design for a specific width, and your design maintains the grid-based layout ratios for any size viewing device.

Tip: your browser’s height and width are displayed in the top-left 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. One way of doing this involves adding non-semantic class attributes to your markup, like so:

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 provides the best of both worlds:

Using the predefined classes is straightforward, and explained in the docs, but you can just as easily target existing selectors, using the power of CSS3 to style just about anything. The full potential of xy.css is realized with clean, semantic markup. So instead of the previous example, we strive for smarter markup:

Your browser info

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

Solid foundation

xy.css is possible thanks to the brilliant minds behind stuff like responsive design, typographic rhythm, liquid-grid layouts, and of course CSS & HTML. Here are some key resources that fueled the creation of xy.css:

Universal design

xy.css started as a base stylesheet for oversize monitors and viewing devices. These days, it’s 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 primary directive: design once for all devices, browser types, and screen sizes.

Evolving grid

The xy.css template is a work in progress. Development is geared toward simplification and usability, always striving for the perfect CSS matrix. But it takes a village..