Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
184 lines (182 sloc) 7.91 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Talk Bubbles</title>
<link rel="stylesheet" type="text/css" media="all" href="../../all.css" />
</head>
<body>
<div class="page">
<h1>Talk Bubbles</h1>
<p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
<div class="line">
<div class=" unit size1of4">
<div class="mod bubble bubbleTop">
<div class="inner">
<div class="hd">
<h4>bubbleTop</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleLeft">
<div class="inner">
<div class="hd">
<h4>bubbleLeft</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleRight">
<div class="inner">
<div class="hd">
<h4>bubbleRight</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4 lastUnit">
<div class="mod bubble bubbleBottom">
<div class="inner">
<div class="hd">
<h4>bubbleBottom</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
</div>
<h2>Extending the talk bubbles</h2>
<div class="line">
<div class=" unit size1of4">
<div class="mod bubble bubbleTop horizExt">
<div class="inner">
<div class="hd">
<h4>bubbleTop + horizExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleLeft vertExt">
<div class="inner">
<div class="hd">
<h4>bubbleLeft + vertExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleRight vertExt">
<div class="inner">
<div class="hd">
<h4>bubbleRight + vertExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4 lastUnit">
<div class="mod bubble bubbleBottom horizExt">
<div class="inner">
<div class="hd">
<h4>bubbleBottom + horizExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
</div>
<h2>Talk bubbles in the middle</h2>
<div class="line">
<div class=" unit size1of4">
<div class="mod bubble bubbleTop horizMid">
<div class="inner">
<div class="hd">
<h4>bubbleTop + horizMid</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleLeft vertMid">
<div class="inner">
<div class="hd">
<h4>bubbleLeft + vertMid</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class=" unit size1of4">
<div class="mod bubble bubbleRight vertMid">
<div class="inner">
<div class="hd">
<h4>bubbleRight + vertMid</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
<div class="unit size1of4 lastUnit">
<div class="mod bubble bubbleBottom horizMid">
<div class="inner">
<div class="hd">
<h4>bubbleBottom + horizMid</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
</div>
</div>
</div>
<h2>Suggested use:</h2>
<div class="line">
<div class="unit size1of3">
<div class="mod bubble bubbleBottom">
<div class="inner">
<div class="bd">
<p>“At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.”</p>
</div>
</div>
</div>
<div class="media attribution pts">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella"/></a>
<div class="bd pls"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
</div>
</div>
</div>
</div>
</body>
</html>