Menu icon Foundation

My Posts


My Comments

Tim Morton commented on Tim Morton's post almost 2 years

I think my problem was using foundation 6 examples on foundation 5...

Tim Morton commented on Tim Morton's post almost 2 years

Really? where's my reply???? Nice system here.

Tim Morton commented on Tim Morton's post almost 2 years

This is the method I've been trying to use. The install by all appearances seems to be working, but when I test it, things seem to be broken.

My method has been to copy code from the source of foundation page to test if a widget works. For example, I copied this to check the accordion:

<ul role="tablist" class="accordion" data-accordion="qi51zp-accordion">
  <li class="accordion-item is-active">
    <a aria-selected="true" aria-expanded="true" id="c6i6fs-accordion-label" role="tab" aria-controls="c6i6fs-accordion" href="#" class="accordion-title">Acordion 1</a>
    <div style="display: block;" id="c6i6fs-accordion" aria-hidden="false" aria-labelledby="c6i6fs-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <li class="accordion-item">
    <a aria-selected="false" aria-expanded="false" id="c47tz6-accordion-label" role="tab" aria-controls="c47tz6-accordion" href="#" class="accordion-title">Accordion 2</a>
    <div style="display: none;" id="c47tz6-accordion" aria-hidden="true" aria-labelledby="c47tz6-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      <textarea></textarea>
      <button class="button">I do nothing!</button>
    </div>
  </li>
  <li class="accordion-item">
    <a aria-selected="false" aria-expanded="false" id="af7hkw-accordion-label" role="tab" aria-controls="af7hkw-accordion" href="#" class="accordion-title">Accordion 3</a>
    <div id="af7hkw-accordion" aria-hidden="true" aria-labelledby="af7hkw-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      Pick a date!
      <input type="date">
    </div>
  </li>
</ul>

This code would not expand/contract

Then I tried

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

        <div class="row">
          <div class="large-12 columns">
            <div class="callout ">
              <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="large-6 medium-6 columns">
            <div class="callout">
              <p>Six columns</p>
            </div>
          </div>
          <div class="large-6 medium-6 columns">
            <div class="callout">
              <p>Six columns</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
        </div>
 ... snip ...

The div calls for class="callout", but firebug shows that I don't even have a selector named "callout"

The last thing I did was to copy the page from kitchen sink, and to my surprise the only thing that failed horribly was the top bar. Mysteriously, the accordian worked.

So, It appears that the problem may be with my testing. I will work with it some more and reply if I have more questions.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Tim Morton's post almost 2 years

I think my problem was using foundation 6 examples on foundation 5...

You commented on Tim Morton's post almost 2 years

Really? where's my reply???? Nice system here.

You commented on Tim Morton's post almost 2 years

This is the method I've been trying to use. The install by all appearances seems to be working, but when I test it, things seem to be broken.

My method has been to copy code from the source of foundation page to test if a widget works. For example, I copied this to check the accordion:

<ul role="tablist" class="accordion" data-accordion="qi51zp-accordion">
  <li class="accordion-item is-active">
    <a aria-selected="true" aria-expanded="true" id="c6i6fs-accordion-label" role="tab" aria-controls="c6i6fs-accordion" href="#" class="accordion-title">Acordion 1</a>
    <div style="display: block;" id="c6i6fs-accordion" aria-hidden="false" aria-labelledby="c6i6fs-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <li class="accordion-item">
    <a aria-selected="false" aria-expanded="false" id="c47tz6-accordion-label" role="tab" aria-controls="c47tz6-accordion" href="#" class="accordion-title">Accordion 2</a>
    <div style="display: none;" id="c47tz6-accordion" aria-hidden="true" aria-labelledby="c47tz6-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      <textarea></textarea>
      <button class="button">I do nothing!</button>
    </div>
  </li>
  <li class="accordion-item">
    <a aria-selected="false" aria-expanded="false" id="af7hkw-accordion-label" role="tab" aria-controls="af7hkw-accordion" href="#" class="accordion-title">Accordion 3</a>
    <div id="af7hkw-accordion" aria-hidden="true" aria-labelledby="af7hkw-accordion-label" role="tabpanel" class="accordion-content" data-tab-content="">
      Pick a date!
      <input type="date">
    </div>
  </li>
</ul>

This code would not expand/contract

Then I tried

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

        <div class="row">
          <div class="large-12 columns">
            <div class="callout ">
              <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="large-6 medium-6 columns">
            <div class="callout">
              <p>Six columns</p>
            </div>
          </div>
          <div class="large-6 medium-6 columns">
            <div class="callout">
              <p>Six columns</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
          <div class="large-4 medium-4 small-4 columns">
            <div class="callout">
              <p>Four columns</p>
            </div>
          </div>
        </div>
 ... snip ...

The div calls for class="callout", but firebug shows that I don't even have a selector named "callout"

The last thing I did was to copy the page from kitchen sink, and to my surprise the only thing that failed horribly was the top bar. Mysteriously, the accordian worked.

So, It appears that the problem may be with my testing. I will work with it some more and reply if I have more questions.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content