HTML5 Boilerplate for RWD

**ultimate_zc** · 24 May 2013, 11:24 PM

This is a boilerplate that utilizes HTML5 Boilerplate v4.2.0, a project from H5BP currently maintained by Nicolas Gallagher, Paul Irish, Mathias Bynens, Divya Manian, and Hans Christian Reinl and Mobile Boilerplate v4.2.0, a project from H5BP currently maintained by Alex Gibson, Nicolas Gallagher, and Shi Chuan. It also utilizes Serban Ghita's Mobile Detect 2.6.0.

This module utilizes mobile detection to render the proper information for your head tag when a visitor uses either a desktop or a mobile device to view your site. It includes several scripts and css files to let you build a base for either responsive design framework you wish to add to your site. It is also configured to move the javascript to the bottom of the page to speed up your site.

This is not a template but rather a base that detects the device being used. It will render the same Zen Cart classic template that displays as in the original installation but it has the necessary tools to build a Responsive Template whether you wish to use Bootstrap, Foundation or any other open source frameworks available.

**solo_400** · 26 May 2013, 06:15 PM

Do you know where find a demo using this ?

**ultimate_zc** · 27 May 2013, 12:00 PM

I'm waiting to see if the plugin gets approved and uploaded to the download section. I don't have a running demo since the template will look exactly the same.

**ultimate_zc** · 27 May 2013, 09:40 PM

The plugin, available in the free plugins section (Click Here), updates the content of your head tag in accordance to the device being used to navigate your site.

When viewed on a desktop, the head tag will display:

Code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Zen Cart!, The Art of E-commerce</title>
<meta name="keywords" content="Hardware Software DVD Movies Gift Certificates Big Linked Test Examples Free Call Stuff Test 10% by Attrib Test 10% A Top Level Cat Sale Percentage Sale Deduction Sale New Price Big Unlinked New v1.2 Music Documents Mixed Product Types ecommerce, open source, shop, online shopping " />
<meta name="description" content="Zen Cart! :  - Hardware Software DVD Movies Gift Certificates Big Linked Test Examples Free Call Stuff Test 10% by Attrib Test 10% A Top Level Cat Sale Percentage Sale Deduction Sale New Price Big Unlinked New v1.2 Music Documents Mixed Product Types ecommerce, open source, shop, online shopping" />
<meta name="viewport" content="width=device-width">
<meta name="author" content="Jose Carrillo" />
<meta name="generator" content="Foundation Theme for Zen Cart" />

<base href="http://localhost/zencart_1.5.1/boilerplate_v1.0.1/" />
<link rel="canonical" href="http://localhost/zencart_1.5.1/boilerplate_v1.0.1/" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/standard/normalize.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/standard/main.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/boilerplate/css/print_stylesheet.css" />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

<script src="includes/templates/boilerplate/jscript/standard/vendor/modernizr-2.6.2.min.js"></script>
</head>

When on a mobile device, the head tag will display:

Code:

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Zen Cart!, The Art of E-commerce</title>
<meta name="keywords" content="Hardware Software DVD Movies Gift Certificates Big Linked Test Examples Free Call Stuff Test 10% by Attrib Test 10% A Top Level Cat Sale Percentage Sale Deduction Sale New Price Big Unlinked New v1.2 Music Documents Mixed Product Types ecommerce, open source, shop, online shopping " />
<meta name="description" content="Zen Cart! :  - Hardware Software DVD Movies Gift Certificates Big Linked Test Examples Free Call Stuff Test 10% by Attrib Test 10% A Top Level Cat Sale Percentage Sale Deduction Sale New Price Big Unlinked New v1.2 Music Documents Mixed Product Types ecommerce, open source, shop, online shopping" />
<meta name="author" content="Jose Carrillo" />
<meta name="generator" content="Foundation Theme for Zen Cart" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="includes/templates/boilerplate/images/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="includes/templates/boilerplate/images/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="includes/templates/boilerplate/images/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="includes/templates/boilerplate/images/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="includes/templates/boilerplate/images/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="includes/templates/boilerplate/images/touch/apple-touch-icon.png">

<base href="http://localhost/zencart_1.5.1/boilerplate_v1.0.1/" />
<link rel="canonical" href="http://localhost/zencart_1.5.1/boilerplate_v1.0.1/" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/mobile/normalize.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/mobile/main.css" /><link rel="stylesheet" type="text/css" href="includes/templates/boillytics erplate/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/boilerplate/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/boilerplate/css/print_stylesheet.css" />

<script src="includes/templates/boilerplate/jscript/mobile/vendor/modernizr-2.6.2.min.js"></script>
</head>

The plugin also moves your javascript files to the bottom of the page and add (from the admin) a Google Analytics ID option for both mobile and/or desktop allowing you to better track your visitors.

The code at the bottom of the page will look as follows.
On Desktops:

Code:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="includes/templates/boilerplate/jscript/standard/vendor/jquery-1.9.1.min.js"><\/script>')</script>

	<script src="includes/templates/boilerplate/jscript/standard/plugins.js"></script>
	<script src="includes/templates/boilerplate/jscript/standard/main.js"></script>
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src='//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>

On mobile devices:

Code:

	<script src="includes/templates/boilerplate/jscript/mobile/vendor/zepto.min.js"></script>
	<script src="includes/templates/boilerplate/jscript/mobile/helper.js"></script>
        <script>
            var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
            g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
            s.parentNode.insertBefore(g,s)}(document,"script"));
        </script>

Lastly, from the Admin you can choose whether to allow links on your site (when viewed on a mobile device) to open in mobile safari or not. This is helpful for whenever your visitors add a link to your site to their mobile device home screen allowing your site to use the entire device's screen.

Because the plugin uses mobile detection, you can rely on several lines of code as shown here to add or remove content from your pages rather than just hiding it if relying on CSS3 media queries. This should help in the development of your responsive design theme.

**ultimate_zc** · 28 May 2013, 10:18 PM

Originally Posted by solo_400

Do you know where find a demo using this ?

This is a project that I'm working on using Foundation. You should be able to see the source code. Click here for demo.

**JSWeb** · 5 Jun 2013, 04:00 PM

Originally Posted by ultimate_zc

This is a project that I'm working on using Foundation. You should be able to see the source code. Click here for demo.

Great work Jose!

For those who are just on a PC/Laptop but want to see this working across multiple browsers / OS / mobile then download a User Agent Switcher.

Firefox: http://chrispederick.com/work/user-agent-switcher/
Chrome: https://chrome.google.com/webstore/d...jiklpkjnoahfmg

@Wilt - I suspect you have plans for the next ZC to use Responsive design as standard; would this be using the same Foundation?

**BGundlach** · 19 May 2014, 12:34 AM

Originally Posted by ultimate_zc

This is a project that I'm working on using Foundation. You should be able to see the source code. Click here for demo.

Arr. The link's broken. Do you mind posting the basic file structure for a Foundation based theme? I'm trying to piece one together.

**ultimate_zc** · 21 May 2014, 06:21 AM

Sorry. Everything in that domain was lost and I have not followed up with Foundation work.

Thread: HTML5 Boilerplate for RWD

Thread Tools

Search Thread

Display

HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Re: HTML5 Boilerplate for RWD

Similar Threads

v154 Order Comments Status/Update Boilerplate

v155 admin includes/orders.php: some minor html errors, corrections for future html5

Boilerplate mod- separate it from description?

Validating for html5

Bookmarks

Bookmarks

Posting Permissions