thierryk

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$UH-height: 84px;


/**
 * These 2 must match

thierryk

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$UH-height: 84px;

/**
 * we need to qualify #Stencil below (html#Stencil) *only* if we need 
 * the extra weight/specificity 

thierryk

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

/**
 * Parsing error in v3.4.7 (works as expected in v3.3.14) 
 */
.\!foo {
  color: teal;  

thierryk

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

/**
 * Parsing error in v3.4.7 (works as expected in v3.3.14) 
 */
.\!foo {
  color: teal;  

thierryk

/** 
 *  See: http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/styles-sheets-optimization.php
 *  30px is an arbitrary value used to create space on each side of block-level elements
 *  .8em is an arbitrary value used to create space above and below most block-level elements (except headings which are styled with different values)
 */

/* setting line-height and family while leaving default font-size using *rem* */  

html {
    font: 62.5%/1.3 sans-serif;

thierryk

/**
 * This is a simple trick to overlay a grid or a mock-up over a page you're styling. 
 * It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.
 * To use data-uri or gradients in lieu of an image, check: http://www.css-101.org/articles/trick-for-rapid-prototyping/
 */

/**
 * This is to overlay your image (grid.png) over the page. You may want to change the position value (from fixed to absolute) if you use a mock-up rather than a grid like in this demo page: http://www.css-101.org/articles/trick-for-rapid-prototyping/demo.html
 * You can also change the opacity value as you see fit.
 */

thierryk

.Bgc\(\#0280ae\)\:h:hover {
  background-color: #0280ae;
}

thierryk

<div class="grid">
  <div class="col pd50 pd20 fs3 fs2">Column 1</div>
  <div class="col pd50 pd20 fs3 fs2">Column 2</div>
</div>

thierryk

<div class="overflow-hidden">
  <div class="float-left width-50% width-100%__small-screen padding-50px padding-20px__small-screen font-size-3em font-size-2em__small-screen">Column 1</div>
  <div class="float-left width-50% width-100%__small-screen pd50 pd20 fs3 fs2">Column 2</div>
</div>

thierryk

<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>