Menu icon Foundation
Need to add component js with foundation.min.js in F5-CSS version?

I was trying CSS version of Foundation5. I need to make some tabs, so I wrote like this.

// This is the code when I wrote first.

<body>

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

But, this didn't work at all.

Then, I tried to add js componet of tabs.

// Then tried to do this

<body>

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.tab.js"></script>
<script>
  $(document).foundation();
</script>
</body>

It works well.

So, I wonder why foundation.min.js dosen't include foundation.tab.js.
When I use Sass version of Foundation5, no need to add foundation.tab.js, works well foundation.min.js only.

I thought CSS version of foundation.min.js suspicious. Opened it with editor, then I found out it's written codes as tidied, not minified.
Search the word "tab", nothing found -- just found one in comment line. So I guess that CSS version of foundation.min.js does NOT includes each javascript components at all. Is this true?

Does anyone know how this happens?

japascriptcomponentscss

I was trying CSS version of Foundation5. I need to make some tabs, so I wrote like this.

// This is the code when I wrote first.

<body>

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

But, this didn't work at all.

Then, I tried to add js componet of tabs.

// Then tried to do this

<body>

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.tab.js"></script>
<script>
  $(document).foundation();
</script>
</body>

It works well.

So, I wonder why foundation.min.js dosen't include foundation.tab.js.
When I use Sass version of Foundation5, no need to add foundation.tab.js, works well foundation.min.js only.

I thought CSS version of foundation.min.js suspicious. Opened it with editor, then I found out it's written codes as tidied, not minified.
Search the word "tab", nothing found -- just found one in comment line. So I guess that CSS version of foundation.min.js does NOT includes each javascript components at all. Is this true?

Does anyone know how this happens?

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

Rafi Benkual over 4 years ago

You had it right the first time.

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

foundation.min.js is the entire library and foundation.js is just the core which then you can add plugins individually to like you did in the second example you shared.

The reason foundation.min.js isn't minified is a separate issue with the downloader that should be resolved soon.

I just downloaded a fresh copy of the complete package and it has all the plugins. If you used the essential download or custom, it may not.

Kohki over 4 years ago

Hi, Rafi.

I understood why it happened.

Thank you so much.