mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-20 00:32:08 +03:00
Addy Osmani
commit
323d61d583
60
app/basic.html
Normal file
60
app/basic.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<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">
|
||||
|
||||
<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">
|
||||
|
||||
<!-- 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>
|
||||
-->
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Add your site or application content here -->
|
||||
|
||||
<!-- 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>
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<html class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
@ -44,14 +44,62 @@
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Add your site or application content here -->
|
||||
<!-- Start by removing the placeholder text -->
|
||||
<article>
|
||||
<h1>Welcome to Sushi</h1>
|
||||
<h2>The Multi-screen web development kit</h2>
|
||||
</article>
|
||||
<!-- end what you should remove -->
|
||||
<body class="page--article">
|
||||
<header class="summary-header">
|
||||
<div class="container">
|
||||
<h1 class="summary-header__title">Welcome To Sushi</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<article id="intro">
|
||||
<div class="editorial-header">
|
||||
<h2 class="editorial-header__subtitle">The Multi-screen web development kit</h2>
|
||||
<p class="g-wide--pull-1">Sushi is a starter kit for multi-screen web development, encompassing opinionated
|
||||
recommendations on boilerplate and tooling for building an experience that works
|
||||
great across multiple devices.</p>
|
||||
<p class="g-wide--pull-1">The project aims to align with the mobile web recommendations made by
|
||||
Google's Web Fundamentals team and will include UX pattern samples and best
|
||||
practices that fall in line with some opinions we have about how multi-screen
|
||||
webapps should be built.</p>
|
||||
|
||||
<h3>What performance requirements does Sushi have?</h3>
|
||||
|
||||
<p class="g-wide--pull-1">Sushi will be striving to ship with a 60fps experience and 100% PageSpeed score out
|
||||
of the box.</p>
|
||||
|
||||
<p class="g-wide--pull-1">We intend to give developers a high performance starting point for multi-device
|
||||
development, paying close attention to this requirement when deciding on the
|
||||
libraries and tools we prescribe. We will be employing use of PageSpeed Insights
|
||||
and the Chromium Telemetry tools for helping us stay on top of this.</p>
|
||||
|
||||
<h3>Tooling</h3>
|
||||
<p class="g-wide--pull-1">Sushi includes optional Gulp based build tooling, including features like:</p>
|
||||
<ul>
|
||||
<li>Gulp build tooling</li>
|
||||
<li>LiveReload</li>
|
||||
<li>Cross-device syncronization of clicks, scrolls, navigation, form filling.</li>
|
||||
<li>Image optimization</li>
|
||||
<li>JavaScript minification and optimization</li>
|
||||
<li>CSS optimization</li>
|
||||
<li>PageSpeed integration</li>
|
||||
</ul>
|
||||
<p>All of these are optional - you can get started with Sushi simply by copying this file or basic.html and
|
||||
editing styles.css directly.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<footer id="gc-footer">
|
||||
<div id="gc-copyright" class="container">
|
||||
<ul>
|
||||
<li><a href="https://github.com/yeoman/sushi">Sushi</a></li>
|
||||
<li><a href="http://www.google.com/">Google</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
(function(document) {
|
||||
var toggleDocumentationMenu = function() {
|
||||
var navBtn = document.querySelector('.main-nav__btn');
|
||||
var navList = document.querySelector('.main-nav__list');
|
||||
var navIsOpenedClass = 'nav-is-opened';
|
||||
var navListIsOpened = false;
|
||||
|
||||
navBtn.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!navListIsOpened) {
|
||||
addClass(navList, navIsOpenedClass);
|
||||
navListIsOpened = true;
|
||||
} else {
|
||||
removeClass(navList, navIsOpenedClass);
|
||||
navListIsOpened = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var toggleMainNav = function() {
|
||||
var documentationItem =
|
||||
document.querySelector('.main-nav__item--documentation');
|
||||
var documentationLink =
|
||||
document.querySelector('.main-nav__item--documentation > .main-nav__link');
|
||||
var documentationIsOpenedClass = 'subnav-is-opened';
|
||||
var documentationIsOpened = false;
|
||||
|
||||
documentationLink.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!documentationIsOpened) {
|
||||
documentationIsOpened = true;
|
||||
addClass(documentationItem, documentationIsOpenedClass);
|
||||
} else {
|
||||
documentationIsOpened = false;
|
||||
removeClass(documentationItem, documentationIsOpenedClass);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
var isTouch = function() {
|
||||
return ('ontouchstart' in window) ||
|
||||
window.DocumentTouch && document instanceof DocumentTouch;
|
||||
};
|
||||
|
||||
var addClass = function (element, className) {
|
||||
if (!element) { return; }
|
||||
element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
|
||||
}
|
||||
|
||||
var removeClass = function(element, className) {
|
||||
if (!element) { return; }
|
||||
element.className = element.className.replace(className, '');
|
||||
}
|
||||
|
||||
var html = document.querySelector('html');
|
||||
removeClass(html, 'no-js');
|
||||
addClass(html, 'js');
|
||||
|
||||
if (isTouch()) {
|
||||
removeClass(html, 'no-touch');
|
||||
addClass(html, 'is-touch');
|
||||
}
|
||||
|
||||
toggleDocumentationMenu();
|
||||
toggleMainNav();
|
||||
})(document);
|
||||
Loading…
Reference in New Issue
Block a user