Skip to content

Instantly share code, notes, and snippets.

@mattdanielbrown

mattdanielbrown/comprehensive-html-head-content-for-pwa-webapps.markdown

Created August 11, 2022 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattdanielbrown/362ea27c3e057b833afcabd733159b49 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattdanielbrown/362ea27c3e057b833afcabd733159b49 to your computer and use it in GitHub Desktop.
Download ZIP
Comprehensive HTML Head Content For PWA (WebApps)
Raw
comprehensive-html-head-content-for-pwa-webapps.markdown

Comprehensive HTML Head Content For PWA (WebApps)

Comprehensive HTML Head Content For Progressive Web Applications (WebApps).

A Pen by Matt Daniel Brown on CodePen.

License.

Raw
index.html
<header>
<hgroup>
<h1>Comprehensive HTML Head Content <small>For PWAs (WebApps)</small></h1>
</hgroup>
</header>
<main>
<section>
<h2>PWA HTML Head Content:</h2>
<pre class="language-markup"><code>&lt;!DOCTYPE HTML&gt;
&lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0,shrink-to-fit=no,viewport-fit=cover&quot;&gt;
&lt;meta name=&quot;application-name&quot; content=&quot;Application Name&quot;&gt;
&lt;title&gt;PWA Favicon Assets&lt;/title&gt;
&lt;meta content=&quot;&quot; name=&quot;description&quot;&gt;
&lt;meta content=&quot;width=device-width, initial-scale=1&quot; name=&quot;viewport&quot;&gt;
&lt;meta content=&quot;__OPENGRAPH_TITLE__&quot; property=&quot;og:title&quot;&gt;
&lt;meta content=&quot;__OPENGRAPH_TYPE__&quot; property=&quot;og:type&quot;&gt;
&lt;meta content=&quot;__OPENGRAPH_URL__&quot; property=&quot;og:url&quot;&gt;
&lt;meta content=&quot;__OPENGRAPH_IMAGE__&quot; property=&quot;og:image&quot;&gt;
&lt;!-- WebApp/PWA : Site Manifest --&gt;
&lt;!-- &lt;link href=&quot;site.webmanifest&quot; rel=&quot;manifest&quot;&gt; --&gt;
&lt;!-- Stylesheets --&gt;
&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;css/stylesheet.min.css&quot;&gt; --&gt;
&lt;!-- @NOTE: Place favicon.ico in the root directory --&gt;
&lt;!-- Favicon Assets --&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;57x57&quot; href=&quot;/apple-icon-57x57.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;60x60&quot; href=&quot;/apple-icon-60x60.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;/apple-icon-72x72.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;/apple-icon-76x76.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;/apple-icon-114x114.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;120x120&quot; href=&quot;/apple-icon-120x120.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;144x144&quot; href=&quot;/apple-icon-144x144.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;152x152&quot; href=&quot;/apple-icon-152x152.png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/apple-icon-180x180.png&quot;&gt;
&lt;!-- &lt;link href=&quot;icon.png&quot; rel=&quot;apple-touch-icon&quot;&gt; --&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;192x192&quot; href=&quot;/android-icon-192x192.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;/favicon-32x32.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;96x96&quot; href=&quot;/favicon-96x96.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;/favicon-16x16.png&quot;&gt;
&lt;!-- &lt;link rel=&quot;icon&quot; href=&quot;gnome.svg&quot; sizes=&quot;any&quot; type=&quot;image/svg+xml&quot;&gt; --&gt;
&lt;!-- &lt;link rel=&quot;icon&quot; href=&quot;windows.ico&quot; sizes=&quot;32x32 48x48&quot; type=&quot;image/vnd.microsoft.icon&quot;&gt; --&gt;
&lt;!-- &lt;link rel=&quot;icon&quot; href=&quot;mac.icns&quot; sizes=&quot;128x128 512x512 8192x8192 32768x32768&quot;&gt; --&gt;
&lt;!-- WebApp/PWA : Site Manifest --&gt;
&lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot;&gt;
&lt;!-- Tile Images and Colors --&gt;
&lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#023FF5&quot;&gt;
&lt;meta name=&quot;msapplication-TileImage&quot; content=&quot;/ms-icon-144x144.png&quot;&gt;
&lt;!-- WebApp/PWA : Theme Color --&gt;
&lt;meta name=&quot;theme-color&quot; content=&quot;#023FF5&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</section>
</main>
<footer>
<p>Copyright &copy; 2021. All Rights Reserved.</p>
</footer>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
Raw
style.scss
//---------------------------
/* VARIABLES */
//---------------------------
$inter-fontstack: 'Inter UI', Inter UI, "Inter",
Inter, 'inter-ui', inter;
$system-fonts: -apple-system, system-ui,
BlinkMacSystemFont, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, sans-serif !default;
$main-fontstack: $inter-fontstack,$system-fonts;
//Basic stylings
$br: .25rem !default;
$xs-pad: .25rem !default;
$sm-pad: .5rem !default;
$md-pad: 1rem !default;
$lg-pad: 1.25rem !default;
$xlg-pad: 4rem !default;
$trans: 0.3s !default;
//Breakpoints
$small-breakpoint: 400px !default;
$large-breakpoint: 768px !default;
$sm-brkpoint: 400px !default;
$lg-brkpoint: 768px !default;
//Colors
// $primary: #007bff !default;
$primary: #6400FF;
$secondary: #434343;
$default-button: #dedede;
$default: $default-button;
$default-text: #555;
$accent: #64ffda !default;
$red: #f44336 !default;
$yellow: #ffeb3b !default;
$grey: #f7f7f9 !default;
$white: #fff !default;
$black: #000 !default;
//Text
$text: rgba(0, 0, 0, 0.8) !default;
$secondary: rgba(0, 0, 0, 0.54) !default;
$disabled: rgba(0, 0, 0, 0.38) !default;
$dividers: rgba(0, 0, 0, 0.12) !default;
//Links
$link-color: $primary !default;
$link-hover-color:darken($link-color, 15%)!default;
//---------------------------
/* LAYOUT AND UTILS */
//---------------------------
%container {
width: 90%;
max-width: 768px;
margin-left: auto;
margin-right: auto;
max-width: 65ch;
/* padding: 2em 0; */
}
*,*::before,*::after {
box-sizing: border-box !important;
}
.container,
body>header:first-of-type>*,
body>main>* {@extend %container;}
body>footer:last-of-type {
background-color: ghostwhite;
width: 100vw;
padding: 2rem 0;
margin: 0;
text-align: center;
line-height: 1;
p {
font-size: small;
text-align: center;
margin: 0 auto !important;
line-height: 1;
padding: 0;
color: gray;
font-weight: 500;
vertical-align: middle;
}
}
body>header:first-of-type {
width: 100vw;
padding: 2rem 0;
background-color: ghostwhite;
}
//---------------------------
/* BASE */
//---------------------------
:root {
font-size: 19px;
}
html,body {
font-family: $main-fontstack;
height: 100%;
min-height: 100vh;
width: 100vw;
max-width: 100vw;
min-width: 320px;
margin: 0;
padding: 0;
background-color: #fff;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
//---------------------------
/* Typography */
//---------------------------
h1, h2, h3, h4, h5, h6 {
line-height: 1;
margin: .25rem auto .75rem;
}
p {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 1rem;
&:last-of-type, &:last-child, & + p {
margin-bottom: 2rem;
}
}
em {
samp,code {
font-style: normal;
}
}
//---------------------------
/* Layout */
//---------------------------
section {
padding: 2rem 0;
margin-bottom: 2rem;
}
main {
padding: 1rem 0;
flex-grow: 1;
}
//---------------------------
/* FIXED WIDTH ELEMENTS */
//---------------------------
samp {
font-size: 0.75rem !important;
line-height: 1 !important;
font-weight: 500 !important;
}
pre,code,samp {
border-radius: 6px !important;
font-family: "FiraCode", FiraCode,
"Firacode", Firacode, "firacode",
firacode, monospace !important;
}
pre,code {
border-radius: 6px !important;
font-size: xx-small !important;
line-height: 1.6 !important;
}
pre[class*="language"] {
padding-top: 1rem !important;
padding-bottom: 1.5rem !important;
line-height: 2 !important;
}
ul,ol {
padding: 0 0 1rem 0;
margin: 0 auto ;
list-style-position: inside;
li {
padding: 0;
line-height: 1.5;
margin: 0.25rem auto;
}
margin-bottom: 2rem !important;
}
h4 {
margin-top: 4rem !important;
}
form {
margin-bottom: 2rem !important;
}
//---------------------------
/* BUTTONS */
//---------------------------
$button-selectors: 'input[type=submit]',
'input[type=reset],input[type=button]',
'button';
.button {
appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent !important;
background-color: $default;
border: $default-text;
// border-radius: $br;
border-radius: 3px;
// color: $white;
text-decoration: none;
color: $default-text;
// padding: $md-pad;
display: inline-block;
font-weight: 600;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none !important;
border: 2px solid transparent;
font-size: 1rem;
line-height: 1;
cursor: pointer;
letter-spacing: .5px;
transform: translatey(0);
transition: color .12s ease-out,
background-color .12s ease-out,
border-color .12s ease-out,
box-shadow .12s ease-out,
transform .12s ease-out;
padding: unset !important;
padding: .5rem 1rem !important;
&::-moz-focus-inner { padding: 0; border: 0; }
&:hover {
background-color: darken($default, 10%);
border-color: darken($default, 10%);
color: $default-text;
}
&:not(:disabled):active {
background-color: darken($default, 20%);
border-color: darken($default, 20%);
color: $default-text;
transform: translatey(2px);
}
&:focus {
background-color: darken($default, 15%);
border-color: darken($default, 15%);
outline: 0;
box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
}
&:disabled {
opacity: .65;
cursor: not-allowed;
background-color: $primary;
border-color: $primary;
color: $white;
}
&.primary {
background-color: $primary;
border-color: $primary;
color: $white;
&:hover {
background-color: darken($primary, 10%);
border-color: darken($primary, 10%);
color: $white;
}
&:not(:disabled):active {
background-color: darken($primary, 20%);
border-color: darken($primary, 20%);
color: $white;
}
&:focus {
outline: 0;
background-color: darken($primary, 15%);
border-color: darken($primary, 15%);
box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
}
}
&.secondary {
background-color: $secondary;
border-color: $secondary;
color: $white;
&:hover {
background-color: darken($secondary, 10%);
border-color: darken($secondary, 10%);
color: $white;
}
&:not(:disabled):active {
background-color: darken($secondary, 20%);
border-color: darken($secondary, 20%);
color: $white;
}
&:focus {
outline: 0;
background-color: darken($secondary, 15%);
border-color: darken($secondary, 15%);
box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25);
}
}
&.outline {
background-color: transparent;
color: $secondary;
border-color: $secondary;
border-width: 2px;
font-weight: 400 !important;
letter-spacing: 1px !important;
&:hover {
background-color: rgba($secondary, 0.125);
color: $secondary;
border: 2px solid $secondary;
}
&:focus {
color: $secondary;
background-color: rgba($secondary, 0.25);
}
&:active {
color: $secondary;
border-color: $secondary;
background-color: rgba($secondary, 0.5);
}
}
}
.outline.primary,.primary.outline {
background-color: transparent;
color: $primary;
border-color: $primary;
border-width: 2px;
font-weight: 400 !important;
letter-spacing: 1px !important;
&:hover {
$_color: darken($primary, 8%);
background-color: rgba($_color, 0.125) !important;
color: $_color;
border-color: $_color;
}
&:focus {
// color: $primary;
// background-color: rgba($primary, 0.25);
$_color: darken($primary, 16%);
color: $_color;
background-color: rgba($_color, 0.2) !important;
}
&:active {
$_color: darken($primary, 20%);
color: $_color !important;
border-color: $_color !important;
background-color: rgba($_color, 0.4) !important;
}
}
#{$button-selectors} {
@extend .button;
}
.button-list {
list-style: none;
padding: 0;
margin: 1em 0 2em;
li {
list-style: none;
margin: 1em 0;
padding: 0;
display: block;
& > * {
display: block;
width: 100%;
margin: 0 !important;
}
}
@media screen and (min-width: 560px) {
li {
width: unset;
display: inline-block;
margin: 0 1em 1em 0 !important;
& > * {
width: unset;
display: inline-block;
margin: 0 !important;
}
}
}
}
//---------------------------
/* FORMS AND INPUTS */
//---------------------------
input[type="text"],input[type="password"],
input[type="email"],input[type="url"],
input[type="date"],input[type="month"],
input[type="time"],input[type="datetime"],
input[type="datetime-local"],
input[type="week"],input[type="number"],
input[type="search"],input[type="tel"],
select, textarea {
background: $white;
background-clip: padding-box;
border: solid 2px lightgray;
border-radius: $br;
color: $text;
display: block;
width: 100%;
font-size: 1rem;
padding: .75rem;
font-weight: 500;
padding-top: .6rem !important;
line-height: 1;
vertical-align: middle !important;
transition: all .15s ease-out;
word-break: normal;
&:hover {
background-color: ghostwhite !important;
border-color: darken(lightgray, 20%) !important;
}
&:focus {
background-color: $white;
// border-color: mix($primary, $white);
border-color: $primary;
outline: 0;
// box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
&:hover {
box-shadow: 0 0 0 0.2rem rgba($primary, 0.3);
border-color: darken($primary, 20%) !important;
}
}
&[disabled] {
background-color: $dividers;
color: $secondary;
cursor: not-allowed;
opacity: 1;
}
}
input[type="color"], {
background: $white;
border-radius: $br;
display: inline-block;
vertical-align: middle;
border: solid 2px lightgray;
}
input:not([type]) {
-webkit-appearance: none;
background: $white;
background-clip: padding-box;
border: solid 2px lightgray;
border-radius: $br;
color: $text;
display: block;
width: 100%;
padding: $sm-pad $md-pad;
line-height: 1.5;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
text-align: left;
word-break: normal;
}
input:not([type]):focus {
background-color: $white;
border-color: mix($primary, $white);
outline: 0;
box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: 1px thin $dividers;
}
input:not([type])[disabled] {
background-color: $dividers;
color: $secondary;
cursor: not-allowed;
opacity: 1;
}
input[readonly],select[readonly],
textarea[readonly] {
border-color: $dividers;
color: $secondary;
}
input:focus:invalid,textarea:focus:invalid,
select:focus:invalid {
border-color: darken($red, 10);
color: $red;
}
input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus {
outline-color: $red;
}
select {
border: solid 2px lightgray;
vertical-align: sub;
}
select:not([size]):not([multiple]) {
height: calc(2.25rem + 2px);
}
select[multiple] {
height: auto;
}
label {
display: inline-block;
display: block;
line-height: 2;
font-weight: 600;
margin-top: 1.5rem;
}
fieldset {
border: 0;
margin: 0;
margin-bottom: 1rem;
padding: .125rem 0;
display: block;
}
legend {
border-bottom:solid 2px lightgray;
color: $text;
display: block;
margin: .125rem auto !important;
padding: 0 !important;
border: none;
font-weight: 600;
font-size: 1.25rem;
line-height: 1;
width: 100%;
display: block;
}
textarea {
overflow: auto;
resize: vertical;
}
[type="checkbox"],[type="radio"] {
appearance: none;
box-sizing: border-box;
padding: .125rem;
display: inline-block;
line-height: 1 !important;
margin: 0 !important;
background-color: ghostwhite;
min-width: .5em;
min-height: .5em;
width: 1.125em;
height: 1.125em;
font-size: 1em;
vertical-align: middle;
border: 2px solid darkgray;
box-sizing: border-box !important;
cursor: pointer;
user-select: none !important;
border-radius: 3px;
transition: all .15s;
&::before, &::after {
user-select: none !important;
}
& + label {
&::before, &::after {
user-select: none !important;
}
user-select: none !important;
line-height: 1 !important;
margin: 0 !important;
display: inline-block;
// vertical-align: baseline;
vertical-align: middle;
margin-left: .25rem !important;
cursor: pointer;
user-select: none;
margin-right: 2em !important;
font-size: 1rem !important;
}
&:focus, &:active, &:checked {
outline: none !important;
}
}
form {
display: block;
width: 100%;
padding: 1rem 0 !important;
margin: 1rem auto;
}
label:first-of-type {
margin-top: 1rem;
}
form * {
// border: red solid 1px !important;
}
[type="radio"] {
user-select: none !important;
&::before, &::after {
user-select: none !important;
}
border-radius: .75em;
display: inline-block;
// max-width: 25%;
// float: left;
text-align: left;
margin: .5rem .5rem .5rem .5rem !important;
&:selection, &:focus, &:checked, &::checked, &:active {
background-color: $primary !important;
outline: none !important;
&::before, &::after {
background: $primary !important;
}
}
& + label {
user-select: none !important;
&::before, &::after {
user-select: none !important;
}
// float: right;
// display: block;
// text-align: left;
// display: block !important;
// max-width: 50%;
}
}
[type="checkbox"]:checked {
background-color: $primary !important;
display: block;
&::before {
content: "\2713" !important;
color: white;
bottom: 1px;
width: 95%;
height: 95%;
// left: 1px !important;
position: relative;
font-weight: 500;
transition: all 120ms !important;
vertical-align: baseline !important;
// line-height: .75 !important;
}
}
[type="color"] {
display: block;
width: 100%;
// padding: .5rem 0;
line-height: 2;
margin: .25rem auto 1rem auto;
min-height: 3rem !important;
user-select: none;
border-radius: 8px !important;
appearance: none !important;
border: 2px solid lightgray !important;
&::before, &::after {
border-radius: 8px !important;
}
}
fieldset ~ button {
margin-top: 1rem;
}
mark {
padding: 6px !important;
border-radius: 6px !important;
line-height: 1.5;
margin-bottom: 0.25rem !important;
display: inline-block;
background-color: rgba(yellow, 0.5);
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/3.1.1/mobi.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reseter.css/2.0.0/reseter.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/firacode/5.2.0/fira_code.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css" rel="stylesheet" />
<link href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment