xy.css

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.

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.

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:

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

  • a set of predefined classes for ez stylin’ (via class attributes)
  • a simple framework enabling clean, semantic markup (via CSS3 and existing selectors)

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:

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

By keeping a few key rules in mind, you can create matrix-based designs of any complexity, far beyond the basic example seen here.

Features

  • Responsive design via CSS @media queries
  • CSS reset to neutralize default browser styles
  • Liquid-grid layout for horizontal rhythm
  • Scalable typographic grid for vertical rhythm
  • Works without class attributes
  • Designed for HTML5, works with any markup
  • Progressively enhanced with CSS3
  • Animated media-query transitions
  • Styles for mobile, iPhone/iPad, & large screens
  • Grid styles for print media
  • Single lightweight CSS file
  • Open source and free to use

Includes

Getting started

Here is a quick overview of how to use xy.css:

  1. Download xy.css and include in your web page(s)
  2. Optionally include the visual matrix and other tools
  3. Align HTML elements with the xy matrix as described in the docs

The xy.css stylesheet is well-commented with charts and steps for defining your styles. For a more complete guide, visit the xy.css documentation. You may also want to check out the demos.

Browser support

xy.css is tested in the following browsers:

  • Chrome 15 thru 23.0.1271.97
  • Firefox 6 thru 17.0.1
  • Safari 5 thru 5.1.7 (6534.57.2)
  • Mobile Safari 5.1 thru 6.0.1 (iPad/iPhone)
  • Opera 11 thru 12.11
  • Camino 1.9.2 thru 2.1.2
  • Internet Explorer 9
  • IE7 & 8 (grid only)

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.

					
				

				

					
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..

					
If you find a bug or 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: errors in CSS or markup
    • 
						
  • Internet Explorer: the usual bugs
    • 
					

					
The good news is that none of these are really deal-breakers. CSS3 columns in Webkit browsers is kind of a biggie, but you can compensate, avoid, or fix the other issues.