Table

Name Side Role
Obi Wan Kenobi Light Jedi
Darth Vader Dark Sith
Greedo South Scumbag
Jawas Street Gangstas

Here is the basic CSS used for this example. See the source code for corresponding <table> markup.

table { width: 100%; }

tr:nth-child(1) { 
	background: rgba(0,0,0,0.10);
	}
tr:nth-child(even) {
	background: rgba(0,0,0,0.05);
	}
tr:nth-child(1) td { 
	font-weight: 800;
	}
td {
	padding: 9px; font-size: 14px; 
	line-height: 18px; color: #fff;
	}

Additional color styles are available in the xy.css file.

Form

Here is the basic CSS used for this example. See the source code for corresponding <form> markup.

form {
	float: left; overflow: hidden; 
	padding: 18px 0; width: 100%;
	}
input, label, textarea {
	float: left; clear: both; 
	width: 77.60%;
	}
input { width: 66.40%; }

textarea, label+input {
	margin: 9px 0; 
	padding: 7px 8px 8px 8px; 
	line-height: 14px; 
	font-size: 14px;
	}
textarea { padding: 9px 8px; }

label {
	padding: 0; 
	font-size: 14px; 
	line-height: 18px;
	}
#demo_submit {
	width: auto; margin: 0;
	}

Ask any serious grid designer: forms are the bane of existence. For some reason, every browser applies their own different styles to various form elements, making it impossible to style “once for all.” The above code is for Webkit browsers such as Safari and Chrome. Visit the xy.css file for alternate form styles for other browsers.

Pre

Any of the code blocks displayed on this page serve as examples of <pre> (preformatted) content. The CSS depends on several factors, including how to handle overflow text. There are several options for the CSS overflow property. For grid-based design, it’s basically a matter of how to deal with scrollbars. The easy way is to simply not show them, as done there at xy.css.

pre {
	font: lighter 1.0em/1.5 Monaco, monospace;
	padding: 18px 24px; margin: 18px 0;
	 white-space: -moz-pre-wrap !important;
	 white-space: -o-pre-wrap;
	 white-space: pre-wrap;
	 word-wrap: break-word;
	}

Note that some additional styles are used for this demo. See this demo’s xy.css template and corresponding HTML markup for more information.

About these examples

Most of the HTML elements you’re going to style stick to the grid nicely across browsers. But when you get to stuff like <table>, <form>, and <pre> elements, things get tricky. The examples on this page show one way of going about it, using xy.css.

Features of xy.css

When added to the xy.css matrix, the code examples provided on this page hook into the following features: