Grid Admin Template

by ethanpil

HTML

<header class="box">
  <div class="header-left">
  Left
  </div>
  <div class="header-center">
  Center
  </div>
</header>
<aside class="box">
   <ul>
      <li><span>Navigation</span></li>
      <li><a class="active">Dashboard</a></li>
      <li><a>Statistics</a></li>
      <li><a>Roadmap</a></li>
      <li><a>Milestones</a></li>
      <li><a>Tickets</a></li>
      <li><a>GitHub</a></li>
      <li><a>FAQ</a></li>
      <li><span>Other</span></li>
      <li><a>Search</a></li>
      <li><a>Settings</a></li>
      <li><a>Logout</a></li>
    </ul>
</aside>
<main class="box"></main>
<footer class="box"><div>&copy; 1900-2024</div></footer>

CSS

/* Variables */
:root {
 --primary-dark: hsl(0, 0%, 25%);
 --dark-lighter: hsl(0, 0%, 30%);
 --dark-darker: hsl(0, 0%, 18%);
 
 --primary-light: hsl(0, 0%, 96%)
 --light-lighter: hsl(0, 0%, 100%);
 --light-darker: hsl(0, 0%, 89%);
}

/* Layout */
* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
    grid-template-columns: 2fr 6fr 1fr;
    grid-template-rows: 100px auto 50px;
    height: 100vh;

    
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #777;
}

header {
  grid-area: header;
  
  display: grid;
  grid-template-areas:
    "header-left header-center header-center";
  grid-template-columns: 2fr 6fr 1fr;
    
}
.header-left {
  grid-area: header-left;
    padding: 15px;
}

.header-center {
  grid-area: header-center;
    padding: 15px;
}


aside {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

/* End Layout */

/* Header */
header {
    place-content: center center;
  background-color: var(--dark-lighter);
}

/* Sidebar Menu */

aside {
  background-color: var(--primary-dark);
}

aside ul span {
  display: block;
  padding: 15px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dark-darker);
  color: var(--light-darker);
}

aside ul a {
  position: relative;
  display: block;
  padding: 10px 15px 12px 30px;
  color: #fff;
  border-bottom: 1px solid var(--dark-darker);
  font-size: .9em;
  letter-spacing: 1px;
}

aside ul a:hover,
aside ul a.active {
  background: var(--dark-lighter);
}

/* Footer */
footer {
  background-color: var(--dark-lighter);
  place-content: center center;
  text-align: center;
}

/* Main */
main {
  background-color: var(--light-darker);
}