Menu icon Foundation

My Posts

No Content

My Comments

Caleb Winters commented on Brett DeWoody's post over 3 years

Yes that's correct! :)

Caleb Winters commented on Erkan Demir's post over 3 years

Your hierarchy is out of order. You need to define a mixin before you include it in a selector. Sass always looks up to find a mixin. If it's not above the selector you include it on, it won't find anything and will throw an error.

Try this:

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

.panel { @include gradient(#FFFFFF, #FFFFFF); }

Caleb Winters commented on Ken Sheldon's post almost 4 years

Dropdowns can be used on any element! Check it out:

<ul class="button-group">
  <li><a href="#" class="button" data-dropdown="dd1">Button 1</a></li>
  <li><a href="#" class="button" data-dropdown="dd2">Button 2</a></li>
  <li><a href="#" class="button" data-dropdown="dd3">Button 3</a></li>
</ul>

<div id="dd1" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

<div id="dd2" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

<div id="dd3" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

Hope this helps!

Caleb Winters commented on Ryan O Hicks's post almost 4 years

You can do something like:

.small i { font-size: 0.8rem; }
.medium i { font-size: 1rem; }
.large i { font-size: 1.2rem; }

I think those classes were custom written for the playground page.

The grid classes are small-# so you shouldn't have any class collisions.

Caleb Winters commented on Ryan O Hicks's post almost 4 years

Hey Ryan,

The small medium and large classes are only used for media queries on the grid. :)

The Foundation Icons are just a font, so you can size them just like you would any other font.

Example:

.inline-list i {
  font-size: 1.2rem;
}

By default, the icons will inherit the font-size of their parent element. Hope this helps!

Caleb Winters commented on Sean Weas's post almost 4 years

Hey Sean, this isn't possible with the current iteration of Off Canvas—we only have one animation. You could rewrite _off-canvas.scss to change the default behavior, but that would be pretty involved.

We're always iterating on Foundation though, so we'll have some behavior improvements for Off Canvas in the future.

Caleb Winters commented on Rafi Benkual's post almost 4 years

We don't really use Wordpress at ZURB, but here's how we set it up on PHP sites.

header.php
<div class="off-canvas-wrap">
    <div class="inner-wrap">
nav.php
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon"></a>
  </section>
</nav>
<aside class="right-off-canvas-menu"><!-- off canvas content here --></aside>
footer.php
    </section><a class="exit-off-canvas"></a>
  </div><!-- /inner-wrap -->
</div><!-- /inner-wrap -->

Then on our layouts, just include all these partials.

layout.php
<?php include_once "header.php" ?>
<?php include_once "nav.php" ?>

<!-- your page layout goes here -->

<?php include_once "footer.php" ?>

Hope this helps.

Caleb Winters commented on Rafi Benkual's post almost 4 years

Sorry, the Top Bar dropdowns are not intended to contain the grid and any use of the grid inside of them is untested and unsupported.

We recommend using our dropdown plugin which does support the use of the grid. It can also be used anywhere.

Caleb Winters commented on David Kenzik's post almost 4 years

We have no plans to do anything like the Codrop example.

We do plan to bake the accordion into the off canvas menu though so that you can still have multiple levels of navigation.

Caleb Winters commented on Chris Tarwater's post almost 4 years

Sorry, no. We'll look into it.

Posts Followed

No Content

Following

    No Content

Followers

  • View More Posts by RG

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani

  • View More Posts by RG

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani

My Posts

No Content

My Comments

You commented on Brett DeWoody's post over 3 years

Yes that's correct! :)

You commented on Erkan Demir's post over 3 years

Your hierarchy is out of order. You need to define a mixin before you include it in a selector. Sass always looks up to find a mixin. If it's not above the selector you include it on, it won't find anything and will throw an error.

Try this:

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

.panel { @include gradient(#FFFFFF, #FFFFFF); }

You commented on Ken Sheldon's post almost 4 years

Dropdowns can be used on any element! Check it out:

<ul class="button-group">
  <li><a href="#" class="button" data-dropdown="dd1">Button 1</a></li>
  <li><a href="#" class="button" data-dropdown="dd2">Button 2</a></li>
  <li><a href="#" class="button" data-dropdown="dd3">Button 3</a></li>
</ul>

<div id="dd1" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

<div id="dd2" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

<div id="dd3" class="f-dropdown">
  <!-- dropdown stuff here -->
</div>

Hope this helps!

You commented on Ryan O Hicks's post almost 4 years

You can do something like:

.small i { font-size: 0.8rem; }
.medium i { font-size: 1rem; }
.large i { font-size: 1.2rem; }

I think those classes were custom written for the playground page.

The grid classes are small-# so you shouldn't have any class collisions.

You commented on Ryan O Hicks's post almost 4 years

Hey Ryan,

The small medium and large classes are only used for media queries on the grid. :)

The Foundation Icons are just a font, so you can size them just like you would any other font.

Example:

.inline-list i {
  font-size: 1.2rem;
}

By default, the icons will inherit the font-size of their parent element. Hope this helps!

You commented on Sean Weas's post almost 4 years

Hey Sean, this isn't possible with the current iteration of Off Canvas—we only have one animation. You could rewrite _off-canvas.scss to change the default behavior, but that would be pretty involved.

We're always iterating on Foundation though, so we'll have some behavior improvements for Off Canvas in the future.

You commented on Rafi Benkual's post almost 4 years

We don't really use Wordpress at ZURB, but here's how we set it up on PHP sites.

header.php
<div class="off-canvas-wrap">
    <div class="inner-wrap">
nav.php
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon"></a>
  </section>
</nav>
<aside class="right-off-canvas-menu"><!-- off canvas content here --></aside>
footer.php
    </section><a class="exit-off-canvas"></a>
  </div><!-- /inner-wrap -->
</div><!-- /inner-wrap -->

Then on our layouts, just include all these partials.

layout.php
<?php include_once "header.php" ?>
<?php include_once "nav.php" ?>

<!-- your page layout goes here -->

<?php include_once "footer.php" ?>

Hope this helps.

You commented on Rafi Benkual's post almost 4 years

Sorry, the Top Bar dropdowns are not intended to contain the grid and any use of the grid inside of them is untested and unsupported.

We recommend using our dropdown plugin which does support the use of the grid. It can also be used anywhere.

You commented on David Kenzik's post almost 4 years

We have no plans to do anything like the Codrop example.

We do plan to bake the accordion into the off canvas menu though so that you can still have multiple levels of navigation.

You commented on Chris Tarwater's post almost 4 years

Sorry, no. We'll look into it.

Posts Followed

No Content

Following

  • No Content

Followers

  • View More Posts by RG

    Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani