Zengarden’s Classes and Ids

Below you find the classes and ids in Zengarden’s index file. I used a terminal window on a MacBook like this:

  • grep “id=”  index.html
  • grep “class=” index html
IDS IN ZENGARDEN'S INDEX.HTML

<body id="css-zen-garden">
	<section class="intro" id="zen-intro">
		<div class="summary" id="zen-summary" role="article">
		<div class="preamble" id="zen-preamble" role="article">
	<div class="main supporting" id="zen-supporting" role="main">
		<div class="explanation" id="zen-explanation" role="article">
		<div class="participation" id="zen-participation" role="article">
		<div class="benefits" id="zen-benefits" role="article">
		<div class="requirements" id="zen-requirements" role="article">
			<div class="design-selection" id="design-selection">
			<div class="design-archives" id="design-archives">
			<div class="zen-resources" id="zen-resources">

CLASSES IN ZENGARDEN'S INDEX.HTML

<div class="page-wrapper">
	<section class="intro" id="zen-intro">
		<div class="summary" id="zen-summary" role="article">
		<div class="preamble" id="zen-preamble" role="article">
	<div class="main supporting" id="zen-supporting" role="main">
		<div class="explanation" id="zen-explanation" role="article">
		<div class="participation" id="zen-participation" role="article">
		<div class="benefits" id="zen-benefits" role="article">
		<div class="requirements" id="zen-requirements" role="article">
			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s HTML" class="zen-validate-html">HTML</a>
			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS" class="zen-validate-css">CSS</a>
			<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a>
			<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a>
			<a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a>
	<aside class="sidebar" role="complementary">
		<div class="wrapper">
			<div class="design-selection" id="design-selection">
				<h3 class="select">Select a Design:</h3>
						<a href="?cssfile=/216/216.css" class="design-name">Fountain Kiss</a> by						<a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
						<a href="?cssfile=/215/215.css" class="design-name">A Robot Named Jimmy</a> by						<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
						<a href="?cssfile=/214/214.css" class="design-name">Verde Moderna</a> by						<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
						<a href="?cssfile=/213/213.css" class="design-name">Under the Sea!</a> by						<a href="http://www.ericstoltz.com/" class="designer-name">Eric Stoltz</a>
						<a href="?cssfile=/212/212.css" class="design-name">Make ’em Proud</a> by						<a href="http://skybased.com/" class="designer-name">Michael McAghon and Scotty Reifsnyder</a>
						<a href="?cssfile=/211/211.css" class="design-name">Orchid Beauty</a> by						<a href="#" class="designer-name">Kevin Addison</a>
						<a href="?cssfile=/210/210.css" class="design-name">Oceanscape</a> by						<a href="http://www.pixel-house.com.au/" class="designer-name">Justin Gray</a>
						<a href="?cssfile=/209/209.css" class="design-name">CSS Co., Ltd.</a> by						<a href="http://www.benklemm.de/" class="designer-name">Benjamin Klemm</a>
			<div class="design-archives" id="design-archives">
				<h3 class="archives">Archives:</h3>
						<li class="next">
								Next Designs <span class="indicator">›</span>
						<li class="viewall">
			<div class="zen-resources" id="zen-resources">
				<h3 class="resources">Resources:</h3>
					<li class="view-css">
					<li class="css-resources">
					<li class="zen-faq">
					<li class="zen-submit">
					<li class="zen-translations">
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>