Menu icon Foundation

Designer | Austin, TX

I'm pretty new to all of this development stuff.

My Posts






My Comments

fourhexagons commented on fourhexagons's post about 1 year

I should also mention that Ihad to edit my original post (due to an update glitch that erased my original post). I think I've managed to ask my question a little better this time, so if you haven't yet read the re-post, please do.

fourhexagons commented on fourhexagons's post about 1 year

Well, @Vladimir & @wlad – I'm not getting any errors when declaring all 5 arguments, but the gutter values aren't rendering as they did in my F5 example in the original post.
My code looks like this:
.fields__row {
@include grid-row(24, nest, $grid-row-width, true, 8);
}

.fields__name {
@include grid-col(24);

@include breakpoint(medium) {
@include grid-col(8);
}

@include breakpoint(large) {
@include grid-col(9);
}
}

fourhexagons commented on fourhexagons's post about 1 year

Oh wow, I was using $column-gutter. Ha. Got it. I'll try it out tomorrow. Thanks again @Vladimir. 

fourhexagons commented on fourhexagons's post about 1 year

Thanks again for your attention on this, @Vladimir.
Those values are global, though and I'm trying to scope down a level and apply new values within an object while keeping the default gutter values as-is. 

fourhexagons commented on fourhexagons's post about 1 year

Thanks @Vladimir. So it sounds like I just need to specify all variables in grid row. I'll check that out tomorrow when I'm at the desk.
But @Vladimir, how do you approach it with Sass? I'm using Sass, so it could be helpful to grok your approach. 

fourhexagons commented on fourhexagons's post over 2 years

To fix this I added max-width: 100%; to the button element nested in .music-grid & .video-grid.

.music-grid, 
.video-grid {
  padding-bottom: rem-calc(40);

  button {
    background: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

}

fourhexagons commented on Ole Fredrik Lie's post over 2 years

Hi Ole,

Which files in the FoundationPress dir can be omitted on a production server?

This is what I figure:

.bowerrc
.sass-cache/*
bower_components/*
bower.json
Gruntfile.js
MIT-LICENSE.txt
node_modules/*
package.json
README.md
scss

fourhexagons commented on fourhexagons's post over 2 years

Here is my solution:

http://codepen.io/fourhexagons/pen/GADCb?editors=110

The key to the solution was to mimic the column structure of the footer with the 7-column left div (containing the .media-player__device) and 5-column right div (empty). That is, I contained the row & column in a div called .media-player, which I set as position: fixed, bottom: 0, and width: 100%.

fourhexagons commented on fourhexagons's post over 2 years

To further update, I decided to use a hammer instead of a nailgun, so to speak.

Here it is on CodePen: http://codepen.io/fourhexagons/pen/vokLu

<div class="row signup">
  <div class="medium-6 columns end">
    <form action="//mailchimp-code" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="row panel radius">
        <div class="medium-4 columns">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required radius" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="medium-5 columns">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email radius" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="medium-3 columns">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-number" tabindex="-1" value="">
        </div>
      </div> <!-- /row panel radius inputs -->
    </form>
  </div>
</div> <!-- / row signup -->
.mce-labels {
  display: none;
}

.signup {
  margin-top: 30px;
}

.panel {
  margin: 0;
  padding: 3px 5px;

  .columns {
    padding: 5px;
  }

  input {
    margin: 0;
  }

  .signup-btn {
    font-size: 14px;
    height: 36px;
    padding: 10px;
    width: 100%;
  }
}

The rem-calc's were being weird with CodePen, so I switched to pixels.

If anyone has any comments or suggestions, I'm open to them.

fourhexagons commented on fourhexagons's post over 2 years

Oh, okay. This is great. Thank you Andy.

It sounds to me that the best option for finer control of the elements in the panel is to set up a custom grid inside that panel. It sounds like I should use @include grid-column and @include grid-row.

This is beginning to stretch the bounds of my Sass understanding. My Sass-derstanding.

What I'm trying to do is set up a 24-column grid inside the panel for finer control of the spacing. I've attempted this, but my input elements still stretch far over the bounds of the div.

<div class="row">
  <div id="mc_embed_signup" class="small-12 medium-6 columns panel radius end">
    <div class="signup-row">
      <form action="//mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="small-24 medium-9 col24">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="small-24 medium-9 col24">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="small-24 medium-6 col24">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-stuff" tabindex="-1" value="">
        </div>
      </form>
    </div> <!-- /row -->
  </div> <!-- /mc_embed_signup -->
</div> <!-- /row -->
.mce-labels {
  display: none;
}

.signup-row {
  @include grid-row();
  margin: 0;
}

.col24 {
  $column-gutter: rem-calc(7.5);
  $column-width: remcalc(15);
  @include grid-column(
    $columns:24,
    $center:true
  );
}

I get the feeling that I'm either missing something simple or there's a simpler way to achieve this.

Thanks again.

Posts Followed






Following

Followers

My Posts

My Comments

You commented on fourhexagons's post about 1 year

I should also mention that Ihad to edit my original post (due to an update glitch that erased my original post). I think I've managed to ask my question a little better this time, so if you haven't yet read the re-post, please do.

You commented on fourhexagons's post about 1 year

Well, @Vladimir & @wlad – I'm not getting any errors when declaring all 5 arguments, but the gutter values aren't rendering as they did in my F5 example in the original post.
My code looks like this:
.fields__row {
@include grid-row(24, nest, $grid-row-width, true, 8);
}

.fields__name {
@include grid-col(24);

@include breakpoint(medium) {
@include grid-col(8);
}

@include breakpoint(large) {
@include grid-col(9);
}
}

You commented on fourhexagons's post about 1 year

Oh wow, I was using $column-gutter. Ha. Got it. I'll try it out tomorrow. Thanks again @Vladimir. 

You commented on fourhexagons's post about 1 year

Thanks again for your attention on this, @Vladimir.
Those values are global, though and I'm trying to scope down a level and apply new values within an object while keeping the default gutter values as-is. 

You commented on fourhexagons's post about 1 year

Thanks @Vladimir. So it sounds like I just need to specify all variables in grid row. I'll check that out tomorrow when I'm at the desk.
But @Vladimir, how do you approach it with Sass? I'm using Sass, so it could be helpful to grok your approach. 

You commented on fourhexagons's post over 2 years

To fix this I added max-width: 100%; to the button element nested in .music-grid & .video-grid.

.music-grid, 
.video-grid {
  padding-bottom: rem-calc(40);

  button {
    background: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

}

You commented on Ole Fredrik Lie's post over 2 years

Hi Ole,

Which files in the FoundationPress dir can be omitted on a production server?

This is what I figure:

.bowerrc
.sass-cache/*
bower_components/*
bower.json
Gruntfile.js
MIT-LICENSE.txt
node_modules/*
package.json
README.md
scss

You commented on fourhexagons's post over 2 years

Here is my solution:

http://codepen.io/fourhexagons/pen/GADCb?editors=110

The key to the solution was to mimic the column structure of the footer with the 7-column left div (containing the .media-player__device) and 5-column right div (empty). That is, I contained the row & column in a div called .media-player, which I set as position: fixed, bottom: 0, and width: 100%.

You commented on fourhexagons's post over 2 years

To further update, I decided to use a hammer instead of a nailgun, so to speak.

Here it is on CodePen: http://codepen.io/fourhexagons/pen/vokLu

<div class="row signup">
  <div class="medium-6 columns end">
    <form action="//mailchimp-code" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="row panel radius">
        <div class="medium-4 columns">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required radius" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="medium-5 columns">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email radius" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="medium-3 columns">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-number" tabindex="-1" value="">
        </div>
      </div> <!-- /row panel radius inputs -->
    </form>
  </div>
</div> <!-- / row signup -->
.mce-labels {
  display: none;
}

.signup {
  margin-top: 30px;
}

.panel {
  margin: 0;
  padding: 3px 5px;

  .columns {
    padding: 5px;
  }

  input {
    margin: 0;
  }

  .signup-btn {
    font-size: 14px;
    height: 36px;
    padding: 10px;
    width: 100%;
  }
}

The rem-calc's were being weird with CodePen, so I switched to pixels.

If anyone has any comments or suggestions, I'm open to them.

You commented on fourhexagons's post over 2 years

Oh, okay. This is great. Thank you Andy.

It sounds to me that the best option for finer control of the elements in the panel is to set up a custom grid inside that panel. It sounds like I should use @include grid-column and @include grid-row.

This is beginning to stretch the bounds of my Sass understanding. My Sass-derstanding.

What I'm trying to do is set up a 24-column grid inside the panel for finer control of the spacing. I've attempted this, but my input elements still stretch far over the bounds of the div.

<div class="row">
  <div id="mc_embed_signup" class="small-12 medium-6 columns panel radius end">
    <div class="signup-row">
      <form action="//mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="small-24 medium-9 col24">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="small-24 medium-9 col24">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="small-24 medium-6 col24">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </div>
        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-stuff" tabindex="-1" value="">
        </div>
      </form>
    </div> <!-- /row -->
  </div> <!-- /mc_embed_signup -->
</div> <!-- /row -->
.mce-labels {
  display: none;
}

.signup-row {
  @include grid-row();
  margin: 0;
}

.col24 {
  $column-gutter: rem-calc(7.5);
  $column-width: remcalc(15);
  @include grid-column(
    $columns:24,
    $center:true
  );
}

I get the feeling that I'm either missing something simple or there's a simpler way to achieve this.

Thanks again.

Posts Followed

Following

Followers