MartinSvarrer/layouts.html

## layouts.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Grid</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      background: lightgray;
    }

    .dashboard {
      display: grid;
      grid-template-areas:
        "globalheader globalheader globalheader"
        "navigation applicationheader applicationheader"
        "navigation actionbar actionbar"
        "navigation content context";
      grid-template-rows: 70px 120px 30px 1fr;
      grid-template-columns: 150px 1fr 150px;
      height: 100%;
    }

    .dashboard .globalheader {
      position: fixed;
      height: 70px;
      width: 100%;
    }

    .dashboard .navigation {
      position: fixed;
      top: 70px;
      bottom: 0;
      left: 0;
      width: 150px;
    }

    .task {
      display: grid;
      grid-template-areas:
        "globalheader globalheader"
        "actionbar actionbar"
        "content context";
      grid-template-rows: 70px 30px 1fr;
      grid-template-columns: 1fr 150px;
      background: lightgray;
      height: 100%;
    }

    .task .navigation, .task .applicationheader {
      display: none;
    }

    .globalheader {
      background: #222;
      color: #eee;
      grid-area: globalheader;
    }

    .navigation {
      background: #333;
      grid-area: navigation;
    }

    .menu > a {
      display: block;
    }

    .applicationheader {
      grid-area: applicationheader;
      background: darkred;
      color: white;
    }

    .breadcrumb, .breadcrumb > a {
      color: black;
    }

    .actionbar {
      grid-area: actionbar;
      background: #fff;
    }

    .content {
      grid-area: content;
    }

    .context {
      grid-area: context;
      background: #eee;
    }
  </style>
</head>

<body>
  <!-- in angular we could apply layout directly to components like: <sc-global-header class="globalheader"> -->
  <div id="layout" class="dashboard">
    <header class="globalheader">
      <h1>Application Name</h1>
    </header>
    <aside class="navigation">
      <nav class="menu">
        <a href="/overview">Overview</a>
        <a href="/pervisitor">Per visitor</a>
        <a href="/totalviews">Total views</a>
      </nav>
    </aside>
    <header class="applicationheader">
      <h1>Page name</h1>
      <nav class="breadcrumb">
        <a href="/he">he</a>/<a href="/could">could</a>/<a href="/go">go</a>/<a href="/all">all</a>/<a href="/the">the</a>/<a href="/way">way</a>
      </nav>
    </header>
    <div class="actionbar">
      <select name="actions" id="actions1" onchange="document.getElementById('layout').className = this.value">
        <option selected value="dashboard">Dashboard</option>
        <option value="task">Task page</option>
      </select>
    </div>
    <main class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe ex fugiat facere adipisci nam maxime, qui odio tempore, eius atque error voluptatibus asperiores eum laudantium. Maxime aliquam vel consectetur.</p>
      <p>Magnam sequi tempore vel accusamus error laudantium aperiam corrupti officia maxime natus, nemo fugiat ipsum, reprehenderit tenetur ex libero. Aspernatur quae nostrum vitae vel repellat, omnis esse voluptate. Expedita, magni?</p>
      <p>Expedita dolorum aspernatur minus illum accusamus dolorem vero molestiae in? Cumque nemo excepturi veritatis tempore optio, veniam quibusdam ex quos porro fugiat nam maiores architecto consequatur, nostrum temporibus asperiores, sunt.</p>
      <p>Unde error sapiente natus illum quidem optio deleniti dolorem odio veritatis provident debitis eos, cum amet. Ducimus ea voluptate vel minus natus, nihil labore eveniet, assumenda laboriosam aut eligendi. Doloribus.</p>
      <p>Obcaecati magni dolor neque beatae reiciendis, quaerat repellendus, veritatis. At perspiciatis officiis nam non repellat consequuntur eius sed hic, doloremque quo nihil dolor cumque ipsum necessitatibus, cum debitis fuga enim.</p>
      <p>Tempora neque debitis voluptate quasi, nisi ex tenetur, at distinctio corporis obcaecati deleniti fugit repudiandae, autem excepturi cupiditate. Repellat eius odit repudiandae fugiat, unde asperiores expedita quis vel quidem, nobis.</p>
      <p>Sapiente quos ipsam ullam ab nemo quisquam aliquid eum omnis repudiandae. Fugiat harum aliquam soluta, nemo aut quis labore hic nihil recusandae, enim tempore quidem. Eveniet accusantium, omnis quae praesentium?</p>
      <p>Magnam suscipit aliquid labore voluptatem. Sed illum natus quis aperiam quibusdam. Ut, inventore, alias corporis nobis, cum tempore quia magnam molestiae tempora porro rerum dolorum ullam, perferendis quidem ratione in.</p>
      <p>Eveniet, unde quis consectetur dolorem odit perspiciatis omnis repellat magnam, aspernatur. Recusandae eaque esse, corporis dolorum velit sint laudantium quisquam reprehenderit. Aliquam adipisci quibusdam corporis totam quod. Quos, quo, necessitatibus!</p>
      <p>Voluptate nam, modi mollitia quaerat, consectetur aut suscipit delectus cum debitis facere ratione, asperiores veritatis, a repudiandae sunt non laudantium! Officiis voluptatum repellat repellendus dolor facilis dolores tempore laborum, harum!</p>
      <p>Harum nesciunt veritatis fugiat voluptates animi, odit quo. Nihil nobis possimus earum animi, libero nisi non illum enim aspernatur id similique minima quod, magni. Reprehenderit dolorum iusto ullam voluptate doloribus.</p>
      <p>Placeat vel eum, pariatur facere, esse maxime eos qui, dolor recusandae, cum ratione sapiente voluptate quidem deleniti temporibus sequi officia labore? Odio asperiores quaerat aliquid nulla molestiae sit nihil quod?</p>
      <p>At temporibus facere architecto omnis natus nemo odit ullam. Accusantium illo vel, rerum vero, magni omnis quisquam sapiente excepturi officia atque dicta nesciunt facere, aliquid dolorem ratione blanditiis debitis amet!</p>
      <p>Eveniet mollitia eligendi at iure eum quam, quidem distinctio ipsum perferendis quos id, quibusdam necessitatibus, recusandae iste aspernatur veritatis. Temporibus, praesentium, itaque! Omnis eligendi expedita alias, unde quo ab cum.</p>
      <p>Sapiente quisquam perspiciatis accusamus aliquid debitis obcaecati cumque hic, reiciendis consequatur repellat fuga minima possimus maiores non distinctio error dicta tenetur rem sint. Facilis ut tempora quaerat rerum itaque animi!</p>
      <p>Tenetur inventore perferendis, eos, eaque sint ducimus aut quae libero itaque vero odit veniam animi a ipsa minus ea aperiam facere neque sequi, quasi ratione maxime. Veritatis repellendus minus quod?</p>
      <p>Totam, facere blanditiis natus ab maiores illum amet libero consequatur quaerat repellendus tempora iure deleniti modi quibusdam quia sapiente animi ea praesentium odit. Non ipsam, atque labore libero, soluta placeat.</p>
      <p>Odit nam id illum eligendi, beatae aperiam eaque, adipisci natus voluptatum sit rerum in, quisquam reiciendis vel quo neque aliquid a doloribus enim doloremque laboriosam delectus necessitatibus optio. Incidunt, eligendi.</p>
      <p>Doloremque accusamus deserunt earum odit. Alias quos repellendus corporis, molestias nulla quo quae, nam veniam deleniti impedit, architecto repudiandae est libero voluptas nostrum ipsam illo inventore perferendis sequi iste recusandae.</p>
      <p>Natus incidunt voluptatibus ullam, molestias magni quo, possimus illum, debitis a quae officiis. Sit repudiandae distinctio, iure in numquam tenetur error maiores temporibus vitae similique beatae dicta eaque, laudantium repellat!</p>
    </main>
    <aside class="context">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, libero enim velit minima excepturi, quasi voluptatibus
        neque aliquam quidem officia officiis natus? Doloribus, hic minima sed optio ipsam vitae? Perferendis.</p>
    </aside>
  </div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Grid</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	background: lightgray;
	}

	.dashboard {
	display: grid;
	grid-template-areas:
	"globalheader globalheader globalheader"
	"navigation applicationheader applicationheader"
	"navigation actionbar actionbar"
	"navigation content context";
	grid-template-rows: 70px 120px 30px 1fr;
	grid-template-columns: 150px 1fr 150px;
	height: 100%;
	}

	.dashboard .globalheader {
	position: fixed;
	height: 70px;
	width: 100%;
	}

	.dashboard .navigation {
	position: fixed;
	top: 70px;
	bottom: 0;
	left: 0;
	width: 150px;
	}

	.task {
	display: grid;
	grid-template-areas:
	"globalheader globalheader"
	"actionbar actionbar"
	"content context";
	grid-template-rows: 70px 30px 1fr;
	grid-template-columns: 1fr 150px;
	background: lightgray;
	height: 100%;
	}

	.task .navigation, .task .applicationheader {
	display: none;
	}

	.globalheader {
	background: #222;
	color: #eee;
	grid-area: globalheader;
	}

	.navigation {
	background: #333;
	grid-area: navigation;
	}

	.menu > a {
	display: block;
	}

	.applicationheader {
	grid-area: applicationheader;
	background: darkred;
	color: white;
	}

	.breadcrumb, .breadcrumb > a {
	color: black;
	}

	.actionbar {
	grid-area: actionbar;
	background: #fff;
	}

	.content {
	grid-area: content;
	}

	.context {
	grid-area: context;
	background: #eee;
	}
	</style>
	</head>

	<body>
	<!-- in angular we could apply layout directly to components like: <sc-global-header class="globalheader"> -->
	<div id="layout" class="dashboard">
	<header class="globalheader">
	<h1>Application Name</h1>
	</header>
	<aside class="navigation">
	<nav class="menu">
	<a href="/overview">Overview</a>
	<a href="/pervisitor">Per visitor</a>
	<a href="/totalviews">Total views</a>
	</nav>
	</aside>
	<header class="applicationheader">
	<h1>Page name</h1>
	<nav class="breadcrumb">
	<a href="/he">he</a>/<a href="/could">could</a>/<a href="/go">go</a>/<a href="/all">all</a>/<a href="/the">the</a>/<a href="/way">way</a>
	</nav>
	</header>
	<div class="actionbar">
	<select name="actions" id="actions1" onchange="document.getElementById('layout').className = this.value">
	<option selected value="dashboard">Dashboard</option>
	<option value="task">Task page</option>
	</select>
	</div>
	<main class="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe ex fugiat facere adipisci nam maxime, qui odio tempore, eius atque error voluptatibus asperiores eum laudantium. Maxime aliquam vel consectetur.</p>
	<p>Magnam sequi tempore vel accusamus error laudantium aperiam corrupti officia maxime natus, nemo fugiat ipsum, reprehenderit tenetur ex libero. Aspernatur quae nostrum vitae vel repellat, omnis esse voluptate. Expedita, magni?</p>
	<p>Expedita dolorum aspernatur minus illum accusamus dolorem vero molestiae in? Cumque nemo excepturi veritatis tempore optio, veniam quibusdam ex quos porro fugiat nam maiores architecto consequatur, nostrum temporibus asperiores, sunt.</p>
	<p>Unde error sapiente natus illum quidem optio deleniti dolorem odio veritatis provident debitis eos, cum amet. Ducimus ea voluptate vel minus natus, nihil labore eveniet, assumenda laboriosam aut eligendi. Doloribus.</p>
	<p>Obcaecati magni dolor neque beatae reiciendis, quaerat repellendus, veritatis. At perspiciatis officiis nam non repellat consequuntur eius sed hic, doloremque quo nihil dolor cumque ipsum necessitatibus, cum debitis fuga enim.</p>
	<p>Tempora neque debitis voluptate quasi, nisi ex tenetur, at distinctio corporis obcaecati deleniti fugit repudiandae, autem excepturi cupiditate. Repellat eius odit repudiandae fugiat, unde asperiores expedita quis vel quidem, nobis.</p>
	<p>Sapiente quos ipsam ullam ab nemo quisquam aliquid eum omnis repudiandae. Fugiat harum aliquam soluta, nemo aut quis labore hic nihil recusandae, enim tempore quidem. Eveniet accusantium, omnis quae praesentium?</p>
	<p>Magnam suscipit aliquid labore voluptatem. Sed illum natus quis aperiam quibusdam. Ut, inventore, alias corporis nobis, cum tempore quia magnam molestiae tempora porro rerum dolorum ullam, perferendis quidem ratione in.</p>
	<p>Eveniet, unde quis consectetur dolorem odit perspiciatis omnis repellat magnam, aspernatur. Recusandae eaque esse, corporis dolorum velit sint laudantium quisquam reprehenderit. Aliquam adipisci quibusdam corporis totam quod. Quos, quo, necessitatibus!</p>
	<p>Voluptate nam, modi mollitia quaerat, consectetur aut suscipit delectus cum debitis facere ratione, asperiores veritatis, a repudiandae sunt non laudantium! Officiis voluptatum repellat repellendus dolor facilis dolores tempore laborum, harum!</p>
	<p>Harum nesciunt veritatis fugiat voluptates animi, odit quo. Nihil nobis possimus earum animi, libero nisi non illum enim aspernatur id similique minima quod, magni. Reprehenderit dolorum iusto ullam voluptate doloribus.</p>
	<p>Placeat vel eum, pariatur facere, esse maxime eos qui, dolor recusandae, cum ratione sapiente voluptate quidem deleniti temporibus sequi officia labore? Odio asperiores quaerat aliquid nulla molestiae sit nihil quod?</p>
	<p>At temporibus facere architecto omnis natus nemo odit ullam. Accusantium illo vel, rerum vero, magni omnis quisquam sapiente excepturi officia atque dicta nesciunt facere, aliquid dolorem ratione blanditiis debitis amet!</p>
	<p>Eveniet mollitia eligendi at iure eum quam, quidem distinctio ipsum perferendis quos id, quibusdam necessitatibus, recusandae iste aspernatur veritatis. Temporibus, praesentium, itaque! Omnis eligendi expedita alias, unde quo ab cum.</p>
	<p>Sapiente quisquam perspiciatis accusamus aliquid debitis obcaecati cumque hic, reiciendis consequatur repellat fuga minima possimus maiores non distinctio error dicta tenetur rem sint. Facilis ut tempora quaerat rerum itaque animi!</p>
	<p>Tenetur inventore perferendis, eos, eaque sint ducimus aut quae libero itaque vero odit veniam animi a ipsa minus ea aperiam facere neque sequi, quasi ratione maxime. Veritatis repellendus minus quod?</p>
	<p>Totam, facere blanditiis natus ab maiores illum amet libero consequatur quaerat repellendus tempora iure deleniti modi quibusdam quia sapiente animi ea praesentium odit. Non ipsam, atque labore libero, soluta placeat.</p>
	<p>Odit nam id illum eligendi, beatae aperiam eaque, adipisci natus voluptatum sit rerum in, quisquam reiciendis vel quo neque aliquid a doloribus enim doloremque laboriosam delectus necessitatibus optio. Incidunt, eligendi.</p>
	<p>Doloremque accusamus deserunt earum odit. Alias quos repellendus corporis, molestias nulla quo quae, nam veniam deleniti impedit, architecto repudiandae est libero voluptas nostrum ipsam illo inventore perferendis sequi iste recusandae.</p>
	<p>Natus incidunt voluptatibus ullam, molestias magni quo, possimus illum, debitis a quae officiis. Sit repudiandae distinctio, iure in numquam tenetur error maiores temporibus vitae similique beatae dicta eaque, laudantium repellat!</p>
	</main>
	<aside class="context">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, libero enim velit minima excepturi, quasi voluptatibus
	neque aliquam quidem officia officiis natus? Doloribus, hic minima sed optio ipsam vitae? Perferendis.</p>
	</aside>
	</div>

	</body>

	</html>