Menu icon Foundation

Developer | Nevada City, CA

My Posts



  • 4
    Replies
  • How to build semantically

    By Jeff Kinley

    Sassmixinssemantic

    Hi, I want to stop creating HTML files with all the extra class names. Therefore, I want to learn how to use the Sass mixins to create rows and columns. There are some basic examples in the Docs, but its not very clear. What is the difference between grid... (continued)

    Last Reply by Jeff Kinley about 4 years ago


  • 2
    Replies
  • Gap Above Header When Resizing

    By Jeff Kinley

    Wondering if anyone else is experiencing this: When you resize the browser, the transition from topbar to tabbar can be a bit buggy it seems. Or maybe its my CSS. Anyway, anyone have any ideas? I thought I saw this before on the forums but I could not find it. Thanks.

    Last Reply by Jeff Kinley about 5 years ago


  • 1
    Reply
  • Tab-Bar Section Problems

    By Jeff Kinley

    The Docs say that you can add .left or .middle or .right to .tab-bar.section to align the content. Not true. This does not work. Has anyone had any luck making this work? As you can see, I have a .left.tab-bar-section and a .right-small toggle. But 'An... (continued)

    Last Reply by Tidak Jadi Parah Inih over 5 years ago





My Comments

Jeff Kinley commented on Nick Shook's post almost 4 years

Thanks, Nick. No I didn't but didn't think it would be necessary. I really only wanted to impliment the very basics of Flexbox and the site needs to be compatible with earlier browsers. This was just going to be a progressive enhancment for browsers that support it. I suppose I can enble the flex-grid. How is browser support at this time?

Thanks,

Jeff

Jeff Kinley commented on Nick Shook's post almost 4 years

Nick's solution is not working for me. Any other ideas? I am using JointsWP. I have tried a number of things but can't get it to work. It's such a simple thing to do normally. I'll keep working on it and post if I figure it out.

Jeff Kinley commented on Jeff Kinley's post about 4 years

Here is something I'd like to share. I hope it helps others. Some food for thought: now that we can name things semantically, what do we name them? In this example, I have two 'blurbs' for an about section on a homepage. Should I label them column? Article? I like moving in this direction because its making me think about the whole system a bit differently. Thoughts?

What about the Sass? Did I use grid-col correctly? If so, what is grid-col-size for?

Given this Markup:

<section class="intro">
      <div class="intro-text">
        <div class="blurb">
          <h2>Lorem Ipsum</h2>
          <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum.</p>
        </div>

        <div class="blurb">
          <h2>Ipsum Lorem</h2>
          <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
    </section>

We could write our Sass like so:

/**** INTRO SECTION ****/ 
section.intro {
  padding: 1rem 0;
  background: #eee;
  @include breakpoint(medium) {
  padding: 3rem 0;
  }
  .intro-text {
    @include grid-row;
      .blurb{
        @include grid-col(12);                               
        @include breakpoint(medium) {
        @include grid-col(6);

      }
    }
  }
}

Jeff Kinley commented on Jeff Kinley's post about 4 years

Thanks, that helps. I'll keep working on it. I still think the documentation is pretty bad. I tried making this a code pen, but i don't know how to get all the dependencies added. its a shame. There are so many more resources for Bootstrap, but Foundation is so much better. Wish there were more materials available.

Jeff Kinley commented on Jeff Kinley's post about 5 years

Thanks, Rafi. Using JointsWP. But edited, of course. Here goes: I'll start with header.php, then the off-canvas partial, and then finally CSS. Perhaps its the padding I have set on the header. But I did that so that topbar and tabbar were not different in size. In the past I tried resizing topbar, but never could get good results. Any thoughts greatly appreciated.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">

      <div id="container">

        <header class="header" role="banner">
          <?php get_template_part( 'partials/nav', 'offcanvas' ); ?> 
        </header> <!-- end header -->
<div class="nav-container contain-to-grid show-for-medium-up fixed" style="padding-top: 22px; padding-bottom: 36px;">

    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <a href="<?php echo home_url(); ?>" rel="nofollow"><img src="<?php bloginfo('template_directory'); ?>/images/cg-logo-header.png" /></a>
        </li>
        <li class="toggle-topbar menu-icon">
          <a href="#"><span>Menu</span></a>
        </li>
      </ul>    
      <section class="top-bar-section">

        <ul class="left">
          <?php joints_main_nav(); ?>
        </ul>

        <ul class="right">
          <li class="has-form">
              <a href="https://comptongrinders.com/products/checkout/" class="button radius">My Cart</a>
            </li>
        </ul>

      </section>
    </nav>
  </div>



<div class="show-for-small-only">
  <div class="contain-to-grid">
    <nav class="tab-bar">
      <section class="left tab-bar-section">
        <a href="/"><img src="<?php bloginfo ('template_directory');?>/images/cg-logo-header-mobile.png" /></a>
      </section>
      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>
  </div>
</div>



<aside class="right-off-canvas-menu show-for-small-only">
  <ul class="off-canvas-list">
    <li><label>Compton Grinders</label></li>
      <?php joints_main_nav(); ?>
     <li><a class="button radius" style="margin: 0 auto; width: 90%;" href="https://comptongrinders.com/products/checkout/">My Cart</a>
  </ul>
</aside>

<a class="exit-off-canvas"></a>

header.header {
  margin-bottom: 0;
  background: #fff; }

Jeff Kinley commented on Vladimir's post about 5 years

Can somebody please clarify. Very frustrating to have incorrect docs. i have tried all sorts of permutations and can't get this to work.

Thanks,

Jeff

Jeff Kinley commented on Rafi Benkual's post over 5 years

Unfortunately, when you change the height of your top-bar, it also affects the drop-down menu's as well. Anyone have a solution for this?

Jeff Kinley commented on ayezee's post over 5 years

What if you are using the SASS version? I tried changing all the top-bar bg items in settings.scss, but it is not working.

Jeff Kinley commented on Dipak Saraf's post almost 6 years

Ok. I finally got the social icons in the topbar and found the css necessary to make the icons big enough. So first, here is the html to put a list of social icons on the right side of the topbar:

<ul class="right">
      <li><a href="#" title="Follow Us On Facebook"><i class="fi-social-facebook"></i></a></li>
      <li><a href="#" title="Follow Us On Google Plus"><i class="fi-social-google-plus"></i></a></li>
      <li><a href="#" title="Follow Us On YouTube"><i class="fi-social-youtube"></i></a></li>
      <li><a href="#" title="Follow Us On Linked In"><i class="fi-social-linkedin"></i></a></li>
      <li><a href="#" title="RSS Feed"><i class="fi-rss"></i></a></li>
     </ul>

When you do that, the icons appear but they are very tiny. So I finally found the css to make them bigger without breaking the topbar:

ul.right li a {font-size: 1.3rem;}

That may not be the best solution, but it seems to be working for me. Any other ideas?

https://www.dropbox.com/s/ckvthyvaylgmbgx/Screenshot%202014-02-12%2011.10.42.png

Jeff Kinley commented on Dipak Saraf's post almost 6 years

I also tried hardcoding a list into the topbar of my header.php. But when I try to make them larger, they bust out of the topbar. Have not discovered how to fix it yet. Very surprised that this is not a more common request. Topbar would be great for social icons.

Posts Followed

  • 7
    Replies
  • Sticky footer in Foundation 6

    By Nick Shook

    footer

    With the flex grid, is there an easier way? I have seen posts like https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ that use CSS Flex attributes. Is the solution to use http://foundation.zurb.com/sites/docs/sticky.html with a top a... (continued)

    Last Reply by Nick Shook almost 4 years ago


  • 2
    Replies
  • Gap Above Header When Resizing

    By Jeff Kinley

    Wondering if anyone else is experiencing this: When you resize the browser, the transition from topbar to tabbar can be a bit buggy it seems. Or maybe its my CSS. Anyway, anyone have any ideas? I thought I saw this before on the forums but I could not find it. Thanks.

    Last Reply by Jeff Kinley about 5 years ago


Following

    No Content

Followers

My Posts




My Comments

You commented on Nick Shook's post almost 4 years

Thanks, Nick. No I didn't but didn't think it would be necessary. I really only wanted to impliment the very basics of Flexbox and the site needs to be compatible with earlier browsers. This was just going to be a progressive enhancment for browsers that support it. I suppose I can enble the flex-grid. How is browser support at this time?

Thanks,

Jeff

You commented on Nick Shook's post almost 4 years

Nick's solution is not working for me. Any other ideas? I am using JointsWP. I have tried a number of things but can't get it to work. It's such a simple thing to do normally. I'll keep working on it and post if I figure it out.

You commented on Jeff Kinley's post about 4 years

Here is something I'd like to share. I hope it helps others. Some food for thought: now that we can name things semantically, what do we name them? In this example, I have two 'blurbs' for an about section on a homepage. Should I label them column? Article? I like moving in this direction because its making me think about the whole system a bit differently. Thoughts?

What about the Sass? Did I use grid-col correctly? If so, what is grid-col-size for?

Given this Markup:

<section class="intro">
      <div class="intro-text">
        <div class="blurb">
          <h2>Lorem Ipsum</h2>
          <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum.</p>
        </div>

        <div class="blurb">
          <h2>Ipsum Lorem</h2>
          <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
    </section>

We could write our Sass like so:

/**** INTRO SECTION ****/ 
section.intro {
  padding: 1rem 0;
  background: #eee;
  @include breakpoint(medium) {
  padding: 3rem 0;
  }
  .intro-text {
    @include grid-row;
      .blurb{
        @include grid-col(12);                               
        @include breakpoint(medium) {
        @include grid-col(6);

      }
    }
  }
}

You commented on Jeff Kinley's post about 4 years

Thanks, that helps. I'll keep working on it. I still think the documentation is pretty bad. I tried making this a code pen, but i don't know how to get all the dependencies added. its a shame. There are so many more resources for Bootstrap, but Foundation is so much better. Wish there were more materials available.

You commented on Jeff Kinley's post about 5 years

Thanks, Rafi. Using JointsWP. But edited, of course. Here goes: I'll start with header.php, then the off-canvas partial, and then finally CSS. Perhaps its the padding I have set on the header. But I did that so that topbar and tabbar were not different in size. In the past I tried resizing topbar, but never could get good results. Any thoughts greatly appreciated.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">

      <div id="container">

        <header class="header" role="banner">
          <?php get_template_part( 'partials/nav', 'offcanvas' ); ?> 
        </header> <!-- end header -->
<div class="nav-container contain-to-grid show-for-medium-up fixed" style="padding-top: 22px; padding-bottom: 36px;">

    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <a href="<?php echo home_url(); ?>" rel="nofollow"><img src="<?php bloginfo('template_directory'); ?>/images/cg-logo-header.png" /></a>
        </li>
        <li class="toggle-topbar menu-icon">
          <a href="#"><span>Menu</span></a>
        </li>
      </ul>    
      <section class="top-bar-section">

        <ul class="left">
          <?php joints_main_nav(); ?>
        </ul>

        <ul class="right">
          <li class="has-form">
              <a href="https://comptongrinders.com/products/checkout/" class="button radius">My Cart</a>
            </li>
        </ul>

      </section>
    </nav>
  </div>



<div class="show-for-small-only">
  <div class="contain-to-grid">
    <nav class="tab-bar">
      <section class="left tab-bar-section">
        <a href="/"><img src="<?php bloginfo ('template_directory');?>/images/cg-logo-header-mobile.png" /></a>
      </section>
      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>
  </div>
</div>



<aside class="right-off-canvas-menu show-for-small-only">
  <ul class="off-canvas-list">
    <li><label>Compton Grinders</label></li>
      <?php joints_main_nav(); ?>
     <li><a class="button radius" style="margin: 0 auto; width: 90%;" href="https://comptongrinders.com/products/checkout/">My Cart</a>
  </ul>
</aside>

<a class="exit-off-canvas"></a>

header.header {
  margin-bottom: 0;
  background: #fff; }

You commented on Vladimir's post about 5 years

Can somebody please clarify. Very frustrating to have incorrect docs. i have tried all sorts of permutations and can't get this to work.

Thanks,

Jeff

You commented on Rafi Benkual's post over 5 years

Unfortunately, when you change the height of your top-bar, it also affects the drop-down menu's as well. Anyone have a solution for this?

You commented on ayezee's post over 5 years

What if you are using the SASS version? I tried changing all the top-bar bg items in settings.scss, but it is not working.

You commented on Dipak Saraf's post almost 6 years

Ok. I finally got the social icons in the topbar and found the css necessary to make the icons big enough. So first, here is the html to put a list of social icons on the right side of the topbar:

<ul class="right">
      <li><a href="#" title="Follow Us On Facebook"><i class="fi-social-facebook"></i></a></li>
      <li><a href="#" title="Follow Us On Google Plus"><i class="fi-social-google-plus"></i></a></li>
      <li><a href="#" title="Follow Us On YouTube"><i class="fi-social-youtube"></i></a></li>
      <li><a href="#" title="Follow Us On Linked In"><i class="fi-social-linkedin"></i></a></li>
      <li><a href="#" title="RSS Feed"><i class="fi-rss"></i></a></li>
     </ul>

When you do that, the icons appear but they are very tiny. So I finally found the css to make them bigger without breaking the topbar:

ul.right li a {font-size: 1.3rem;}

That may not be the best solution, but it seems to be working for me. Any other ideas?

https://www.dropbox.com/s/ckvthyvaylgmbgx/Screenshot%202014-02-12%2011.10.42.png

You commented on Dipak Saraf's post almost 6 years

I also tried hardcoding a list into the topbar of my header.php. But when I try to make them larger, they bust out of the topbar. Have not discovered how to fix it yet. Very surprised that this is not a more common request. Topbar would be great for social icons.

Posts Followed



Following

  • No Content

Followers

  • No Content