makingsnippets

ir.{
	border:0;
	font:0/0 a;
	text-shadow:none;
	color:transparent;
	background-color:transparent;
}

makingsnippets

// 1. Keeps page centred in all browsers regardless of content height
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
html {
    overflow-y: scroll; // 1
    -webkit-text-size-adjust: 100%; // 2
    -ms-text-size-adjust: 100%; // 2
	text-size-adjust: 100%; // 2
}

makingsnippets

.ib-block {
    vertical-align:top;
    display:inline-block;
    *zoom:1; /* IE6/7 */
    *display:inline; /* IE6/7 */
}
.ib-container {
    letter-spacing:-.25em;
    word-spacing:-1em;
}

makingsnippets

// 1. Keeps page centred in all browsers regardless of content height
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
html {
    overflow-y: scroll; // 1
    -webkit-text-size-adjust: 100%; // 2
    -ms-text-size-adjust: 100%; // 2
	text-size-adjust: 100%; // 2
}

makingsnippets

/* Define styles for blocks of content scoped within the .copy rather than
   making them global. Global styles will be constantly overridden. */
.copy {

	@include improve-text-rendering;
	
	/* 
	  Set the baseline on all elements directly inside a copy block
	  Margin won't work on inline elements anyway
	*/

makingsnippets

* {
	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	box-sizing: border-box;
	-webkit-transition: all 0.2s ease;
 	-moz-transition:    all 0.2s ease;
	-ms-transition:     all 0.2s ease;
  	-o-transition:      all 0.2s ease;
  	background-repeat: no-repeat;
  	position: relative;

makingsnippets

/* 'rem' is a Sass mixin that converts pixel values to rem values
 * Returns 2 lines of code — regular pixel values and converted rem values 
 * 
 * Sample input:
 * .element { 
 * @include rem('padding',10px 0 2px 5px); }
 * 
 * Sample output:
 * .element {
 *   padding: 10px 0 2px 5px;

makingsnippets

@mixin animation (
  $name: false, 
  $duration: false, 
  $timing_function: false, 
  $delay: false, 
  $iteration_count: false, 
  $direction: false
) {
  @if $name            { -webkit-animation-name: $name;                        -moz-animation-name: $name;                          -ms-animation-name: $name; }
  @if $duration        { -webkit-animation-duration: $duration;                -moz-animation-duration: $duration;                  -ms-animation-duration: $duration; }

makingsnippets

<div class="btn">Start Learning to code here</div>
<div class="page-width">
  <article class="col-1-3"><img src="http://drive.google.com/uc?export=view&id=0B9p2-Ypr2z0bRHVBT1kxdnlPczg" /></article><aside class="col-1-3"><h1 class="heading">Coding made simple <em>Learn to code with The Times</em></h1></aside><figure class="col-1-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque culpa, maiores architecto quos, iure fugit.</p></figure>
  <div class="illustration">
    <div class="cube">
            <div class="face one"></div>
            <div class="face two"></div>
            <div class="face three"></div>
            <div class="face four"></div>
            <div class="face five"></div>