hughbris/breakouts.html

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