RubyGems - RubyApp - Versions diffs - 0.6.59 → 0.6.60 - Mend

RubyApp 0.6.59 → 0.6.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/content-collapsible-set.html ADDED

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Collapsible Content</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Collapsible set</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<h2>Collapsible set (accordion)</h2>
+		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+			<li><a href="content-collapsible-set.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+			<li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
+			<li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+			<li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
+		</ul>
+		<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
+		<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
+	<pre><code>
+<strong>&lt;div data-role="collapsible-set"&gt;</strong>
+	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
+	&lt;h3&gt;Section 1&lt;/h3&gt;
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
+	&lt;/div&gt;
+	&lt;div data-role=&quot;collapsible&quot;&gt;
+	&lt;h3&gt;Section 2&lt;/h3&gt;
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
+	&lt;/div&gt;
+<strong>&lt;/div&gt;</strong>
+	</code></pre>
+		<p>Here is an example of a collapsible set with 5 sections.</p>
+		<div data-role="collapsible-set">
+			<div data-role="collapsible" data-collapsed="false">
+				<h3>Section 1</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 4</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 5</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+		</div>
+		<h2>Mini collapsible sets</h2>
+		<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+		<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
+			<div data-role="collapsible">
+				<h3>Section 1</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>Collapsible content</p>
+			</div>
+		</div>
+		<h2>Icon positioning</h2>
+		<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
+		<div data-role="collapsible-set" data-theme="c" data-iconpos="right">
+			<div data-role="collapsible">
+				<h3>Section 1</h3>
+				<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on parent.</p>
+			</div>
+			<div data-role="collapsible" data-iconpos="left">
+				<h3>Section 2</h3>
+				<p>data-iconpos="left"</p>
+			</div>
+			<div data-role="collapsible" data-iconpos="bottom">
+				<h3>Section 3</h3>
+				<p>data-iconpos="bottom"</p>
+			</div>
+			<div data-role="collapsible" data-iconpos="top">
+				<h3>Section 4</h3>
+				<p>data-iconpos="top"</p>
+			</div>
+		</div>
+		<h2>Theming collapsible content</h2>
+		<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
+<pre><code>
+&lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
+</code></pre>
+		<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
+			<div data-role="collapsible">
+				<h3>Section 1</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>Collapsible content</p>
+			</div>
+		</div>
+		<h2>Theming individual sections</h2>
+		<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
+		<div data-role="collapsible-set" data-content-theme="c">
+			<div data-role="collapsible" data-theme="b" data-content-theme="b">
+				<h3>Section header, swatch B</h3>
+				<p>Collapsible content, swatch B</p>
+			</div>
+			<div data-role="collapsible" data-theme="a" data-content-theme="a">
+				<h3>Section header, swatch A</h3>
+				<p>Collapsible content, swatch A</p>
+			</div>
+			<div data-role="collapsible" data-theme="e" data-content-theme="d">
+				<h3>Section header, swatch E</h3>
+				<p>Collapsible content, swatch D</p>
+			</div>
+		</div>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Content Formatting</li>
+					<li><a href="content-html.html">Basic HTML styles</a></li>
+					<li><a href="content-grids.html">Layout grids (columns)</a></li>
+					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+					<li><a href="content-themes.html">Theming content</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/content-collapsible.html ADDED

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Collapsible Content</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+			<h1>Collapsible</h1>
+			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+		</div><!-- /header -->
+		<div data-role="content">
+			<div class="content-primary">
+			<h2>Collapsible content</h2>
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+				<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>
+			<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
+			<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
+			<p>By default, the content will be collapsed.</p>
+<pre><code>
+&lt;div <strong>data-role=&quot;collapsible&quot;</strong>&gt;
+   &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+			<div data-role="collapsible">
+				<h3>I'm a header</h3>
+				<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
+			</div>
+	<h2>Expanding collapsibles on load</h2>
+	<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
+<code>
+&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
+</code>
+		<p>This code will create a collapsible widget like this:</p>
+			<div data-role="collapsible" data-collapsed="false">
+				<h3>I'm a header</h3>
+				<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
+			</div>
+			<h2>Mini collapsibles</h2>
+			<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+		<code>
+		&lt;div data-role=&quot;collapsible&quot; <strong>data-mini=&quot;true&quot;&gt;</strong>
+		</code>
+		<p>This code will create a mini collapsible widget:</p>
+		<div data-role="collapsible" data-mini="true">
+			<h3>I'm a mini header</h3>
+			<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
+		</div>
+		<h2>Icon positioning</h2>
+		<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
+		<div data-role="collapsible" data-iconpos="right">
+			<h3>I'm a header</h3>
+			<p><code>data-iconpos="right"</code></p>
+		</div>
+	<h2>Theming collapsible content</h2>
+		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
+		<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
+<pre><code>
+&lt;div data-role=&quot;collapsible&quot; <strong>data-content-theme=&quot;c&quot;</strong>&gt;
+   &lt;h3&gt;Header swatch A&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "C".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+		<div data-role="collapsible" data-content-theme="c">
+			<h3>Header swatch</h3>
+			<p>I'm the collapsible content with a themed content block set to "C".</p>
+		</div>
+		<h2>Theming collapsible headers</h2>
+		<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
+<pre><code>
+&lt;div data-role=&quot;collapsible&quot; <strong>data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;</strong>&gt;
+   &lt;h3&gt;Header swatch A&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "A".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+		<div data-role="collapsible" data-theme="a" data-content-theme="a">
+			<h3>Header swatch A</h3>
+			<p>I'm the collapsible content with a themed content block set to "A".</p>
+		</div>
+		<div data-role="collapsible" data-theme="b" data-content-theme="d">
+			<h3>Header swatch B</h3>
+			<p>I'm the collapsible content with a themed content block set to "D".</p>
+		</div>
+		<h2>Nested Collapsibles</h2>
+		<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
+		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
+			<h3>I'm a header</h3>
+			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+			<div data-role="collapsible" data-theme="c" data-content-theme="c">
+				<h3>I'm a nested collapsible with a child collapsible</h3>
+				<p>I'm a child collapsible.</p>
+					<div data-role="collapsible" data-theme="d" data-content-theme="d">
+						<h3>Nested inside again.</h3>
+						<p>Three levels deep now.</p>
+					</div><!-- /section 1A -->
+			</div><!-- /section 1 -->
+			<div data-role="collapsible" data-content-theme="c">
+				<h3>Section 3: Form elements</h3>
+				<form action="#" method="get">
+					<div data-role="fieldcontain">
+						<label for="textarea">Textarea:</label>
+						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+					</div>
+					<div data-role="fieldcontain">
+						<label for="slider">Input slider:</label>
+					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
+					</div>
+					<fieldset class="ui-grid-a">
+							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+				    </fieldset>
+				</form>
+			</div><!-- /section 2 -->
+			<div data-role="collapsible" data-content-theme="c">
+				<h3>Section 4: Collapsed list</h3>
+				<p>Here is an inset list:</p>
+				<ul data-role="listview" data-inset="true" data-theme="d">
+					<li><a href="index.html">Acura</a></li>
+					<li><a href="index.html">Audi</a></li>
+					<li><a href="index.html">BMW</a></li>
+					<li><a href="index.html">Cadillac</a></li>
+					<li><a href="index.html">Chrysler</a></li>
+					<li><a href="index.html">Dodge</a></li>
+					<li><a href="index.html">Ferrari</a></li>
+					<li><a href="index.html">Ford</a></li>
+				</ul>
+			</div><!-- /section 3 -->
+		</div>
+		<h2>Collapsible sets (accordions)</h2>
+		<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an <a href="content-collapsible-set.html">accordion widget</a>.</p>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Content Formatting</li>
+					<li><a href="content-html.html">Basic HTML styles</a></li>
+					<li><a href="content-grids.html">Layout grids (columns)</a></li>
+					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+					<li><a href="content-themes.html">Theming content</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/content/content-grids.html ADDED

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Content Grids</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Layout grids</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
+		<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a  block style class convention called <code>ui-grid</code>. </p>
+		<p>There are four preset configurations layouts  that can be used in any situation that requires columns:</p>
+			<ul>
+				<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
+				<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
+				<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
+				<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
+			</ul>
+			<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
+			<p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
+		<h2>Two column grids</h2>
+		<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
+<pre><code>
+&lt;div class=&quot;ui-grid-a&quot;&gt;
+	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;strong&gt;I'm Block A&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
+	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;strong&gt;I'm Block B&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
+&lt;/div&gt;&lt;!-- /grid-a --&gt;
+</code></pre>
+		<p>The above markup produces the following content layout:</p>
+		<div class="ui-grid-a">
+			<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
+			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
+		</div><!-- /grid-a -->
+		<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
+		<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
+<pre><code>
+&lt;fieldset class=&quot;ui-grid-a&quot;&gt;
+	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;c&quot;&gt;Cancel&lt;/button&gt;&lt;/div&gt;
+	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;b&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
+&lt;/fieldset&gt;
+</code></pre>
+		<fieldset class="ui-grid-a">
+				<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+				<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+	    </fieldset>
+	    <p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
+		<div class="ui-grid-a">
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
+		</div><!-- /grid-a -->
+		<h2>Three-column grids</h2>
+		<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+<pre><code>
+&lt;div class=&quot;ui-grid-b&quot;&gt;
+	&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
+	&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
+	&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
+&lt;/div&gt;&lt;!-- /grid-b --&gt;
+</code></pre>
+		<p>This will produce a 33/33/33% grid for our content.</p>
+		<div class="ui-grid-b">
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
+		</div><!-- /grid-b -->
+		<p>And an example of a 3 column grid with buttons inside:</p>
+		<fieldset class="ui-grid-b">
+				<div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
+				<div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>
+				<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
+	    </fieldset>
+		<h2>Four-column grids</h2>
+		<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+		<div class="ui-grid-c">
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
+		</div><!-- /grid-c -->
+		<h2>Five-column grids</h2>
+		<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+		<div class="ui-grid-d">
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
+			<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
+		</div><!-- /grid-c -->
+		<h2>Multiple row grids</h2>
+		<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
+		<div class="ui-grid-b">
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+		</div><!-- /grid-c -->
+		<h2>Grids in toolbars</h2>
+		<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
+		<!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
+		<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
+				<div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
+				<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
+				<div class="ui-block-c"><input id="value" value="5,000"></div>
+				<div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>
+	    </div><!-- /footer -->
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Content Formatting</li>
+						<li><a href="content-html.html">Basic HTML styles</a></li>
+						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li><a href="content-themes.html">Theming content</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>