aarongustafson

<textarea id="d" name="d" rows="10"  
          required aria-required="true"  
          autocomplete="off" autocorrect="off"  
          aria-describedby="e-d"
          data-count="10-500"
          ></textarea>

aarongustafson

<label for="d">Please describe your project</label>
<textarea id="d" name="d" rows="10"  
          required aria-required="true"  
          autocomplete="off" autocorrect="off"  
          aria-describedby="e-d"
          ></textarea>
<strong id="e-d">Your description should be between 10 and 500 characters long.</strong>

aarongustafson

<input id="ac" name="ac" required aria-required="true"  
       autocomplete="shipping country-name" autocorrect="off"  
       autocapitalize="on"
       list="ac-options"  
       >
<datalist id="ac-options">
  <option>Brazil</option>
  <option>Poland</option>
  <option>Spain</option>
  <option>United States</option>

aarongustafson

<p>
  <label for="as">What’s your street address?</label>
  <textarea id="as" name="as" rows="3" required aria-required="true" autocomplete="shipping street-address" autocapitalize="on" autocorrect="off"></textarea>
</p>
<p>
  <label for="ap">What’s the postal code for this address?</label>
  <input id="ap" name="ap" required aria-required="true" autocorrect="off" autocomplete="shipping postal-code" autocapitalize="on" placeholder="10001">
</p>
<p>
  <label for="ac">What country is that in?</label>

aarongustafson

function paginate( e ) {
  // find the event target
  var $target = e.target;
  // if the target is a next or previous link…
  if ( $target.matches( '.pagination .next, .pagination .prev' ) )
  {
    // handle pagination  
  }
}

aarongustafson

$( ".parent" ).on( "click", ".child", function( event ) {
  // do something
});

aarongustafson

window.watchResize(function(){
  if ( hero_loaded ) {
    return;
  }
  
  var MQ = getActiveMQ();
  if ( MQ == 'larger' || MQ == 'full' ) {
    lazyLoadHero();
  }
});

aarongustafson

@media (min-width: 15em) {
  #getActiveMQ-watcher {
    font-family: "tiny";
  }
}
@media (min-width: 20em) {
  #getActiveMQ-watcher {
    font-family: "small";
  }
}

aarongustafson

@each $breakpoint, $declaration in $breakup-breakpoints {
  @include breakup-block( $breakpoint ) {
    @include breakup-media( $declaration, true ) {
      #getActiveMQ-watcher {
        font-family: "#{$breakpoint}";
      }
    }
  }
}

aarongustafson

<li class="gallery__item h-card clickable"
    data-img="/i/j/r.jpg||y"
    data-imaged="true"
    >
  …
</li>