awesomephant

$(document).ready(function(){	
$('.close').click(function(){
		var box = $(this).parent();
		box.addClass('inactive');
		window.setTimeout(function(){
			box.remove()
		}, 700)
	})
});

awesomephant

##Why would this be the best experience? What is this magic 'experience' thing designers are always after? In our case, a good experience means being able to read stuff and understand the content. Typography helps us make that task as easy as possible for the users.

##But why would we, for an interface for an online encyclopedia and similar, need something so specific at all? As an Encyclopedia, reading stuff is the primary thing people will do our site. It makes sense to make that reading experience as pleasant as possible, because better typography will ultimately help people understand the content easier. There's more factors to good typography than the typeface, such as spacing, color, and size. These things need to be adjusted to

awesomephant

<header>
<h1 class='title'>Sass Ribbon Generator.</h1>
  <p class='tagline'>Fully customizable, variable font-size, uses the data-badge attribute + pseudo elements, comes with two awesome styles. Proudly presented by <a href='https://twitter.com/awesomephant'>@awesomephant</a></p>
</header>
<section class='demo'>
<figure class='product' data-badge='new'>
  <img src='http://www.lorempixel.com/600/700/technics/10'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>

awesomephant

@mixin bp($point) {
  @if $point == l {
    @media (min-width: 65rem) { @content; }
  }
  @else if $point == m {
    @media (min-width: 45rem) { @content; }
  }
  @else if $point == s {
    @media (min-width: 35rem)  { @content; }
  }