JakeBeresford

<!---------------------------------------------------------------------------- 
    This snippet should be used in conjunction with PictureFill from Scottjehl
    https://github.com/scottjehl/picturefill
----------------------------------------------------------------------------->
<snippet>
	<content><![CDATA[
<picture>
   <source media="(min-width: 64em)" src="${1:high-res.jpg}">
   <source media="(min-width: 37.5em)" src="${2:med-res.jpg}">
   <source src="${3:low-res.jpg}">

JakeBeresford

<div class="alignnone container">
    <img src="http://placehold.it/1600x500" alt="Columns no padding">
    <div class="contents-center contents-background-dark text-center ">
        <h1 class="no-spacing">Text Content Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Consectetur quos itaque eligendi hic repellendus sed omnis ut magni...</p>
        <a href="http://www.shopterrain.com" class="wl-button-primary wl-button-large"><span>Shop Holiday Lighting</span></a>
    </div>
</div>

JakeBeresford

<!--NOTE: This is not enclosed in <div class='wrapper'> -->
<div class="wl-grid">
    <div class="col col-1of4 container" style="margin:0; padding:0;">
        <img src="http://placehold.it/640x640" alt="Columns no padding">
        <div class="align-center contents-top">
            <h3>Title</h3>
            <a href="##"><span>Link to something</span></a>
        </div>
    </div>
    <div class="col col-1of4 container" style="margin:0; padding:0;">

JakeBeresford

<div id="wl-sg-heroContainer" class="alignnone callout-container callout-container--borders">
    <img class="callout-container__image" src="/resources/terrain/images/content/herotext_mockup.jpg" alt="Hero Text Mockup">
    <div class="callout-container__contents-wrap">
        <div class="callout-container__contents">
            <div class="callout-container__contents-internal">
                <h3 class='callout-container__preheader'>Moment</h3>
                <h2 class='callout-container__header'>IN THE SUN</h2>
                <p class='callout-container__subline'>Indoor gardens await-our favorite linen pots and Habit + Form plant trays are back in stock.</p>
                <a href="##" class="callout-container__cta wl-button wl-button-alt">
                    <span>Shop Glass Vessels</span>

JakeBeresford

# =============================================================================
# Font Custom Configuration
#   This file should live in the directory where you run `fontcustom compile`.
#   For more info, visit <https://github.com/FontCustom/fontcustom>.
# =============================================================================

font_name: icons
css_selector: .icon--{{glyph}}
preprocessor_path: ""
autowidth: false

JakeBeresford

<picture>
    <!--- Small Screens  --->
    <source srcset="http://placehold.it/767x767" alt="some alt text" media="max-width(767px)">
    <!--- Medium screens --->
    <source srcset="http://placehold.it/1024x1024" alt="some alt text" media="min-width(768px)">
    <!--- Large screens --->
    <source srcset="http://placehold.it/1200x1200" alt="some alt text" media="min-width(1024px)">
    <!--- Fallback for browsers without support --->
    <img src="http://placehold.it/1200x1200" alt="Some alt text">
</picture>

JakeBeresford

<!-- 
Buttons:
  Primary Button
  Alt Button
  Text Button
Button Sizes:
  Small
  Medium (Default)
  Large
  Wide (100% width of container)

JakeBeresford

<!-- Single column layout -->
<!-- For better performance and cleaner code please delete all comments before posting -->
<article class="template">
     <!-- STEP: duplicate code between here and END STEP as needed for your content -->

     <!-- OPTIONAL:numbered step - increment number as neeeded for each step-->
     <a class="numdot" href="#step-1" id="step-1">1</a>
     <!-- REQUIRED: step/article heading -->
     <h1 class="title-1"><i><!-- OPTIONAL: italicised title text--></i> <!--Regular title text--></h1>

JakeBeresford

<article class="template">
  <div class="template__wrapper">
    <div class="template__right-50">
      <!-- Heading Section: Right aligned on tablet and desktop -->
      <h1 class="title-1"><!-- Article heading goes here --></h1>
      <p class="fleuron"><!-- Subline goes here -  has fleuron below --></p>
    </div>
    <div class="template__left-50">
      <!-- LEFT column content starts here -->

JakeBeresford

<section class="template">

<!-- START 2 colum row -->
<div class="template__row">
  <!-- Left column -->
  <article class="template__spaced-med-50">
    <h1 class="headline-title">
      <!-- Article heading goes here-->