A bubble is the basic container for a section of content in a mobile layout. The content in a bubble should be related and pages usually have multiple bubbles.
<div class="bubble">
<h3 class="bubble-title">A title full of whimsy</h3>
<div class="bubble-content">
The content of the bubble
</div>
</div>
A bubble without content or that isn't usable
<div class="bubble bubble-disabled">
<h3 class="bubble-title">A title full of whimsy</h3>
<div class="bubble-content">
The content of the bubble
</div>
</div>
Bubbles can have lists inside of them.
<div class="bubble">
<h3 class="bubble-title">A title full of whimsy</h3>
<ul class="bubble-list">
<li class="bubble-list-item">Test</li>
<li class="bubble-list-item">Test</li>
</ul>
</div>
The navigation bar is at the top of every page of the mobile site and contains page title information and global navigation links.
<header class="nav-bar clearfix">
<div class="nav-bar-inner container">
<div class="header-button header-nav-button touchable js-show-global-nav">
<span class="octicon octicon-three-bars"></span>
</div>
<div class="nav-bar-title-text">
<a class="brand-logo-invertocat touchable" href="https://github.com/"><span class="mega-octicon octicon-mark-github"></span></a>
</div>
</div>
</header>
Breadcrumbs are usually used to show a file path, for example on blob pages.
<div class="breadcrumb blob-breadcrumb">
<label for="blob-history-checkbox" class="blob-history-label">
<span class="octicon octicon-history"></span>
</label>
<span class="filetype-icon"><span class="octicon octicon-file-text"></span></span>
<a href="/defunkt/dotjs/tree/master/bin">bin</a>
<span class="separator"> / </span>
<strong class="final-path">djsd</strong>
</div>
Tabs to switch between sections of a page, e.g. open and closed Pull Requests
<nav class="tabs">
<ul>
<li><a href="#" class="selected">Discussion</a></li>
<li><a href="#">Commits</a></li>
<li><a href="#">Changes</a></li>
</ul>
</nav>
Paginate lists that are really long. The mark up is based on the willpaginate gem.
<div class="pagination">
<span class="disabled prev_page">◀</span>
<span class="current">1</span>
<a href="#" rel="next">2</a>
<a href="#">3</a>
<span class="gap">…</span>
<a href="#">36</a>
<a href="#" class="next_page" rel="next">▶</a>
</div>
Color all of the icons in a container appropriately, e.g. make closed issues icons red.
<div class="bubble">
<div class="bubble-content">
<a href="#" class="button">A tappable button</a>
<a href="#" class="button primary">A tappable button</a>
<a href="#" class="button danger">A tappable button</a>
<a href="#" class="button disabled">A tappable button</a>
<a href="#" class="button primary disabled">A tappable button</a>
<a href="#" class="button danger disabled">A tappable button</a>
</div>
</div>
A button that takes up the entire width of its container
<div class="bubble">
<div class="bubble-content">
<a href="#" class="button button-block">A tappable button</a>
<a href="#" class="button button-block primary">A tappable button</a>
<a href="#" class="button button-block danger">A tappable button</a>
<a href="#" class="button button-block disabled">A tappable button</a>
<a href="#" class="button button-block primary disabled">A tappable button</a>
<a href="#" class="button button-block danger disabled">A tappable button</a>
</div>
</div>
A horizontal group of buttons that appear to be connected
<div class="button-group">
<a href="#" class="button">Button 1</a>
<a href="#" class="button">Button 2</a>
<a href="#" class="button">Button 3</a>
</div>