CSS Grid Admin Dashboard

css-grid-admin-dashboard.markdown

CSS Grid Admin Dashboard

A dashboard-style admin interface built using CSS Grid, with a Flexbox fallback for older browsers.

A Pen by Max Böck on CodePen.

License.

index.html

<div class="admin">
  <header class="admin__header">
    <a href="#" class="logo">
      <h1>GridAdmin</h1>
    </a>
    <div class="toolbar">
      <button class="btn btn--primary">Add New Plumbus</button>
      <a href="#" class="logout">
        Log Out
      </a>
    </div>
  </header>
  <nav class="admin__nav">
    <ul class="menu">
      <li class="menu__item">
        <a class="menu__link" href="#">Dashboard</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#">Sales</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#">Campagins</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#">Servers</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#">Foobars</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#">Plumbuses</a>
      </li>
    </ul>
  </nav>
  <main class="admin__main">
    <h2>Dashboard</h2>
    <div class="dashboard">
      <div class="dashboard__item">
        <div class="card">
          <strong>41</strong> Foobars
        </div>
      </div>
      <div class="dashboard__item">
        <div class="card">
          <strong>81.712</strong> Doohickeys
        </div>
      </div>
      <div class="dashboard__item dashboard__item--full">
        <div class="card">
          <img src="https://imgs.xkcd.com/comics/decline.png" alt="" />
        </div>
      </div>
      <div class="dashboard__item dashboard__item--col">
        <div class="card">A</div>
      </div>
      <div class="dashboard__item dashboard__item--col">
        <div class="card">B</div>
      </div>
      <div class="dashboard__item dashboard__item--col">
        <div class="card">C</div>
      </div>
      <div class="dashboard__item dashboard__item--col">
        <div class="card">D</div>
      </div>
    </div>
    <p>read more about this in <a href="https://mxb.at/blog/css-grid-admin-dashboard/">this blogpost</a>.</p>
  </main>
  <footer class="admin__footer">
    <ul class="ticker">
      <li class="ticker__item">BTC: +3.12%</li>
      <li class="ticker__item">ETH: +1.29%</li>
      <li class="ticker__item">XRP: -0.32%</li>
      <li class="ticker__item">BCH: -2.82%</li>
      <li class="ticker__item">EOS: +1.44%</li>
      <li class="ticker__item">CSS: +13.37%</li>
    </ul>
    <span>
      &copy; 2018 Grid Inc.
    </span>
  </footer>
</div>

style.scss

// Static Variables

$admin-header-height: 70px;
$admin-footer-height: 70px;
$admin-nav-width: 250px;

// Global CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100%;
  overflow-x: hidden;
}

// Main Layout Grid

.admin {
  --spacing: 1rem;

  // Flexbox Fallback
  display: flex;
  flex-wrap: wrap;

  // Grid
  display: grid;
  height: 100vh;

  grid-template-rows:     $admin-header-height 1fr $admin-footer-height;
  grid-template-columns:  $admin-nav-width 1fr;
  grid-template-areas:    "header header"
                          "nav    main"
                          "footer footer";

  &__header {
    display: flex;
    flex-basis: 100%;
    grid-area: header;
    height: $admin-header-height;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: relative;
  }

  &__nav {
    flex: 0 0 $admin-nav-width;
    grid-area: nav;
    background-color: #313541;
  }

  &__main {
    flex: 1;
    grid-area: main;
    padding: var(--spacing);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    background-color: #f4f7fa;
  }

  &__footer {
    display: flex;
    grid-area: footer;
    flex-basis: 100%;
    justify-content: space-between;
    align-items: center;
    height: $admin-footer-height;
    padding: 0 var(--spacing);
    color: #4e5561;
    background-color: #1d2127;
  }

  @media screen and (min-width: 48rem) {
    --spacing: 2rem;
  }
}

// Dashboard Overview Grid

.dashboard {
  --column-count: 2;

  // Flexbox Fallback
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing) * -0.5);

  // Grid
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  grid-gap: var(--spacing);

  &__item {
    // By default, items span 2 columns
    flex: 1 1 50%;
    grid-column-end: span 2;
    padding: calc(var(--spacing) / 2);

    // these span the full width
    &--full {
      flex-basis: 100%;
      grid-column: 1 / -1;
    }

    // these span only one column
    &--col {
      flex-basis: calc(100% / var(--column-count));
      grid-column-end: span 1;
    }
  }

  // Switch to 4-col grid on larger screens
  @media screen and (min-width: 48rem) {
    --column-count: 4;
  }

  // If we have grid support, reset the margins and paddings;
  // grid-gap handles the spacing for us.
  @supports (display: grid) {
    margin: 0;

    &__item {
      padding: 0;
    }
  }
}

// ===============================
// Demo stuff to make it look nice
// ===============================

a {
  color: #dc5a60;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.logo {
  display: flex;
  flex: 0 0 $admin-nav-width;
  height: $admin-header-height;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0;
  color: #fff;
  background-color: #dc5a60;
  font-size: 1rem;

  h1 {
    margin: 0;
  }
}

.toolbar {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing);
}

.menu {
  list-style-type: none;
  padding: 0;

  &__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  &__link {
    display: block;
    padding: 1rem 2rem;
    color: #76808f;
    text-decoration: none;

    &:hover,
    &:focus {
      color: #fff;
      background-color: #1f222d;
    }
  }
}

.card {
  height: 100%;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn {
  display: inline-block;
  border-radius: 5em;
  border: 0;
  padding: 0.5rem 1rem;
  white-space: nowrap;

  &--primary {
    color: #fff;
    background-color: #56bf89;
  }
}

.ticker {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  &__item {
    margin-right: 1rem;
  }
}