-
-
Save peterblazejewicz/b13d21f3ecce1dc762e6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Web Starter Kit | |
* | |
* Multi-screen layout styles for your page. Brought to you by the | |
* Web Starter Kit team. | |
* | |
*/ | |
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
position: relative; | |
font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif; | |
font-weight: 300; | |
background-color: #FFFFFF; | |
box-sizing: border-box; | |
overflow: hidden; | |
min-height: 100%; | |
} | |
.app-bar { | |
display: block; | |
width: 100%; | |
position: fixed; | |
top: 0; | |
left: 0; | |
background-color: #4285f4; | |
overflow: hidden; | |
z-index: 1; | |
} | |
.app-bar-container { | |
display: -webkit-flex; | |
display: flex; | |
width: 100%; | |
height: 60px; | |
position: relative; | |
-webkit-flex-direction: row; | |
flex-direction: row; | |
margin: 0 auto; | |
} | |
.app-bar.open, | |
.app-bar.open ~ main { | |
-webkit-transform: translate(250px, 0); | |
transform: translate(250px, 0); | |
} | |
.app-bar .logo { | |
-webkit-flex: 1; | |
flex: 1; | |
font-size: 2em; | |
line-height: 60px; | |
margin: 0 16px; | |
padding: 0; | |
color: #fefefe; | |
float: none; | |
max-width: none; | |
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, sans-serif; | |
font-weight: 300; | |
line-height: 60px; | |
} | |
.app-bar .logo a { | |
text-decoration: none; | |
color: inherit; | |
font-weight: normal; | |
} | |
.app-bar-actions { | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
flex-direction: row; | |
z-index: 2; | |
} | |
.app-bar button { | |
width: 60px; | |
height: 60px; | |
background-image: none; | |
background-color: transparent; | |
border: none; | |
padding: 0; | |
transition: background-color 0.2s ease-out; | |
-webkit-tap-highlight-color: transparent; | |
} | |
.app-bar button img { | |
width: 60px; | |
height: 60px; | |
} | |
.app-bar button:hover { | |
background-color: rgba(255, 255, 255, 0.1); | |
} | |
.app-bar button:focus { | |
background-color: rgba(255, 255, 255, 0.2); | |
outline: 0; | |
} | |
.app-bar button:active { | |
background-color: rgba(255, 255, 255, 0.4); | |
} | |
button.menu img { | |
height:24px; | |
width: 24px; | |
} | |
.promote-layer { | |
/* | |
This may promote the layer to a composited | |
layer. | |
Replace with will-change when available | |
#perfmatters | |
*/ | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.base, p, ul, ol { | |
font-size: 19px; | |
} | |
.navdrawer-container { | |
z-index: 1; | |
position: fixed; | |
top: 0; | |
bottom: 0; | |
width: 250px; | |
height: 100%; | |
background-color: #3367D6; | |
color: #fefefe; | |
-webkit-transform: translate(-250px, 0); | |
transform: translate(-250px, 0); | |
overflow-y: scroll; | |
} | |
.navdrawer-container.open { | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
.app-bar, .navdrawer-container, main { | |
transition: -webkit-transform 0.3s ease-out; | |
transition: transform 0.3s ease-out; | |
} | |
.navdrawer-container h4, | |
.navdrawer-container ul li a { | |
height: 60px; | |
padding: 0 20px; | |
line-height: 60px; | |
} | |
.navdrawer-container h4 { | |
background-color: white; | |
color: #3367D6; | |
} | |
.navdrawer-container ul { | |
padding: 0; | |
margin: 0; | |
list-style-type: none; | |
} | |
.navdrawer-container ul li a { | |
display: block; | |
text-decoration: none; | |
color: white; | |
transition: background-color 0.2s ease-out; | |
} | |
.navdrawer-container ul li { | |
border-bottom-style: solid; | |
border-width: 1px; | |
border-color: white; | |
padding: 0; | |
} | |
.navdrawer-container ul li:before { | |
content: none; | |
} | |
.navdrawer-container ul li a:hover { | |
background-color: rgba(255, 255, 255, 0.2); | |
} | |
.navdrawer-container ul li a:focus { | |
background-color: rgba(255, 255, 255, 0.3); | |
outline: 0; | |
} | |
.navdrawer-container ul li a:active { | |
background-color: rgba(255, 255, 255, 0.4); | |
} | |
main { | |
margin: 0 auto; | |
/* Height of the header */ | |
padding: 60px 16px 16px 16px; | |
min-height: 100%; | |
} | |
/** Larger Screens - desktops and tablets **/ | |
@media all and (min-device-width: 1200px) { | |
.app-bar { | |
position: relative; | |
} | |
.app-bar-container { | |
display: block; | |
height: 130px; | |
max-width: 864px; | |
padding: 0 16px; | |
box-sizing: border-box; | |
background-color: #4285f4; | |
} | |
.app-bar .logo { | |
float: left; | |
margin: 0; | |
padding: 0; | |
line-height: 130px; | |
font-size: 46px; | |
} | |
.app-bar-actions { | |
float: right; | |
} | |
.app-bar:after { | |
content: ' '; | |
display: block; | |
height: 0; | |
overflow: hidden; | |
clear: both; | |
} | |
button.menu { | |
display: none; | |
} | |
nav { | |
display: block; | |
margin-top: 130px; | |
} | |
.navdrawer-container { | |
position: relative; | |
width: 100%; | |
height: auto; | |
margin-top: 130px; | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
transition: none; | |
overflow-y: auto; | |
} | |
.navdrawer-container h4 { | |
display: none; | |
} | |
.navdrawer-container ul { | |
display: -webkit-flex; | |
display: flex; | |
max-width: 864px; | |
margin: 0 auto; | |
-webkit-flex-direction: row; | |
flex-direction: row; | |
} | |
.navdrawer-container ul li { | |
border: none; | |
} | |
main { | |
max-width: 864px; | |
padding-top: 0; | |
min-height: initial; | |
} | |
body { | |
overflow-y: scroll; | |
} | |
.navdrawer-container { | |
position: relative; | |
margin-top: 0; | |
} | |
} | |
@media all and (min-device-width: 1200px) and (max-width: 800px) { | |
.app-bar .logo { | |
float: none; | |
width: 100%; | |
line-height: normal; | |
text-align: center; | |
padding-top: 36px; | |
} | |
.app-bar-container { | |
height: auto; | |
} | |
.app-bar-actions { | |
width: 100%; | |
} | |
.navdrawer-container { | |
padding: 0 16px; | |
overflow-y: auto; | |
} | |
.navdrawer-container li { | |
-webkit-flex: 1; | |
flex: 1; | |
text-align: center; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> | |
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> | |
<title>Web Starter Kit</title> | |
<!-- Add to homescreen for Chrome on Android --> | |
<meta name="mobile-web-app-capable" content="yes"> | |
<!-- iOS icons --> | |
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/custom/webstarterkit/images/touch/apple-touch-icon-144x144-precomposed.png"> | |
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/custom/webstarterkit/images/touch/apple-touch-icon-114x114-precomposed.png"> | |
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/custom/webstarterkit/images/touch/apple-touch-icon-72x72-precomposed.png"> | |
<link rel="apple-touch-icon-precomposed" href="/custom/webstarterkit/images/touch/apple-touch-icon-57x57-precomposed.png"> | |
<!-- Tile icon for Win8 (144x144 + tile color) --> | |
<meta name="msapplication-TileImage" content="/custom/webstarterkit/images/touch/ms-touch-icon-144x144-precomposed.png"> | |
<meta name="msapplication-TileColor" content="#3372DF"> | |
<!-- Generic Icon --> | |
<link rel="shortcut icon" href="/custom/webstarterkit/images/touch/touch-icon-57x57.png"> | |
<!-- SEO: If mobile URL is different from desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> | |
<!-- | |
<link rel="canonical" href="http://www.example.com/"> | |
--> | |
<!-- Chrome Add to Homescreen --> | |
<link rel="shortcut icon" sizes="196x196" href="/custom/webstarterkit/images/touch/touch-icon-196x196.png"> | |
<!-- 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=""> | |
--> | |
<!-- build:css styles/components/main.min.css --> | |
<link rel="stylesheet" href="/custom/webstarterkit/styles/h5bp.css"> | |
<link rel="stylesheet" href="/custom/webstarterkit/styles/components/components.css"> | |
<!-- endbuild --> | |
</head> | |
<body> | |
<header class="app-bar promote-layer"> | |
<div class="app-bar-container"> | |
<button class="menu"><img src="/custom/webstarterkit/images/hamburger.svg"></button> | |
<h1 class="logo">Web Starter Kit</h1> | |
<section class="app-bar-actions"> | |
<!-- Put App Bar Buttons Here --> | |
</section> | |
</div> | |
</header> | |
<nav class="navdrawer-container promote-layer"> | |
<h4>Navigation</h4> | |
<ul> | |
<li><a href="#hello">Hello</a></li> | |
<li><a href="#get-started">Get Started</a></li> | |
<li><a href="/custom/webstarterkit/styleguide/index.html">Style Guide</a></li> | |
</ul> | |
</nav> | |
<main> | |
<h1 id="hello">Hello!</h1> | |
<p>Welcome to Web Starter Kit.</p> | |
<h2 id="get-started">Get Started.</h2> | |
<p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="/custom/webstarterkit/styleguide/index.html">Style Guide</a>.</p> | |
</main> | |
<!-- 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> | |
<!-- Built with love using Web Starter Kit --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* Web Starter Kit | |
* Copyright 2014 Google Inc. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, | |
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
* See the License for the specific language governing permissions and | |
* limitations under the License | |
* | |
*/ | |
(function () { | |
'use strict'; | |
var navdrawerContainer = document.querySelector('.navdrawer-container'); | |
var appbarElement = document.querySelector('.app-bar'); | |
var menuBtn = document.querySelector('.menu'); | |
var main = document.querySelector('main'); | |
function closeMenu() { | |
appbarElement.classList.remove('open'); | |
navdrawerContainer.classList.remove('open'); | |
} | |
function toggleMenu() { | |
appbarElement.classList.toggle('open'); | |
navdrawerContainer.classList.toggle('open'); | |
} | |
main.addEventListener('ontouchstart', closeMenu); | |
main.addEventListener('click', closeMenu); | |
menuBtn.addEventListener('click', toggleMenu); | |
navdrawerContainer.addEventListener('click', function (event) { | |
if (event.target.nodeName === 'A' || event.target.nodeName === 'LI') { | |
closeMenu(); | |
} | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment