Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Last active February 3, 2016 21:15
Show Gist options
  • Save wrumsby/a329f257efcbbaf7b38c to your computer and use it in GitHub Desktop.
Save wrumsby/a329f257efcbbaf7b38c to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
#mobile {
max-width: 240px;
}
/*
#mobile .xui-u-flex {
/* this simulates a breakpoint */
flex-direction: column;
align-items: center;
justify-content: center;
}
#mobile .xui-u-flex-col {
/* this might only make sense in the context of inset sections? */
width: calc(100% + 16px);
margin: 8px;
padding: 0;
text-align: center;
}
*/
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<link rel="stylesheet" href="http://localhost:3000/dist/xui.css"/>
<div class="xui-pagecontainer">
<!--
<div class="xui-panel">
<div class="xui-panel--section xui-panel--section-inset">
<img src="https://psnerds.files.wordpress.com/2011/11/whatevs.jpg" class="random">
</div>
<div class="xui-u-flex xui-panel--section xui-panel--section-inset">
<div class="xui-u-flex-col xui-u-flex-grow">
<button class="xui-button xui-unstyledbutton">Keep all client records separate</button>
</div>
<button class="xui-button xui-u-flex-col">Cancel</button>
<button class="xui-button xui-button-main xui-u-flex-col">Merge All Data</button>
</div>
</div>
-->
<div class="xui-panel">
<div class="xui-panel--section xui-panel--section-inset">
<img src="https://psnerds.files.wordpress.com/2011/11/whatevs.jpg" class="random">
</div>
<div class="xui-panel--footer xui-actions">
<div class="xui-actions--primary">
<button class="xui-button xui-button-main">Merge All Data</button>
</div>
<div class="xui-actions--secondary">
<button class="xui-button xui-u-flex-col">Cancel</button>
</div>
<div class="xui-actions---other">
<button class="xui-button xui-unstyledbutton">Keep all client records separate</button>
</div>
</div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","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