Do I need to use both Mixins and Javascript in Zurb Foundation?

Question

I am trying to use dropdowns (to make a dropdown button) with Zurb Foundation 4. My html looks like this: I got this html from here under the Build with Mixins section.

  <a href="#" data-dropdown="drop1" class="login">Login</a><br>

    <ul id="drop1" class="f-dropdown">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Here is my scss : I got the mixins from here under the "Build with Quick Mixins" section.

.login {
   @include grid-column(2);
   @include button;
   @include dropdown-button;
}
.login:hover {
   color: #fff;
   background-color: #34AADC; 
}

I am able to see a button on my page, but when I click it there is no dropdown with options.

1. I don't understand why there are two documentation pages about dropdown menus.
2. What does the documentation mean when it says "you'll need to have the extension installed" See below for more details.

In the Build with Mixins section of this page : http://foundation.zurb.com/docs/components/dropdown.html

It says this:

We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _buttons.scss, _global.scss and _dropdown-buttons.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

When I click on ' extension installed ' it takes me to the Getting Started with the Gem page. I have followed the instructions to install sass and created my first project. I assume this is all that it means by "you'll need to have the extension installed ", correct?

The Quick Mixin section on the Dropdown documentation page also says to import these files:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/dropdown";

When I went to my app.scss file, I found the following two lines commented out. So I uncommented them.

 @import "foundation/components/global";
 @import "foundation/components/dropdown";

I also noticed that @import "foundation/variables"; was not included in my app.scss file at all, so I added it manually. Is this going to cause a problem?

What am I doing wrong? Do I need to be using the javascript solution along with the Mixins, or are they two separate things? I know this is a lot of questions, but I'm not sure where to start with this.

Answer 1

You still need to include the relevant scripts ("Using the Javascript") ; the mixins handle the styling only.

If you did

compass create <project-name> -r zurb-foundation --using foundation

then you have the extension installed in your project.

Answer 2

Do I need to be using the javascript solution along with the Mixins, or are they two separate things?

Yes, they are separate. The Mixins just help you write CSS, they do not write any HTML for you. The mixins are a replacement for using the standard CSS. You still need to include the JS in your HTML.