RubyApp 0.6.67 → 0.6.68

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.3.0/demos/docs/examples/listviews/grid-listview.css

@@ -0,0 +1,180 @@
+/* A bit custom styling */
+.my-page {
+	background: #222;
+}
+/* Link to the Google webfont is in the head */
+.my-page .ui-title, .my-page .ui-li-aside {
+	font-family: 'Open Sans', sans-serif;
+	font-weight: 400;
+}
+.my-page .ui-header {
+	color: #990099;
+}
+.my-page .ui-footer {
+	color: #666;
+}
+.my-page .ui-li-desc {
+	color: #c0c0c0;
+}
+.my-page .ui-li-aside {
+	color: #990099;
+}
+.my-page .ui-listview .ui-li.ui-btn {
+	background-image: none;
+	border-color: #222;
+}
+
+/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
+@media all and (min-width: 768px){
+	.my-page .ui-content {
+		padding: 9px;
+	}
+	.my-page .ui-listview .ui-li.ui-btn {
+		float: left;
+		width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
+		height: 232px;
+		margin: 9px 1.2%;
+		border-width: 0; /* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
+	}
+	/* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
+	.my-page .ui-listview .ui-li.ui-btn-inner {
+		border: inherit;
+		border-width: 1px;
+		margin: -1px;
+	}
+	.my-page .ui-listview .ui-btn-inner,
+	.my-page .ui-listview .ui-btn-text,
+	.my-page .ui-listview .ui-link-inherit,
+	.my-page .ui-listview .ui-li-thumb {
+		width: 100%;
+		height: 100%;
+		display: block;
+		overflow: hidden;
+	}
+	.my-page .ui-listview .ui-link-inherit {
+		padding: 0 !important;
+		position: relative;
+	}
+	/* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
+	.my-page .ui-listview .ui-li,
+	.my-page .ui-listview .ui-btn-text,
+	.my-page .ui-listview .ui-link-inherit,
+	.my-page .ui-listview .ui-li-thumb {
+		-webkit-border-radius: inherit;
+		border-radius: inherit;
+	}
+	.my-page .ui-listview .ui-li-thumb {
+		height: auto; /* To keep aspect ratio. */
+		max-width: 100%;
+		max-height: none;
+		margin: 0;
+		left: 0;
+		z-index: -1;
+	}
+	/* Hide the icon */
+	.my-page .ui-listview .ui-icon {
+		display: none;
+	}
+	/* Make text wrap. */
+	.my-page .ui-listview .ui-li-heading,
+	.my-page .ui-listview .ui-li-desc {
+		white-space: normal;
+		overflow: visible;
+		position: absolute;
+		left: 0;
+		right: 0;
+	}
+	/* Text position */
+	.my-page .ui-listview .ui-li-heading {
+		margin: 0;
+		padding: 20px;
+		bottom: 50%;
+	}
+	.my-page .ui-listview .ui-li-desc {
+		margin: 0;
+		padding: 0 20px;
+		min-height: 50%;
+		bottom: 0;
+		line-height: 1.5;
+	}
+	/* Semi transparent background and different position if there is a thumb */
+	.ui-listview .ui-li-has-thumb .ui-li-heading,
+	.ui-listview .ui-li-has-thumb .ui-li-desc {
+		background: #111;
+		background: rgba(0,0,0,.8);
+		-webkit-background-clip: padding;
+		background-clip: padding-box;
+	}
+	.ui-listview .ui-li-has-thumb .ui-li-heading {
+		padding: 10px;
+		bottom: 20%;
+	}
+	.ui-listview .ui-li-has-thumb .ui-li-desc {
+		padding: 0 10px;
+		min-height: 20%;
+		-webkit-border-bottom-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+		-webkit-border-bottom-right-radius: inherit;
+		border-bottom-right-radius: inherit;
+	}
+	/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
+	.my-page .ui-listview .ui-li-desc.ui-li-aside {
+		padding: 2px 10px;
+		width: auto;
+		min-height: 0;
+		top: 0;
+		left: auto;
+		bottom: auto;
+		/* Custom styling. */
+		color: #c0c0c0;
+		background: #990099;
+		background: rgba(153,0,153,.85);
+		-webkit-border-top-right-radius: inherit;
+		border-top-right-radius: inherit;
+		-webkit-border-bottom-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+		-webkit-border-bottom-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	/* If you want to add shadow, don't kill the focus style. */ 
+	.my-page .ui-listview .ui-btn:not(.ui-focus) {
+		-moz-box-shadow: 0px 0px 9px #111;
+		-webkit-box-shadow: 0px 0px 9px #111;
+		box-shadow: 0px 0px 9px #111;
+	}
+	/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
+	.my-page .ui-listview .ui-btn:hover {
+		-moz-box-shadow: 0px 0px 12px #387bbe;
+		-webkit-box-shadow: 0px 0px 12px #387bbe;
+		box-shadow: 0px 0px 12px #387bbe;
+	}
+	/* Animate focus and hover style, and resizing. */ 
+	.my-page .ui-listview .ui-btn {
+		-webkit-transition: all 500ms ease;
+		-moz-transition: all 500ms ease;
+		-o-transition: all 500ms ease;
+		-ms-transition: all 500ms ease;
+		transition: all 500ms ease;	
+	}
+}
+/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
+@media all and (min-width: 1020px){
+	.my-page .ui-content {
+		padding: 10px;
+	}
+	/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
+	By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
+	.my-page .ui-listview {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
+	/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
+	but we stick to percentage values for demo purposes. */
+	.my-page .ui-listview .ui-li.ui-btn {
+		width: 23%;
+		height: 230px;
+		margin: 10px 1%;
+	}
+}
+
+/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.3.0/demos/docs/examples/listviews/grid-listview.html

@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Grid Listview - jQuery Mobile Demos</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.3.0.css">
+	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
+	<link rel="shortcut icon" href="../../favicon.ico">
+	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+	<link rel="stylesheet" href="grid-listview.css" id="grid-listview-css">
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../_assets/js/jquery.mobile.demos.js"></script>
+	<script src="../../../js/jquery.mobile-1.3.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="jqm-demos">
+
+	<div data-role="header" class="jqm-header">
+		<h1 class="jqm-logo"><a href="../../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
+		<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
+		<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
+        
+<div class="jqm-search">
+    <ul class="jqm-list">
+        
+<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a href="widgets/accordions/">Accordion</a></li>
+
+<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
+
+<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
+
+<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
+
+<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a href="widgets/checkbox/">Checkboxes</a></li>
+
+<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/" data-ajax="false">Collapsibles</a></li>
+
+<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
+
+<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
+
+<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.html">Fixed toolbars</a></li>
+
+<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>
+
+<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
+
+<li data-section="Widgets" data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a href="widgets/forms/">Form elements</a></li>
+
+<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a href="widgets/grids/">Grids</a></li>
+
+<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header toolbar</a></li>
+
+<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icon</a></li>
+
+<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a></li>
+
+<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a href="widgets/listviews/" data-ajax="false">Listviews</a></li>
+
+<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/">Loader overlay</a></li>
+
+<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
+
+<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.html">Navbar, persistent</a></li>
+
+<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
+
+<li data-section="Widgets" data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="widgets/popup/">Popup</a></li>
+
+<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
+
+<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
+
+<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
+
+<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a href="widgets/textinputs/">Text inputs & textarea</a></li>
+
+<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop" data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>
+        
+<li data-role="list-divider">Collapsibles</li>
+
+<li data-section="Demo Showcase" data-filtertext="dynamic collapsible set accordion append expand"><a href="examples/collapsibles/dynamic-collapsible.html" data-ajax="false">Dynamic collapsible</a></li>
+
+<li data-role="list-divider">Controlgroups</li>
+
+<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a href="examples/controlgroups/dynamic-controlgroup.html" data-ajax="false">Dynamic controlgroup</a></li>
+
+<li data-role="list-divider">Listviews</li>
+
+<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="examples/listviews/grid-listview.html" data-ajax="false">Grid Listview</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="autodividers anchor jump scroll linkbars listviews lists ul"><a href="examples/listviews/autodividers-linkbar.html" data-ajax="false">Autodividers Linkbar</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="listviews autodividers selector autodividersselector lists ul ol"><a href="examples/listviews/autodividers-selector.html" data-ajax="false">Autodividers Selector</a></li>
+
+<li data-role="list-divider">Navigation</li>
+
+<li data-section="Demo Showcase" data-filtertext="backbone and require.js example navigation router"><a href="examples/backbone-require/index.html" data-ajax="false">Backbone and Require.js example</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="server redirection with server-side support.html"><a href="examples/redirect/" data-ajax="false">Redirection with server-side support</a></li>
+
+<li data-role="list-divider">Panels</li>
+
+<li data-section="Demo Showcase" data-filtertext="panel styling slide panels sliding panels shadow rwd responsive breakpoint"><a href="examples/panels/panel-styling.html" data-ajax="false">Panel styling</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="open panel on swipe panels left right"><a href="examples/panels/panel-swipe-open.html" data-ajax="false">Open panel on swipe</a></li>
+
+<li data-role="list-divider">Popups</li>
+
+<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a href="examples/popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.html" data-ajax="false">Popup with arrow</a></li>
+
+<li data-role="list-divider">Responsive Tables</li>
+
+<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a href="examples/tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="responsive tables reflow heading groups rwd breakpoint"><a href="examples/tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle hide rwd breakpoint customization options"><a href="examples/tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle heading groups rwd breakpoint"><a href="examples/tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="responsive tables table column toggle phone comparison rwd breakpoint"><a href="examples/tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>
+
+<li data-role="list-divider">Sliders</li>
+
+<li data-section="Demo Showcase" data-filtertext="slider tooltip handle value extension input range sliders forms"><a href="examples/slider/tooltip.html" data-ajax="false">Tooltip extension</a></li>
+
+<li data-role="list-divider">Swipe</li>
+
+<li data-section="Demo Showcase" data-filtertext="swipe to navigate page transitions navigation"><a href="examples/swipe/swipe-page.html" data-ajax="false">Swipe to navigate</a></li>
+
+<li data-section="Demo Showcase" data-filtertext="swipe to delete list item listviews lists ul ol"><a href="examples/swipe/swipe-list.html" data-ajax="false">Swipe to delete list item</a></li>
+        
+<li data-role="list-divider">Forms</li>
+
+<li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a href="faq/question-template.html">Why won't my CSS styles apply correctly to a widget?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form elements does not work.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and browsers.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to number/text.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other times its a dialog.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue"><a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave erratically.</a></li>
+
+<li data-role="list-divider">Pages</li>
+
+<li data-section="Questions & Answers" data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document loaded?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not working.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=">create refresh event trigger pageInit refresh method content injected page not enhanced."><a href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=">create trigger event pageInit injected HTML"><a href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not work.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an element?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="auto-enhance block container parent stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block of elements?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>
+
+<li data-role="list-divider">Events</li>
+
+<li data-section="Questions & Answers" data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li>
+
+<li data-role="list-divider">Theme and styling</li>
+
+<li data-section="Questions & Answers" data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a href="faq/how-does-theming-work.html">How does theming work?</a></li>
+
+<li data-role="list-divider">Apps</li>
+
+<li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li>
+<!--
+<li data-role="list-divider">Navigation</li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.html">The nav is acting erratically!</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
+<li data-role="list-divider">Widgets</li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>
+
+<li data-role="list-divider">General</li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.html">My custom css is ignored.</a></li>
+
+<li data-role="list-divider">Events</li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.html">Document ready ignored after first page.</a></li>
+
+<li data-role="list-divider">Theming &amp; custom styles</li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li>
+
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li>
+-->
+    </ul>
+</div>
+	</div><!-- /header -->
+
+	<div data-role="content" class="jqm-content">
+
+        <h1>Grid Listview</h1>
+
+        <p class="jqm-intro">A regular listview on smartphones, but grid tiles on tablets and larger screens? This demo shows you how you can accomplish this with custom CSS.</p>
+
+        <h2>Starting points</h2>
+
+        <p>Create a listview from an unordered list. For this demo we used an inset listview to show you how you can apply the corner styling to the tiles as well.</p>
+
+        <p>In this demo there are two breakpoints. At the first breakpoint we swap from the regular stacked layout to a three column grid layout with tiles. At the second we swith from three to four columns.</p>
+
+        <p>The list items have a thumbail. In the grid layout those will get the same size as the tile. One list item doesn't hold an image to demonstrate how you can take advantage of class <code>ui-li-has-thumb</code> to adjust the style.</p>
+
+        <a href="grid-listview-demo.html" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Open demo</a>
+
+        <div data-demo-html="#demo-page" data-demo-css="#grid-listview-css"></div>
+
+	</div><!-- /content -->
+
+	<div data-role="footer" class="jqm-footer">
+		<p class="jqm-version"></p>
+		<p>Copyright 2013 The jQuery Foundation</p>
+	</div><!-- /footer -->
+
+
+    <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
+        <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="docs" class="jqm-list">
+            <li data-role="list-divider">jQuery Mobile Demos</li>
+			<li><a href="../">Home</a></li>
+            <li><a href="intro/">Introduction</a></li>
+            <li><a href="examples/">Demo Showcase</a></li>
+            <li><a href="faq/">Questions & Answers</a></li>
+			<li><a href="intro/rwd.html">Going Responsive</a></li>
+            <li data-role="list-divider">Widget reference</li>
+            
+<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a href="widgets/accordions/">Accordion</a></li>
+
+<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
+
+<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
+
+<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
+
+<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a href="widgets/checkbox/">Checkboxes</a></li>
+
+<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/" data-ajax="false">Collapsibles</a></li>
+
+<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
+
+<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
+
+<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.html">Fixed toolbars</a></li>
+
+<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>
+
+<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
+
+<li data-section="Widgets" data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a href="widgets/forms/">Form elements</a></li>
+
+<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a href="widgets/grids/">Grids</a></li>
+
+<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header toolbar</a></li>
+
+<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icon</a></li>
+
+<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a></li>
+
+<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a href="widgets/listviews/" data-ajax="false">Listviews</a></li>
+
+<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/">Loader overlay</a></li>
+
+<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
+
+<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.html">Navbar, persistent</a></li>
+
+<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
+
+<li data-section="Widgets" data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="widgets/popup/">Popup</a></li>
+
+<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
+
+<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
+
+<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
+
+<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>
+
+<li data-section="Widgets" data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a href="widgets/textinputs/">Text inputs & textarea</a></li>
+
+<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop" data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>
+        </ul>
+	</div><!-- /panel -->
+
+</div><!-- /page -->
+
+<!-- The markup below is a copy of the actual demo page just so we can show the markup in the "view source" -->
+
+<div data-role="page" data-theme="a" id="demo-page" class="my-page">
+
+	<div data-role="header">
+		<h1>News</h1>
+		<a href="grid-listview.html" data-shadow="false" data-iconshadow="false" data-icon="arrow-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+
+        <ul data-role="listview" data-inset="true">
+        	<li><a href="#">
+            	<img src="../../_assets/img/apple.png">
+            	<h2>iOS 6.1</h2>
+                <p>Apple released iOS 6.1</p>
+                <p class="ui-li-aside">iOS</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/blackberry_10.png">
+            	<h2>BlackBerry 10</h2>
+                <p>BlackBerry launched the Z10 and Q10 with the new BB10 OS</p>
+                <p class="ui-li-aside">BlackBerry</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/lumia_800.png">
+            	<h2>WP 7.8</h2>
+                <p>Nokia rolls out WP 7.8 to Lumia 800</p>
+                <p class="ui-li-aside">Windows Phone</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/galaxy_express.png">
+            	<h2>Galaxy</h2>
+                <p>New Samsung Galaxy Express</p>
+                <p class="ui-li-aside">Samsung</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/nexus_7.png">
+            	<h2>Nexus 7</h2>
+                <p>Rumours about new full HD Nexus 7</p>
+                <p class="ui-li-aside">Android</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/firefox_os.png">
+            	<h2>Firefox OS</h2>
+                <p>ZTE to launch Firefox OS smartphone at MWC</p>
+                <p class="ui-li-aside">Firefox</p>
+            </a></li>
+        	<li><a href="#">
+            	<img src="../../_assets/img/tizen.png">
+            	<h2>Tizen</h2>
+                <p>First Samsung phones with Tizen can be expected in 2013</p>
+                <p class="ui-li-aside">Tizen</p>
+            </a></li>
+        	<li><a href="#">
+            	<h2>Symbian</h2>
+                <p>Nokia confirms the end of Symbian</p>
+                <p class="ui-li-aside">Symbian</p>
+            </a></li>
+        </ul>
+
+	</div><!-- /content -->
+
+    <div data-role="footer" data-theme="none">
+        <h3>Responsive Grid Listview</h3>
+    </div><!-- /footer -->
+
+</div><!-- /page -->
+</body>
+</html>