<!doctype html>

<title>#devPunks "HOLY Holy Grid🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Grid</title>


<meta charset=UTF-8>
<meta name='viewport' content='width=device-width,initial-scale=1'>


<link
  as=style
  href=index.css
  rel='preload stylesheet'
>

<style>
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

/* Possibly these should be kept elsewhere */

body.grid > header,
body.grid > main, body.grid > aside,
body.grid > footer
  { outline: 2px dashed #bada55 }

body > header,
body > footer { min-height: 10vh }
</style>


<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

<script src=/browser-sync.es></script>

<!doctype html>

<title>#devPunks "HOLY Holy Grid🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Grid</title>


<meta charset=UTF-8>
<meta name='viewport' content='width=device-width,initial-scale=1'>


<link
  as=style
  href=index.css
  rel='preload stylesheet'
>

<style>
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

/* Possibly these should be kept elsewhere */

body.grid > header,
body.grid > main, body.grid > aside,
body.grid > footer
  { outline: 2px dashed #bada55 }

body > header,
body > footer { min-height: 10vh }

body > header { grid-area: header }
body > footer { grid-area: footer }
</style>


<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

<script src=/browser-sync.es></script>

Add body header for grid areas
Add body header for grid areas
