jondaiello

// Demo at http://codepen.io/jondaiello/full/YWRbOx/
/* This mixin is for generating CSS arrows on a box */
@mixin box-arrow($arrowDirection, $arrowColor, $arrowSize: 10px) {
  position: relative;
  z-index: 10;

  &::after {
    content: '';
    width: 0;
    height: 0;

jondaiello

<p>Check it out. This content is loaded from an external Gist.</p>
<ol>
  <li>Use XMLHttpRequest() and point to <a href="https://gist.github.com/jondaiello/d94eb273e8795eca4ab335de01e6e418" target="_blank">this gist</a> and store it in a JS variable.</li>
  <li>Write it to the page.</li>
  <li>If you're seeing this on non-GitHub page than that's what has happened.</li>
</ol>

jondaiello

jondaiello

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;q=street_address, city_name state, zip&amp;ie=UTF8&amp;hq=&amp;hnear=street_address,+city_name,+state,+zip&amp;output=embed&amp;iwloc=near"></iframe>

jondaiello

<nav class="global-nav">

  <button class="mobile-only menu-link">Menu</button>
  
  <ul class="global-nav--list">
    <li class="home"><a href="#">Home</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>

jondaiello

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="fax"],
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="password"],
input[type="time"],
input[type="url"],