Skip to content

Instantly share code, notes, and snippets.

@rpastorelle

rpastorelle/dabblet.css

Created March 7, 2019 16:45
Show Gist options
  • Save rpastorelle/e7b7b8f3157386e5a6c62c68484fb206 to your computer and use it in GitHub Desktop.
Save rpastorelle/e7b7b8f3157386e5a6c62c68484fb206 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.site{
display:-ms-grid;
display:grid;
-ms-grid-columns:2fr 1fr;
grid-template-columns:2fr 1fr;
grid-template-areas:"header header"
"title sidebar"
"main sidebar"
"footer footer";
margin:20px; padding:10px; border:solid 2px #000;
}
.site > *{padding:30px; color:#fff; font-size:20px;}
.mastheader{background:#b46ae3; -ms-grid-row:1; -ms-grid-column:1; -ms-grid-column-span:2; grid-area:header;}
.page-title{background:#51a7fa; -ms-grid-row:2; -ms-grid-column:1; grid-area:title; margin:0;}
.main-content{
background:#70bf40; -ms-grid-row:3; -ms-grid-column:1; grid-area:main;
min-height:500px;
}
.sidebar{background:#f49018; -ms-grid-row:2; -ms-grid-row-span:2; -ms-grid-column:2; grid-area:sidebar;}
.footer{background:#0265c0; -ms-grid-row:4; -ms-grid-column:1; -ms-grid-column-span:2; grid-area:footer;}
.site:before{content:".site"; position:absolute; left:20px; top:2px; font-weight:bold; font-family:arial;}
Raw
dabblet.html
<div class="site">
<header class="mastheader">main header</header>
<h1 class="page-title">page title</h1>
<div class="main-content">MAIN CONTENT</div>
<aside class="sidebar">sidebar</aside>
<footer class="footer">main footer</footer>
</div>
<!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment