Tip Module

dabblet.css

/**
 * Tip Module
 */
 
 
 
 /*
 CONTENT: 
 1.  $Default Styling
 2.  $Helper Classes
 3.  $Main
 3.1   #Media Object
 */
 
 /*
  This was just for some practice I needed for a project.
  A lot of things could have be done better (replace floats
  with inline-block) but since I had to support older browsers
  I sticked with floats. Also this is a stripped version of the
  end result.
 */
 
 
 
 /* ------ $DEFAULT STYLING ------*/
 * { margin:0; padding:0; }
 body {
 	font:400 .75em/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;
 	-webkit-font-smoothing: antialiased;
 }



/* ------ $HELPER CLASSES ------ */
.ir { background-color:transparent; border:0; overflow:hidden; *text-indent:-9999px;}
.ir:before { content:""; display:block; width:0; height: 100%;}
.clearfix:before, .clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }



/* ------ $MAIN ------ */
.container {
	background-color:#fafdff;
	width:90%;
	margin:auto;
	margin-top:2em;
	padding:21px;
	border:1px solid #ccc;
}

/* --- #Media Object --- */
.media {
	padding:21px 11px;
	background-color:#f7f7f7;
	border-bottom:1px solid #d9dfe5;
	
}
	/* Header */
	.media > header {
		margin-bottom:1.5em;
	}

		.media-title, .media-meta {
			display: inline;
			margin-bottom:0;
		}

		.media-title {
			font-size:16px;
			font-weight:600;
			color:#0e86c8;
		}
	
		.media-meta {
			font-size:14px;
			color:#888;
			font-weight:300;
			margin-left:.5em;
		}
	
	/*	Body */
	.avatar {
		float:left;
		width:60px;
		height:60px;
	}
	
		.avatar > img {
			border-radius:5px;
		}
		
	.speachbubble {
		padding:11px;
		border:1px solid #e1e4e6;
		border-radius:5px;
		min-height:36px;
		background-color:#fafdff;
		font-size:14px;
		color:#333;
		margin-left:79px;
		position:relative;
	}
	
		.speachbubble:after, .speachbubble:before {
			right:100%;
			border:solid transparent;
			content:" ";
			height:0;
			width:0;
			position:absolute;
			pointer-events:none;
		}
		
		.speachbubble:after {
			border-color:rgba(136, 183, 213, 0);
			border-right-color:#fafdff;
			border-width:8px;
			top:30px;
			margin-top:-8px;
		}
		
		.speachbubble:before {
			border-color:rgba(194, 225, 245, 0);
			border-right-color:#e1e4e6;
			border-width:9px;
			top:30px;
			margin-top:-9px;
		}
	
		.media-author {
			line-height:1;
			margin-bottom:.5em;
			font-size:14px;
		}
		
			.media-author > em {
				font-size:12px;
				color:#888;
				font-weight:400;
				font-style:normal;
			}

dabblet.html

<div class=container>



<article class=media>


	<header class=clearfix>
		
		<h1 class=media-title>This Feature is so awesome</h1>
		<h2 class=media-meta>this feature has worked for 10 Users</h2>
		
		
	</header>
	
	
	<div class="body clearfix">
	
		<aside class="avatar clearfix">
			<img src=http://placehold.it/60/df0084/ffffff>
		</aside>
	
		<div class=speachbubble>
			<h3 class=media-author>Pascal Gaertner <em>said:</em></h3>
			<p>To activate the hidden gems under Chrome you must go to “Preferences” and click on “Activate Hidden Gems”.</p>
		</div>
	
	</div>


</article>



</div>

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}