Skip to content

Instantly share code, notes, and snippets.

@kijtra kijtra/template.html
Last active Mar 31, 2017

Embed
What would you like to do?
Pure CSS Admin Template skeleton (demo: https://codepen.io/kijtra/pen/MpZeGq )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Template</title>
<link rel="stylesheet" href="template.css">
</head>
<body>
<input type="checkbox" id="toggle-sidebar">
<section class="-wrap">
<section class="-body">
<header class="-heading">
<!-- heading (Hero etc...) -->
</header>
<nav class="-nav">
<!-- nav (Tab etc...) -->
</nav>
<main class="-content">
<!-- main content -->
</main>
<footer class="-footer">
<!-- footer -->
</footer>
</section>
<aside class="-sidebar">
<!-- sidebar -->
</aside>
<header class="-header">
<!-- header -->
</header>
</section>
</body>
</html>
html {
height:100%;
}
* {
box-sizing:border-box;
}
$admtmp-header-height: 50px !default;
$admtmp-sidebar-width: $admtmp-header-height * 5 !default;
$admtmp-breakpoint: 768px;
$admtmp-header-height-mobile: $admtmp-header-height !default;
$admtmp-sidebar-width-mobile: $admtmp-sidebar-width !default;
$admtmp-sidebar-toggle-name: "toggle-sidebar" !default;
$admtmp-sidebar-speed: .3s !default;
$admtmp-sidebar-animation: ease-in-out !default;
$admtmp-sidebar-backdrop-color: rgba(0,0,0,.5) !default;
$admtmp-sidebar-backdrop-speed: .6s !default;
body {
height:100%;
margin:0;
##{$admtmp-sidebar-toggle-name} {
display:none;
}
// wrapper
##{$admtmp-sidebar-toggle-name} + section:first-of-type {
min-height: 100vh;
display: flex;
flex-flow: row wrap;
// body
> section:first-of-type {
width:calc(100% - #{$admtmp-sidebar-width});
min-height: calc(100vh - #{$admtmp-header-height});
flex:1;
order:3;
display: flex;
flex-flow: column wrap;
// content
> main:first-of-type {
flex: 1;
overflow-x: auto;
}
// nav
> nav:first-of-type {
overflow-x: auto;
}
// if empty
> header:empty, nav:empty, footer:empty, header:blank, nav:blank, footer:blank {
display:none;
}
}
// sidebar
> aside:first-of-type {
min-height: calc(100vh - #{$admtmp-header-height});
width: $admtmp-sidebar-width;
order: 2;
overflow-y: auto;
}
// header
> header:first-of-type {
height: $admtmp-header-height;
flex: 1 100%;
order: 1;
// Sidebar Toggler
@media screen and (min-width: $admtmp-breakpoint) {
label[for="#{$admtmp-sidebar-toggle-name}"] {
display: none;
}
}
}
}
@media screen and (max-width: #{$admtmp-breakpoint - 1}) {
// wrapper
##{$admtmp-sidebar-toggle-name} + section:first-of-type {
padding-top: $admtmp-header-height-mobile;
// body
> section:first-of-type {
width: 100%;
position: relative;
z-index: 1;
flex: none;
&:before, &:after {
position: fixed;
content: '';
top: 0;
}
&:before {
width: 300vw;
height: 100vh;
display: block;
right: 100vw;
z-index: 1;
box-shadow: 200vw 0 0 rgba($admtmp-sidebar-backdrop-color, 0);
transition: box-shadow $admtmp-sidebar-backdrop-speed linear;
background:red;
}
&:after {
display: none;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
}
// sidebar
> aside:first-of-type {
width: $admtmp-sidebar-width-mobile;
height: 0;
min-height: none;
position: fixed;
top: $admtmp-header-height-mobile;
left: 0;
bottom: 0;
z-index: 1;
flex: none;
transition: transform $admtmp-sidebar-speed $admtmp-sidebar-animation;
transform: translateX(-$admtmp-sidebar-width-mobile);
-webkit-overflow-scrolling: touch;
}
// header
> header:first-of-type {
height: $admtmp-header-height-mobile;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
flex: none;
}
}
##{$admtmp-sidebar-toggle-name}:checked + section {
// body
> section:first-of-type {
&:before {
box-shadow: 200vw 0 0 $admtmp-sidebar-backdrop-color;
}
&:before {
display: block;
}
}
// sidebar
> aside:first-of-type {
transform: translateX(0);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.