Created
August 31, 2017 19:57
-
-
Save yoshuawuyts/c073667c4c2d2fbd38fe997b710391df to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var html = require('choo/html') | |
| var css = require('sheetify') | |
| var choo = require('choo') | |
| css('tachyons') | |
| css` | |
| .dg { display: grid } | |
| .dig { display: inline-grid } | |
| .dsg { display: subgrid } | |
| .three-column { | |
| grid-template-columns: 16rem auto 16rem; | |
| grid-template-rows: 8rem auto 8rem; | |
| grid-gap: 1rem 1rem; | |
| } | |
| .container { | |
| grid-template-areas: | |
| "sidebar header header header" | |
| "sidebar main main main" | |
| "sidebar footer footer footer"; | |
| } | |
| .header { grid-area: header } | |
| .footer { grid-area: footer } | |
| .main { grid-area: main } | |
| .sidebar { grid-area: sidebar } | |
| ` | |
| var app = choo() | |
| app.route('/', mainView) | |
| app.mount('body') | |
| function mainView (state, emit) { | |
| emit(state.events.DOMTITLECHANGE, 'CSS grid') | |
| return html` | |
| <body class="dg sans-serif three-column container debug-black debug-grid"> | |
| <header class="header"> | |
| This is a header | |
| </header> | |
| <aside class="sidebar vh-100"> | |
| This is a sidebar | |
| </aside> | |
| <main class="main"> | |
| This is main content | |
| </main> | |
| <footer class="footer"> | |
| This is a footer | |
| </footer> | |
| </body> | |
| ` | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment