Skip to content

Instantly share code, notes, and snippets.

@elldotbas
Created January 5, 2019 13:18
Show Gist options
  • Save elldotbas/01c7137f5a9d7386469aa71d32430cd5 to your computer and use it in GitHub Desktop.
Save elldotbas/01c7137f5a9d7386469aa71d32430cd5 to your computer and use it in GitHub Desktop.
CSS Grid Admin Dashboard

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.

<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>
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment