BBM Bubbles

The BBM Bubbles UI format allows you to create chat bubbles that look like the ones in BBM. This is a great option for any BBM connected application.

A BBM bubble is created by adding a <div> with the data-bb-type="bbm-bubble" attribute. You can set the direction of the bubble to either "right" or "left" by using the data-bb-style attribute.

The conversation line items that appear inside the BBM Bubble are simply <div>'s that have the data-bb-type="item" attribute. You can also specify an image to appear beside the line item by using the data-bb-img attribute. The contents of the line item <div> will be displayed as the line item text.

<div data-bb-type="screen">
	<style type="text/css">
		body,html {
			background-color: #B5B2B5;
		}	
	</style>
	<div data-bb-type="bbm-bubble" data-bb-style="right">
		<div data-bb-type="item" data-bb-img="bullet.png">My car just broke down and I have one million things to do!!</div> 
		<div data-bb-type="item" data-bb-img="bullet.png">Why can&apos;t groceries just come to you?</div> 
	</div>
	<div data-bb-type="bbm-bubble" data-bb-style="left">
		<div data-bb-type="item" data-bb-img="read.png">The big island was fun.. We were there for our honeymoon.  One side of the island is pretty much desert grass and volcano ash, and the other side is rainforest</div> 
	</div>
</div>