Menu icon Foundation
CSS and HTML sync issue in browsers 
Hi There!  
 
I've install the SASS version of Foundation 6, wether I'm using Atom, Brackets, Sublime Text or even DW my files are not rendered properly in the browser. I see my html content and no CSS applied to it. 
The URL I’m seeing is http://127.0.0.1:57905/src/pages/index.html instead of localhost:8000
 
The terminal shows that everything is installed -
 
What am I missing?
 
Thanks!
 

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="large-12 cell">
      <h1>Welcome to Foundation for Sites</h1>
    </div>
  </div> 

  <div class="grid-x grid-margin-x">
    <div class="large-12 cell">
      <div class="callout">
        <h3>We&rsquo;re stoked you want to try Foundation! </h3>
        <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
        <p>Once you've exhausted the fun in this document, you should check out:</p>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 cell">
            <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
          </div>
          <div class="large-4 medium-4 cell">
            <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
          </div>
          <div class="large-4 medium-4 cell">
            <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowledge.</p>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 medium-push-2 cell">
            <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
          </div>
          <div class="large-4 medium-4 medium-pull-2 cell">
            <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
          </div>        
        </div>
      </div>
    </div>
  </div>

  <div class="grid-x grid-margin-x">
    <div class="large-8 medium-8 cell">
      <h5>Here&rsquo;s your basic grid:</h5>
      <!-- Grid Example -->

      <div class="grid-x grid-margin-x">
        <div class="large-12 cell">
          <div class="primary callout">
            <p><strong>This is a twelve column section in a grid-x with grid-margin-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
          </div>
        </div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="large-6 medium-6 cell">
          <div class="primary callout">
            <p>Six cell</p>
          </div>
        </div>
        <div class="large-6 medium-6 cell">
          <div class="primary callout">
            <p>Six cell</p>
          </div>
        </div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
      </div>
      
      <hr />
              
      <h5>We bet you&rsquo;ll need a form somewhere:</h5>
      <form>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-12.cell" />
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.cell" />
          </div>
          <div class="large-4 medium-4 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.cell" />
          </div>
          <div class="large-4 medium-4 cell">
            <div class="grid-x grid-margin-x collapse">
              <label>Input Label</label>
              <div class="input-group">
                <input class="input-group-field" type="text" placeholder="input-group" />
                <span class="input-group-label">.com</span>
              </div>
            </div>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Select Box</label>
            <select>
              <option value="husker">Husker</option>
              <option value="starbuck">Starbuck</option>
              <option value="hotdog">Hot Dog</option>
              <option value="apollo">Apollo</option>
            </select>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-6 medium-6 cell">
            <label>Choose Your Favorite</label>
            <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
            <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
          </div>
          <div class="large-6 medium-6 cell">
            <label>Check these out</label>
            <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
            <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Textarea Label</label>
            <textarea placeholder="small-12.cell"></textarea>
          </div>
        </div>
      </form>
    </div>     

    <div class="large-4 medium-4 cell">
      <h5>Try one of these buttons:</h5>
      <p><a href="#" class="small button">Simple Button</a><br/>          
      <a href="#" class="medium success button">Success Btn</a><br/>
      <a href="#" class="medium alert button">Alert Btn</a><br/>
      <a href="#" class="medium secondary button">Secondary Btn</a></p>           
      <div class="callout">
        <h5>So many components, girl!</h5>
        <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
        <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>          
      </div>
    </div>
  </div>
</div>
 

rendering issue

Hi There!  
 
I've install the SASS version of Foundation 6, wether I'm using Atom, Brackets, Sublime Text or even DW my files are not rendered properly in the browser. I see my html content and no CSS applied to it. 
The URL I’m seeing is http://127.0.0.1:57905/src/pages/index.html instead of localhost:8000
 
The terminal shows that everything is installed -
 
What am I missing?
 
Thanks!
 

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="large-12 cell">
      <h1>Welcome to Foundation for Sites</h1>
    </div>
  </div> 

  <div class="grid-x grid-margin-x">
    <div class="large-12 cell">
      <div class="callout">
        <h3>We&rsquo;re stoked you want to try Foundation! </h3>
        <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
        <p>Once you've exhausted the fun in this document, you should check out:</p>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 cell">
            <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
          </div>
          <div class="large-4 medium-4 cell">
            <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
          </div>
          <div class="large-4 medium-4 cell">
            <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowledge.</p>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 medium-push-2 cell">
            <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
          </div>
          <div class="large-4 medium-4 medium-pull-2 cell">
            <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
          </div>        
        </div>
      </div>
    </div>
  </div>

  <div class="grid-x grid-margin-x">
    <div class="large-8 medium-8 cell">
      <h5>Here&rsquo;s your basic grid:</h5>
      <!-- Grid Example -->

      <div class="grid-x grid-margin-x">
        <div class="large-12 cell">
          <div class="primary callout">
            <p><strong>This is a twelve column section in a grid-x with grid-margin-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
          </div>
        </div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="large-6 medium-6 cell">
          <div class="primary callout">
            <p>Six cell</p>
          </div>
        </div>
        <div class="large-6 medium-6 cell">
          <div class="primary callout">
            <p>Six cell</p>
          </div>
        </div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 cell">
          <div class="primary callout">
            <p>Four cell</p>
          </div>
        </div>
      </div>
      
      <hr />
              
      <h5>We bet you&rsquo;ll need a form somewhere:</h5>
      <form>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-12.cell" />
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-4 medium-4 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.cell" />
          </div>
          <div class="large-4 medium-4 cell">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.cell" />
          </div>
          <div class="large-4 medium-4 cell">
            <div class="grid-x grid-margin-x collapse">
              <label>Input Label</label>
              <div class="input-group">
                <input class="input-group-field" type="text" placeholder="input-group" />
                <span class="input-group-label">.com</span>
              </div>
            </div>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Select Box</label>
            <select>
              <option value="husker">Husker</option>
              <option value="starbuck">Starbuck</option>
              <option value="hotdog">Hot Dog</option>
              <option value="apollo">Apollo</option>
            </select>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-6 medium-6 cell">
            <label>Choose Your Favorite</label>
            <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
            <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
          </div>
          <div class="large-6 medium-6 cell">
            <label>Check these out</label>
            <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
            <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
          </div>
        </div>
        <div class="grid-x grid-margin-x">
          <div class="large-12 cell">
            <label>Textarea Label</label>
            <textarea placeholder="small-12.cell"></textarea>
          </div>
        </div>
      </form>
    </div>     

    <div class="large-4 medium-4 cell">
      <h5>Try one of these buttons:</h5>
      <p><a href="#" class="small button">Simple Button</a><br/>          
      <a href="#" class="medium success button">Success Btn</a><br/>
      <a href="#" class="medium alert button">Alert Btn</a><br/>
      <a href="#" class="medium secondary button">Secondary Btn</a></p>           
      <div class="callout">
        <h5>So many components, girl!</h5>
        <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
        <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>          
      </div>
    </div>
  </div>
</div>
 

This post has been closed. No new replies can be added.