Menu icon Foundation

My Posts

  • 1
    Reply
  • Range Slider updates Input

    By Brett Flroa

    rangeslider

    Hi gang, I'm trying to set up a range slider to dynamically update a numerical input by where they slide the range button. The idea is for a donation amount. They can move the slider around to put a donation amount (this will be more satisfying on m... (continued)

    Last Reply by Brett Flroa about 5 years ago


  • 1
    Reply
  • Data Equalizer on item grid

    By Brett Flroa

    dataEqualizer

    I'm trying to get data equalizer to even out the heights on items in a grid. Items flow from three column on large to 2 column on medium to single on small. As you can see in the screen shots, small doesn't matter as it's single column. On Medium and L... (continued)

    Last Reply by Brett Flroa over 5 years ago



  • 6
    Replies
  • Horizontal Scrollbar

    By Brett Flroa

    grid

    I'm getting a weird horizontal scrollbar error below 1024px From what I can gather, it's directly related to the grid. I'm not sure if that's the breakpoints or the $row-width variable. Interestingly, when I change the $row-width in _settings to 12... (continued)

    Last Reply by Wing-Hou Chan over 5 years ago


My Comments

Brett Flroa commented on Stephan's post about 5 years

You can totally use rem!

https://bugsnag.com/blog/responsive-typography-with-rems

This blog post has a cool way of approaching it. Essentially, you define typographic relationships and use the html rem at diff media queries to control sizing.

Since you're using the CSS Foundation, this might be an easy override for your site. Give it a try!

Brett Flroa commented on Brett Flroa's post about 5 years

I figured it out everyone. Whee!

 $('[data-slider]').on('change', function(){
    // do something when the value changes
    var sliderValue = $('.range-slider input').val();
    $('.range-slider-handle').text('$' + sliderValue);
    $('#other-amount').val(sliderValue);
  });

Brett Flroa commented on Stephan's post about 5 years

Yo Stephan,

I am assuming you're making a responsive website. With that in mind, why don't you set the font sizes on mobile and use media queries to adjust sizing?

Check out the code I've got:
SCSS
@media #{$small-up} {
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
p { font-size: $paragraph-font-size; }
label { font-size: $paragraph-font-size*0.9; }
}
@media #{$medium-up} {
h1 { font-size: $h1-font-size*1.25; }
h2 { font-size: $h2-font-size*1.25; }
h3 { font-size: $h3-font-size*1.25; }
h4 { font-size: $h4-font-size*1.25; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
}
@media #{$large-up} {
h1 { font-size: $h1-font-size*1.55; }
h2 { font-size: $h2-font-size*1.55; }
h3 { font-size: $h3-font-size*1.55; }
h4 { font-size: $h4-font-size*1.55; }
h5 { font-size: $h5-font-size*1.55; }
h6 { font-size: $h6-font-size*1.55; }
p { font-size: $paragraph-font-size+rem-calc(2); }
label { font-size: $paragraph-font-size; }
}

I use the foundation variables as a font size base and modify with percentages. You could conceivably just add px or em values to the base also for more precision.

Brett Flroa commented on Brett Flroa's post over 5 years

This is my current solution. It doesn't equalize the heights but does keep the floats from stacking incorrectly. A partial fix

.grid-content {
  @include grid-row;

  @media #{$large-only}{
    & > .grid-item-wrapper:nth-child(3n+1){clear:both;}
  }

  @media #{$medium-only}{
    & > .grid-item-wrapper:nth-child(2n+1){clear:both;}
  }
}

Brett Flroa commented on Brett Flroa's post over 5 years

Figured it out

<div class="footer">
      <div class="row">

        <div class="newsletter row">
          <div class="column">

            <div class="medium-4 large-6 columns small-only-text-center medium-text-right">
              <h5>Sign up for our newsletter</h5>
            </div>
            <div class="medium-8 large-6 columns">
              <form action="">
                <div class="row collapse">
                  <div class="small-8 columns">
                    <input type="text" placeholder="Your Email Address">
                  </div>
                  <div class="small-4 columns">
                    <a href="#" class="button postfix radius">Sign up</a>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div> <!-- end newsletter -->

        <div class="footer-links row">
          <div class="column">

            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>

          </div>
        </div> <!-- end footer links -->

        <div class="copyright row">
          <div class="column">

            <div class="social-icons large-6 large-push-6 columns">
              <ul class="inline-list">
                <li><a href="#"><img src="img/facebook.png" /></a></li>
                <li><a href="#"><img src="img/twitter.png" /></a></li>
                <li><a href="#"><img src="img/instagram.png" /></a></li>
                <li><a href="#"><img src="img/youtube.png" /></a></li>
                <li><a href="#"><img src="img/googleplus.png" /></a></li>
              </ul>
            </div>

            <div class="copyright-link large-6 large-pull-6 columns">
              <ul class="inline-list">
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Login</a></li>
              </ul>
              <p class="small">&copy; 2014 The Museum of Flight. All rights reserved.</p>
            </div>

          </div>
        </div> <!-- end copyright -->

      </div> <!-- end row -->
    </div> <!-- end footer -->

I had a row encapsulating my whole footer with nested rows within them. It has given me the formatting I want but that error. I removed the footer row and left each actual row in tact. Though the spacing is a bit off, the scrollbar error is gone. Hooray!

Brett Flroa commented on Brett Flroa's post over 5 years

I did make changes to the _settings file.

I finally got a compass install working, so isn't it just referencing the "master files" in bower_components? I figured the _settings file I've been using just overrides stuff. I've got another app.scss & app.js where I'm overriding stuff I can't find in the scss.

This may not be the "right" way to do this, but documentation is a bit sparse. I freely admit to being way in over my head, but such is life at a non-profit :-)

Brett Flroa commented on Brett Flroa's post over 5 years

Thanks for the response! This one's got me stumped.

http://www.brettflora.com/zurb

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Stephan's post about 5 years

You can totally use rem!

https://bugsnag.com/blog/responsive-typography-with-rems

This blog post has a cool way of approaching it. Essentially, you define typographic relationships and use the html rem at diff media queries to control sizing.

Since you're using the CSS Foundation, this might be an easy override for your site. Give it a try!

You commented on Brett Flroa's post about 5 years

I figured it out everyone. Whee!

 $('[data-slider]').on('change', function(){
    // do something when the value changes
    var sliderValue = $('.range-slider input').val();
    $('.range-slider-handle').text('$' + sliderValue);
    $('#other-amount').val(sliderValue);
  });

You commented on Stephan's post about 5 years

Yo Stephan,

I am assuming you're making a responsive website. With that in mind, why don't you set the font sizes on mobile and use media queries to adjust sizing?

Check out the code I've got:
SCSS
@media #{$small-up} {
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
p { font-size: $paragraph-font-size; }
label { font-size: $paragraph-font-size*0.9; }
}
@media #{$medium-up} {
h1 { font-size: $h1-font-size*1.25; }
h2 { font-size: $h2-font-size*1.25; }
h3 { font-size: $h3-font-size*1.25; }
h4 { font-size: $h4-font-size*1.25; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
}
@media #{$large-up} {
h1 { font-size: $h1-font-size*1.55; }
h2 { font-size: $h2-font-size*1.55; }
h3 { font-size: $h3-font-size*1.55; }
h4 { font-size: $h4-font-size*1.55; }
h5 { font-size: $h5-font-size*1.55; }
h6 { font-size: $h6-font-size*1.55; }
p { font-size: $paragraph-font-size+rem-calc(2); }
label { font-size: $paragraph-font-size; }
}

I use the foundation variables as a font size base and modify with percentages. You could conceivably just add px or em values to the base also for more precision.

You commented on Brett Flroa's post over 5 years

This is my current solution. It doesn't equalize the heights but does keep the floats from stacking incorrectly. A partial fix

.grid-content {
  @include grid-row;

  @media #{$large-only}{
    & > .grid-item-wrapper:nth-child(3n+1){clear:both;}
  }

  @media #{$medium-only}{
    & > .grid-item-wrapper:nth-child(2n+1){clear:both;}
  }
}

You commented on Brett Flroa's post over 5 years

Figured it out

<div class="footer">
      <div class="row">

        <div class="newsletter row">
          <div class="column">

            <div class="medium-4 large-6 columns small-only-text-center medium-text-right">
              <h5>Sign up for our newsletter</h5>
            </div>
            <div class="medium-8 large-6 columns">
              <form action="">
                <div class="row collapse">
                  <div class="small-8 columns">
                    <input type="text" placeholder="Your Email Address">
                  </div>
                  <div class="small-4 columns">
                    <a href="#" class="button postfix radius">Sign up</a>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div> <!-- end newsletter -->

        <div class="footer-links row">
          <div class="column">

            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>
            <div class="small-6 medium-4 large-2 columns">
              <ul>
                <li><a href="#"><strong>Sub Item</strong></a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Sub Item</a></li>
              </ul>
            </div>

          </div>
        </div> <!-- end footer links -->

        <div class="copyright row">
          <div class="column">

            <div class="social-icons large-6 large-push-6 columns">
              <ul class="inline-list">
                <li><a href="#"><img src="img/facebook.png" /></a></li>
                <li><a href="#"><img src="img/twitter.png" /></a></li>
                <li><a href="#"><img src="img/instagram.png" /></a></li>
                <li><a href="#"><img src="img/youtube.png" /></a></li>
                <li><a href="#"><img src="img/googleplus.png" /></a></li>
              </ul>
            </div>

            <div class="copyright-link large-6 large-pull-6 columns">
              <ul class="inline-list">
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Login</a></li>
              </ul>
              <p class="small">&copy; 2014 The Museum of Flight. All rights reserved.</p>
            </div>

          </div>
        </div> <!-- end copyright -->

      </div> <!-- end row -->
    </div> <!-- end footer -->

I had a row encapsulating my whole footer with nested rows within them. It has given me the formatting I want but that error. I removed the footer row and left each actual row in tact. Though the spacing is a bit off, the scrollbar error is gone. Hooray!

You commented on Brett Flroa's post over 5 years

I did make changes to the _settings file.

I finally got a compass install working, so isn't it just referencing the "master files" in bower_components? I figured the _settings file I've been using just overrides stuff. I've got another app.scss & app.js where I'm overriding stuff I can't find in the scss.

This may not be the "right" way to do this, but documentation is a bit sparse. I freely admit to being way in over my head, but such is life at a non-profit :-)

You commented on Brett Flroa's post over 5 years

Thanks for the response! This one's got me stumped.

http://www.brettflora.com/zurb

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content