Menu icon Foundation

Developer | Xenia, Ohio

I'm a graphic/web designer and front-end developer. I am full-time at Edge Webware focusing mainly on responsive web design and builds on WordPress/.NET using Bootstrap/LESS/SASS. I do a lot of work with U! Creative as well. I also do my own thing on the side as Aibrean's Studio. I'm the designer behind the new F# logo (oh and P.S. it won an award from the American Advertising Federation).

My Posts

No Content

My Comments

April Sadowski commented on hassan's post over 3 years

You mean global breakpoints?

$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

April Sadowski commented on hassan's post over 3 years

Sorry about that. Yea, you will need to do the following:

@media #{$medium-only} {
  .top-bar{
    display:none;
   }
 }

The mixin for top-bar has to be overridden so there may be the need to make !Important declarations.

Also, you can make it responsive this way...

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

(see Responsive Toggle)
http://foundation.zurb.com/sites/docs/responsive-navigation.html

There is also an ongoing thread on this: http://foundation.zurb.com/forum/posts/36228-foundation-6-topbar-like-f5

April Sadowski commented on Dennis Bril's post over 3 years

You can trigger a resize for it to display full-height, but there definitely seems to be a bug with the actual positioning of the modal itself relative to the orbit slider.

I've been thinking about putting in an issue.

Been playing around with this concept...

$('.reveal').on('open.zf.trigger', function () {
            $('.reveal').resize();
        });

April Sadowski commented on Jim Christenson's post almost 4 years

Rafi, you have a typo on the first article data-equalizer.

Forked with typo fix:

http://codepen.io/anon/pen/RWJmrJ

it does work :)

<article data-equalizer>
  <div class="row" data-equalizer-watch>
    <div class="columns">
      <img src="http://placehold.it/300" alt="" />
    </div>
  </div>


  <div class="row" data-equalizer-watch>
    <div class="columns">
      <img src="http://placehold.it/500" alt="" />
    </div>
  </div>
</article>

April Sadowski commented on David Garcia's post almost 4 years

Have you looked into Motion UI? It was released as a standalone in light of the upcoming Foundation 6.

http://zurb.com/playground/motion-ui

April Sadowski commented on Jim Christenson's post almost 4 years

What is this for?

 <!-- This cannot have a class or ID attributed to it -->

You don't need a row inside of a column unless you plan on putting in another nest of columns...

Example:

 <div class="row">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>

April Sadowski commented on Alex Humphries's post almost 4 years

Have you read the latest Foundation documents?
http://foundation.zurb.com/docs/components/equalizer.html

<div class="row" data-equalizer="foo">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
<h3>Parent panel</h3>
<div class="row" data-equalizer="bar">
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
</div>
</div>
</div>

Additionally there is support on the parent for
data-options=“equalize_on_stack: true”

April Sadowski commented on Stefano Gandolfo's post almost 4 years

I'm not sure why you would need them in a row since they will consume the entire width anyway (small, if not defined, is always 12 columns).

April Sadowski commented on sally willard's post almost 4 years

The issue is caused by lack of specificity on your CSS for fixed. While fixed is integrated into Foundation, the top-bar CSS is overruling the position property.

Specifically:

It's applied here: <div class="small-12 medium-2 large-2 columns noleftpadding sidebarcorners fixed"> and works great.

When expanded, it is removed from the above code and applied here: <nav id="sidebar" class="top-bar expanded fixed" data-topbar="" role="navigation"> and the top-bar class is overriding it.

I'm not sure what is causing fixed to be removed from the top, but it shouldn't be in the nav element.

April Sadowski commented on Maarten Tibau's post almost 4 years

Maarten, the issue is caused because you're actually calling the CSS for Foundation via localhost. I'm assuming when you are looking on your system, you're viewing locally which is why you don't have any visual issues.

http://localhost/css/normalize/normalize-3.0.3.min.css
http://localhost/css/foundation/foundation-5.5.2.min.css

Posts Followed










Following

Followers

My Posts

No Content

My Comments

You commented on hassan's post over 3 years

You mean global breakpoints?

$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

You commented on hassan's post over 3 years

Sorry about that. Yea, you will need to do the following:

@media #{$medium-only} {
  .top-bar{
    display:none;
   }
 }

The mixin for top-bar has to be overridden so there may be the need to make !Important declarations.

Also, you can make it responsive this way...

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

(see Responsive Toggle)
http://foundation.zurb.com/sites/docs/responsive-navigation.html

There is also an ongoing thread on this: http://foundation.zurb.com/forum/posts/36228-foundation-6-topbar-like-f5

You commented on Dennis Bril's post over 3 years

You can trigger a resize for it to display full-height, but there definitely seems to be a bug with the actual positioning of the modal itself relative to the orbit slider.

I've been thinking about putting in an issue.

Been playing around with this concept...

$('.reveal').on('open.zf.trigger', function () {
            $('.reveal').resize();
        });

You commented on Jim Christenson's post almost 4 years

Rafi, you have a typo on the first article data-equalizer.

Forked with typo fix:

http://codepen.io/anon/pen/RWJmrJ

it does work :)

<article data-equalizer>
  <div class="row" data-equalizer-watch>
    <div class="columns">
      <img src="http://placehold.it/300" alt="" />
    </div>
  </div>


  <div class="row" data-equalizer-watch>
    <div class="columns">
      <img src="http://placehold.it/500" alt="" />
    </div>
  </div>
</article>

You commented on David Garcia's post almost 4 years

Have you looked into Motion UI? It was released as a standalone in light of the upcoming Foundation 6.

http://zurb.com/playground/motion-ui

You commented on Jim Christenson's post almost 4 years

What is this for?

 <!-- This cannot have a class or ID attributed to it -->

You don't need a row inside of a column unless you plan on putting in another nest of columns...

Example:

 <div class="row">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>

You commented on Alex Humphries's post almost 4 years

Have you read the latest Foundation documents?
http://foundation.zurb.com/docs/components/equalizer.html

<div class="row" data-equalizer="foo">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
<h3>Parent panel</h3>
<div class="row" data-equalizer="bar">
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
</div>
</div>
</div>

Additionally there is support on the parent for
data-options=“equalize_on_stack: true”

You commented on Stefano Gandolfo's post almost 4 years

I'm not sure why you would need them in a row since they will consume the entire width anyway (small, if not defined, is always 12 columns).

You commented on sally willard's post almost 4 years

The issue is caused by lack of specificity on your CSS for fixed. While fixed is integrated into Foundation, the top-bar CSS is overruling the position property.

Specifically:

It's applied here: <div class="small-12 medium-2 large-2 columns noleftpadding sidebarcorners fixed"> and works great.

When expanded, it is removed from the above code and applied here: <nav id="sidebar" class="top-bar expanded fixed" data-topbar="" role="navigation"> and the top-bar class is overriding it.

I'm not sure what is causing fixed to be removed from the top, but it shouldn't be in the nav element.

You commented on Maarten Tibau's post almost 4 years

Maarten, the issue is caused because you're actually calling the CSS for Foundation via localhost. I'm assuming when you are looking on your system, you're viewing locally which is why you don't have any visual issues.

http://localhost/css/normalize/normalize-3.0.3.min.css
http://localhost/css/foundation/foundation-5.5.2.min.css

Posts Followed

Following

Followers

  • No Content