Buttons
<a class="button" href="#" role="button">a.button</a>
<button class="button" type="button">button.button</button>
Footer
<footer class="footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="column u-compact">
<p><b>Copyright © [year] [copyright holder]</b></p>
</div>
<div class="column u-compact u-text-right">
<ul class="u-inline-list">
<li><a href="#" class="u-click-target">About</a></li>
<li><a href="#" class="u-click-target">Podcasts</a></li>
<li><a href="#" class="u-click-target"><i class="ion-social-twitter"></i><span class="u-sr-only">Twitter</span></a></li>
<li><a href="#" class="u-click-target"><i class="ion-social-facebook"></i><span class="u-sr-only">Facebook</span></a></li>
<li><a href="#" class="u-click-target"><i class="ion-social-github"></i><span class="u-sr-only">GitHub</span></a></li>
</ul>
</div>
</div>
</div>
</footer>
Masthead
Howdy!
Lorem ipsum dolor sit amet.
<header class="masthead" role="banner">
<div class="container u-compact u-text-center">
<h1>Howdy!</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</header>
Navbar
<nav class="navbar" role="navigation">
<div class="container">
<nav class="nav navbar-nav" role="navigation">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
<nav class="nav navbar-nav navbar-right" role="navigation">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
</nav>
Inverse navbar
<nav class="navbar navbar--inverse" role="navigation">
<div class="container">
<nav class="nav navbar-nav" role="navigation">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
<nav class="nav navbar-nav navbar-right" role="navigation">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
</nav>
Slate
Lorem ipsum dolor sit amet
<div class="slate u-compact u-text-center">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
Slide In
Simple CSS3 slide-in panel based on http://codyhouse.co/gem/css-slide-in-panel. Can be used through the HTML5 data API or as a jQuery plugin (default options shown):
$(".slide-in").slideIn({
classes: {
open: "is-open"
}
})
<button class="button" type="button" data-slide-in-toggle="slide-in">
Show Slide In
</button>
<div class="slide-in slide-in--right" id="slide-in" data-slide-in>
<header class="slide-in-header" role="banner">
<h4>This is a Slide In</h4>
<button class="slide-in-close" type="button" data-slide-in-close>
<i class="ion-close"></i>
</button>
</header>
<section class="slide-in-content">
<p>Hello World!</p>
</section>
</div>
Streamer
The Modem Streamer is used for playing back and visualizing an audio stream. It supports playback of MP3, MP4/AAC, and OGG media streams through the Web Audio API. Can be used through the HTML5 data API or as a jQuery plugin (default options shown):
$("audio.streamer").streamer({
classes: {
wrapper: 'streamer',
button: 'streamer-button'
},
icons: {
play: 'ion-play',
pause: 'ion-pause'
},
labels: {
play: 'Continue playing',
pause: 'Stop playing'
},
waveform: {
stroke: {
width: 2,
color: '#666'
}
}
})
<audio data-streamer preload="none">
<source src="audio/example.ogg" type="audio/ogg">
<source src="audio/example.mp3" type="audio/mpeg">
</audio>
When offline
<audio data-streamer>
<source src="audio/offline.ogg" type="audio/ogg">
<source src="audio/offline.mp3" type="audio/mpeg">
</audio>
Within masthead
<div class="masthead">
<div class="masthead-fill">
<audio data-streamer preload="none">
<source src="audio/example.ogg" type="audio/ogg">
<source src="audio/example.mp3" type="audio/mpeg">
</audio>
</div>
</div>
Tables
Number | First Name | Last Name | Points |
---|---|---|---|
1 | Eve | Jackson | 94 |
2 | John | Doe | 80 |
3 | Adam | Johnson | 67 |
<table class="table">
<tbody>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody>
</table>