title: How do I use Selectivizr to make the Bourbon Neat grid work in IE8?
body: <p>I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;
  &lt;meta name="description" content=""&gt;
  
  &lt;!-- FONTS --&gt;
  &lt;!--Typekit - Adrianna Extended Demibold--&gt;
  &lt;script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
  
  &lt;!-- AUTO RELOAD FOR HAMMER --&gt;
  
          &lt;!-- Hammer reload --&gt;
            &lt;script&gt;
              setInterval(function(){
                try {
                  if(typeof ws != 'undefined' &amp;&amp; ws.readyState == 1){return true;}
                  ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
                  ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
                  ws.onmessage = function(){
                    var links = document.getElementsByTagName('link'); 
                      for (var i = 0; i &lt; links.length;i++) { 
                      var link = links[i]; 
                      if (link.rel === 'stylesheet' &amp;&amp; !link.href.match(/typekit/)) { 
                        href = link.href.replace(/((&amp;|\?)hammer=)[^&amp;]+/,''); 
                        link.href = href + (href.indexOf('?')&gt;=0?'&amp;':'?') + 'hammer='+(new Date().valueOf());
                      }
                    }
                  }
                }catch(e){}
              }, 1000)
            &lt;/script&gt;
          &lt;!-- /Hammer reload --&gt;
  
  
  &lt;!-- CSS/SCSS --&gt;
  &lt;link rel='stylesheet' href='css/ostrich-sans.css'&gt;
  &lt;link rel='stylesheet' href='css/font-awesome.css'&gt;
  &lt;link rel='stylesheet' href='css/normalize.css'&gt;
  &lt;link rel='stylesheet' href='css/responsive-nav.css'&gt;
  &lt;link rel='stylesheet' href='css/style.css'&gt;
  
  &lt;!-- IOS LINK STYLES --&gt;
  &lt;style type="text/css"&gt;
  /*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
  /*Disable touch-highlight
  -webkit-tap-highlight-color: rgba(0,0,0,0); */
  &lt;/style&gt;
  
  &lt;!-- JS MODERNIZR --&gt;
  &lt;script src='js/modernizr.custom.87213.js'&gt;&lt;/script&gt;
  
  &lt;link href="favicon.ico" rel="shortcut icon"&gt;
  &lt;link href="apple-touch-icon.png" rel="apple-touch-icon"&gt;
  
  
  &lt;title&gt;Title&lt;/title&gt;
  
  &lt;!-- ZEPTO FALLBACK TO JQUERY --&gt;
  &lt;script&gt;
  document.write('&lt;script src=' +
  ('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
  '.js&gt;&lt;\/script&gt;')
  &lt;/script&gt;
  
  &lt;!--[if lte IE 8]&gt;
  &lt;script type="text/javascript" src="selectivizr.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;   
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  &lt;nav class="nav-collapse"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  
    &lt;section class="sec-one"&gt;
  
        &lt;aside&gt;Aside&lt;/aside&gt;
        &lt;article&gt;Article&lt;/article&gt;
  
    &lt;/section&gt;
  
      &lt;section class="sec-two"&gt;
        &lt;aside&gt;Aside&lt;/aside&gt;
        &lt;article&gt;Article&lt;/article&gt;
    &lt;/section&gt;
  
      &lt;section class="sec-three"&gt;
        &lt;aside&gt;Aside&lt;/aside&gt;
        &lt;article&gt;Article&lt;/article&gt;
  
      &lt;p&gt;Content copy&lt;/p&gt;
  
  
    &lt;/section&gt;
  
  
  
  &lt;script src='js/responsive-nav.js'&gt;&lt;/script&gt;
  &lt;script src='js/app.js'&gt;&lt;/script&gt;
  
  &lt;!-- INITIATE RESONSIVE-NAV --&gt;
  &lt;script&gt;
      var navigation = responsiveNav(".nav-collapse", {
          label: '&lt;i class=\"icon-reorder icon-2x\"&gt;&lt;/i&gt;'
      });
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>