Remove alt-layout - basic and index are sufficient
Addy Osmani
parent
367f2a2f0e
commit
6223cf1c9d
|
|
@ -31,8 +31,7 @@ The project aims to align with the mobile web recommendations made by Google's [
|
|||
|
||||
We provide 3 HTML starting points, from which you can choose:
|
||||
|
||||
- `index.html` - the default starting point, containing a slide-out menu,
|
||||
- `alt-layout.html` - features a horizontal navigation menu, or
|
||||
- `index.html` - the default starting point, containing layout and a slide-out menu
|
||||
- `basic.html` - includes no layout.
|
||||
|
||||
## Tooling
|
||||
|
|
|
|||
|
|
@ -1,144 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
<title>Web Starter Kit</title>
|
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch/apple-touch-icon-144x144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch/apple-touch-icon-114x114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch/apple-touch-icon-72x72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="images/touch/apple-touch-icon-57x57-precomposed.png">
|
||||
<link rel="shortcut icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">
|
||||
<link rel="shortcut icon" href="images/touch/apple-touch-icon.png">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||||
<meta name="msapplication-TileImage" content="images/touch/apple-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#222222">
|
||||
|
||||
<!-- SEO: If mobile URL is different from desktop URL, add a canonical link to the desktop page -->
|
||||
<!--
|
||||
<link rel="canonical" href="http://www.example.com/" >
|
||||
-->
|
||||
|
||||
<!-- Add to homescreen for Chrome on Android -->
|
||||
<!--
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
-->
|
||||
|
||||
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
|
||||
<!--
|
||||
<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="">
|
||||
-->
|
||||
|
||||
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
|
||||
<!--
|
||||
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
|
||||
-->
|
||||
<!-- build:css styles/components/main.min.css -->
|
||||
<link rel="stylesheet" href="styles/h5bp.css">
|
||||
<!-- endbuild -->
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #C9DAF8;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
background: #3C78D8;
|
||||
}
|
||||
|
||||
.tab-bar button {
|
||||
width: 40px;
|
||||
height:40px;
|
||||
margin: 8px;
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 100%;
|
||||
-webkit-transition: background-color 0.4s ease-out;
|
||||
transition: background-color 0.4s ease-out;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab-bar button:hover{
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.tab-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.tab-bar button.selected {
|
||||
background-color: rgba(255, 255, 255, 1.0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="tab-bar">
|
||||
<button class="tab-btn tab-1 selected"></button>
|
||||
<button class="tab-btn tab-2"></button>
|
||||
<button class="tab-btn tab-3"></button>
|
||||
<button class="tab-btn tab-4"></button>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
||||
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', onTabClick, true);
|
||||
}
|
||||
|
||||
function onTabClick(e) {
|
||||
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
||||
var btn = e.target;
|
||||
|
||||
if (currentTab) {
|
||||
currentTab.classList.remove('selected');
|
||||
}
|
||||
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-XXXXX-X');ga('send','pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue