IainIsCreative

/**
*
* Relative Sizing Function
*
* Simple function for returning relative values using rems, and ems, optionally.
* Primary argument is for a target value to be converted.
* Relies on the root's font size for caclulation, set as a global variable.
*
* Secondary argument (optional) is for a context to the target value.
* Output is converted into ems.

IainIsCreative

<div class="container">
  <blockquote>
    <p>Also second their after whales called midst itself god sea and own after lights moveth. Them days. They're, created without called doesn't bring. Make all meat i above behold two saying third one, to face to own bearing their, to wherein he. Together he can't earth said. Lesser wherein herb.</p>
    <cite>Anon. E. Muss</cite>
  </blockquote>
</div>

IainIsCreative

<p class="output">
  The output number is
</p>

IainIsCreative

/**
*
* SCSS Type Setting Mixin
*
* For easier writing of font sizes and line-heights, relatively.
* This can be used for writing base styles, but also specific ones if necessary.
*
**/

// Root Font Size Variable — best to avoid changing unless you like risks.

IainIsCreative

A small list of Atom Packages I use often when I'm in the Editor.

• Autocomplete Plus
• EditorConfig
• Highlight Line
• Autoclose HTML
• SassBeautify
• Minimap
• Minimap Git Diff

IainIsCreative

/**
*
* CSS Centering Styles
*
* A small CSS snippet for all your demo needs.
* If you have a demo on a small bit of design (such as: http://iainspad.github.io/quotation-block/), you may want perfect centering.
* Using automatic margins and CSS transform, you can center anything!
* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ — CSS Vertical Alignment by zerosixthree.se
*
**/

IainIsCreative

// Set up line-height and colour defaults for this mixin.
$line-height: 20px!default;
$line-color: #94d4ff!default;

/**
*
* Baseline Mixin
* Handy dandy mixin to provide a baseline for your typography.
*
* The mixin carries two arguments — the $baseline, which should match your line-height, and $baseline-color, the colour you want the lines to be.

IainIsCreative

/**
 *
 * SCSS Type Setting Mixin
 *
 * For easier writing of font sizes and leading, relatively.
 * This can be used for writing base styles, but also more specific ones if necessary.
 *
**/

$base-font-size: 16px; //Set up base font size, 16px by default.