Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/building-blocks.html

Created December 20, 2014 19:56
Show Gist options
  • Save tomhodgins/a17e552c45d003b3eca6 to your computer and use it in GitHub Desktop.
Save tomhodgins/a17e552c45d003b3eca6 to your computer and use it in GitHub Desktop.
Download ZIP
Barebones HTML layout functions for Copy/Paste
Raw
building-blocks.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barebones HTML</title>
<style>
* {box-sizing:border-box;-moz-box-size:border-box;transition:all .5s ease-in-out}
html {background:#eee;font-family:'Open Sans','Helvetica Neue','Myriad Pro',Roboto,Myriad,'Segoe UI',Arial,sans-serif}
body {margin:30px auto;border-left:10px solid #eee;border-right:10px solid #eee;max-width:750px;background:#fff;padding:30px}
label {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:pointer;display:inline-block;padding:5px;box-shadow:inset #ccc 0 0 0}
p label{ color:#00f;text-decoration:underline}
/* Modals */
.modal:checked + .modal {opacity:1;pointer-events:all}
.modal {position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;padding:15px;overflow-y:scroll;opacity:0;pointer-events:none}
.modal article {background:#fff;width:100%;padding:50px;position:relative;z-index:700}
.modal .exit:before {content:'×';display:block;padding:20px 30px;font-size:200%;position:absolute;top:0;right:0;z-index:800;cursor:pointer}
.modal .exit:hover:before {color:#c00}
.modal .overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:600;cursor:pointer}
/* Tabs */
.tab {display:none}
.tab:checked + .tab {display:block}
/* Toggles */
input.toggle {display: none}
.toggle {overflow:hidden;max-height:0;transition:max-height 1s ease-in-out}
.toggle:checked + label .toggle {max-height:100px}
/* Accordions */
input.acc {display:none;}
label .acc {overflow:hidden;max-height:0;transition:max-height .25s ease-in-out}
.acc + label {display:block}
.acc:checked + label .acc {max-height:100px}
</style>
</head>
<body>
<!-- Modals -->
<h1>Modals</h1>
<p>Launch the <label for="example">Modal</label></p>
<input type="checkbox" class="modal" id="example">
<div class="modal">
<article>
Modal Content
</article>
<label for="example" class="exit"></label>
<label for="example" class="overlay"></label>
</div>
<!-- Tabs -->
<h1>Tabs</h1>
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
<input type="radio" class="tab" name="tab" id="tab1" checked>
<div class="tab">
<p>Tab one content</p>
</div>
<input type="radio" class="tab" name="tab" id="tab2">
<div class="tab">
<p>Tab two content</p>
</div>
<input type="radio" class="tab" name="tab" id="tab3">
<div class="tab">
<p>Tab three content</p>
</div>
<!-- Toggles -->
<h1>Toggles</h1>
<input type="checkbox" class="toggle" id="slide">
<label for="slide">
Click to Toggle
<div class="toggle">
Toggled Text
</div>
</label>
<!-- Accordions -->
<h1>Accordions</h1>
<input type="radio" class="acc" name="acc" id="acc1">
<label for="acc1">
Title One
<div class="acc">
Accordion Text One
</div>
</label>
<input type="radio" class="acc" name="acc" id="acc2">
<label for="acc2">
Title Two
<div class="acc">
Accordion Text Two
</div>
</label>
<input type="radio" class="acc" name="acc" id="acc3">
<label for="acc3">
Title Three
<div class="acc">
Accordion Text Three
</div>
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment