hughbris · June 3, 2015 04:19
diff --git a/breakouts.html b/breakouts.html
 <?xml version="1.0" encoding="utf-8" ?>
 <!DOCTYPE html 
 	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 >
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ">  <!-- bru -->
 <head>
 	<title>Step away from the flow</title>
 
 	<style type="text/css">
 		/* <![CDATA[ */
 			.breakout {
 				margin: 1em 10%;
 				padding: 1em 1.5em;
 				border-style: solid;
 				border-width: thin;
 				border-radius: 5px;
 				-moz-border-radius: 5px;
 				-webkit-border-radius: 5px;
 				clear: both;
 			}

 			.breakout.infobox {
 				background-color: #FFE;
 				border-color: #DD8;
 				/* optional icon background graphic, something cheesy like a lightbulb */
 			}

 			.breakout.notice {
 				background-color: #EFE;
 				border-color: #8D8;
 				/* font-style: italic; */
 			}

 			/*
 			.breakout.notice a {
 				font-style: normal;
 			}
 			*/

 			.breakout.admonish {
 				background-color: #FEE;
 				border-color: #D88;
 			}

 			.breakout.action {
 				background-color: #f2f2f2;
 				border-color: #0097db;
 			}
 		/* ]]> */
 	</style>

 </head>
 <body>

 	<p>Breakout boxes are a device that allows you to escape from the normal flow of the website copy for a variety of reasons, some of which are reflected here.</p>
 	<div class="breakout infobox">
 		<p>OK, did you know <em>by the way</em> that consistency is vital to a professional, manageable website, and you should have access to an authoritative resource to tell you whether "manageable" should have an 'e'.</p>
 		<p>It is functionally similar to a footnote.</p>
 		<p>This is in fact an <strong>infobox</strong>. You could add an icon to any of these breakout box classes for a nice mnemonic effect.</p>
 	</div>
 	<p id="ipsum-lorum">Say we have some interleaved text here, let's call it ipsum-lorem.</p>
 	<div class="breakout notice">
 		<p>This serves as a <strong>notice</strong>: it tells you about something relevant and may well be temporary.</p>
 		<p>It's worth considering the italic style option commented out in the CSS.</p>
 	</div>
 	<p id="macaroni">Some more interleaved text, let's call it macaroni, see if I care.</p>
 	<p class="breakout admonish">Always prefer semantic containers over &lt;div> elements if you don't need the extra container. For example, a &lt;p> is fine if your <strong>admonish</strong>ing text contains only inlines. Same applies to any breakout.</p>
 	<p>Let's fill a bit more because we need something to break out of. I've done a few of these design pattern gists now. It's useful to finally get these boilerplates down because I find myself reusing the same concepts – they are reasonably ubiquitous and I want them handy.</p>
 	<p class="breakout action">Find out more about how you can <a href="">use patterns like <strong>action</strong> breakouts to enhance your life</a>. It's free and mostly painless. It actually (kind of) works!!</p>
 	<p>OK I'm bored, let's wrap up what we have learned with another filler paragraph.</p>

 </body>
 </html>
	<?xml version="1.0" encoding="utf-8" ?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- bru -->
	<head>
	<title>Step away from the flow</title>

	<style type="text/css">
	/* <![CDATA[ */
	.breakout {
	margin: 1em 10%;
	padding: 1em 1.5em;
	border-style: solid;
	border-width: thin;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	clear: both;
	}

	.breakout.infobox {
	background-color: #FFE;
	border-color: #DD8;
	/* optional icon background graphic, something cheesy like a lightbulb */
	}

	.breakout.notice {
	background-color: #EFE;
	border-color: #8D8;
	/* font-style: italic; */
	}

	/*
	.breakout.notice a {
	font-style: normal;
	}
	*/

	.breakout.admonish {
	background-color: #FEE;
	border-color: #D88;
	}

	.breakout.action {
	background-color: #f2f2f2;
	border-color: #0097db;
	}
	/* ]]> */
	</style>

	</head>
	<body>

	<p>Breakout boxes are a device that allows you to escape from the normal flow of the website copy for a variety of reasons, some of which are reflected here.</p>
	<div class="breakout infobox">
	<p>OK, did you know <em>by the way</em> that consistency is vital to a professional, manageable website, and you should have access to an authoritative resource to tell you whether "manageable" should have an 'e'.</p>
	<p>It is functionally similar to a footnote.</p>
	<p>This is in fact an <strong>infobox</strong>. You could add an icon to any of these breakout box classes for a nice mnemonic effect.</p>
	</div>
	<p id="ipsum-lorum">Say we have some interleaved text here, let's call it ipsum-lorem.</p>
	<div class="breakout notice">
	<p>This serves as a <strong>notice</strong>: it tells you about something relevant and may well be temporary.</p>
	<p>It's worth considering the italic style option commented out in the CSS.</p>
	</div>
	<p id="macaroni">Some more interleaved text, let's call it macaroni, see if I care.</p>
	<p class="breakout admonish">Always prefer semantic containers over <div> elements if you don't need the extra container. For example, a <p> is fine if your <strong>admonish</strong>ing text contains only inlines. Same applies to any breakout.</p>
	<p>Let's fill a bit more because we need something to break out of. I've done a few of these design pattern gists now. It's useful to finally get these boilerplates down because I find myself reusing the same concepts – they are reasonably ubiquitous and I want them handy.</p>
	<p class="breakout action">Find out more about how you can <a href="">use patterns like <strong>action</strong> breakouts to enhance your life</a>. It's free and mostly painless. It actually (kind of) works!!</p>
	<p>OK I'm bored, let's wrap up what we have learned with another filler paragraph.</p>

	</body>
	</html>