Menu icon Foundation

Developer | Bronx, NY

A WordPress dev discovering the wonders of Foundation. :-)

My Posts



My Comments

Rachel Vasquez commented on Harout 's post over 4 years

You must be my mind reader - seriously. I just wondered the same thing recently and wrote a tutorial based on my experience. The assumption of the tutorial is you're not using any package managers though. Hope it helps:

http://rachievee.com/foundation-underscores-and-sass/

As for workflow - I have a master sass file that I include my partials like variables, helpers (mixins and modular classes), global and individual styles per page or part of site. It looks something like this:

@import "partials/variables";
@import "partials/helpers";
@import "partials/global";
@import "partials/homepage";
@import "partials/about";
/* And so on... */

I also cleaned up Foundation's Sass file so it only has what I needed versus using all the components. I explain how to do that in the tutorial.

In my functions.php I'm enqueueing the files in a specific order:

  wp_enqueue_style( 'theme-default' );   //the style.css in the theme folder's root
  wp_enqueue_style( 'theme-foundation-normalize' ); //foundation's normalize
  wp_enqueue_style( 'theme-foundation-css' ); //foundation's Sass output Css file
  wp_enqueue_style( 'theme-master' );  //my master pulling my variables/helpers/custom etc.

Hope that helps!

Rachel Vasquez commented on Rachel Vasquez's post over 4 years

Just wanted to make a note that this is working fine now - there was probably something else interfering but eventually, having those partials without visibility classes in their code was what I did. I also have a loader running on the site, using pace.js so the page doesn't show until everything is loaded so that may have helped.

http://github.hubspot.com/pace/docs/welcome/

Marking as resolved.

Rachel Vasquez commented on Phil He's post over 4 years

@Rafi Benkual Thanks for referring to my blog on RachieVee. :-)

Assuming this is not WordPress that Phil is working off of - is there any reason why you can't separate those two blocks of PHP into partials? I had an issue with using PHP at first as well used includes, maybe this thread will help?

http://foundation.zurb.com/forum/posts/21954-getting-lag-with-interchange-in-wordpress

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

I ended up just using JQuery to add a body class based on screen width which I based off of my foundation size for "small."

So something like this in case it helps someone in the future:

 function MobileClass(){
  var body = $('body'),
  viewportWidth = $(window).width();

  if( viewportWidth < 640 ){ 
    body.addClass('mobile');
  } else {
    body.addClass('medium-up');
  }
}

And I'm also using interchange rather than trying to use body class conditionals. The body class I'm using just for styling purposes.

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

Here is an example of what one of the 3 partials look like - this is for Small:

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

<!-- ===== COLUMN 01: MOBILE ======== -->
<div class="footer-contact footer-block">
  <h3 class="footer-block-title"><?php _e( 'Contact Us', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_contact' ) ); ?>
</div>
<!-- ===== COLUMN 02: MOBILE ======== -->
<div class="footer-newsletter footer-block">
  <h3 class="footer-block-title"><?php _e( 'Our Newsletter', 'my-theme' ); ?></h3>
  <p><?php _e( 'Want exclusive offers and first access to events? Join our email newsletter.', 'my-theme' ); ?></p>
  <a href="<?php echo site_url( '/newsletter-signup' ); ?>" class="footer-button newsletter"><?php _e( 'Sign Up', 'my-theme' ); ?></a>
</div>
<!-- ===== COLUMN 03: MOBILE ======== -->
<div class="footer-stores footer-customer footer-block">
  <h3 class="footer-block-title"><?php _e( 'Find a Store', 'my-theme' ); ?></h3>
  <a href="<?php echo site_url('/store-locator'); ?>" class="footer-button stores"><?php _e('View Stores', 'my-theme' ); ?></a>
</div>
<!-- ===== COLUMN 04: MOBILE ======== -->
<div class="footer-block">
  <h3 class="footer-block-title"><?php _e( 'Customer Support', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_customer' ) ); ?>
</div>
<!-- ===== COLUMN 05: MOBILE ======== -->
<div class="footer-company footer-block">
  <h3 class="footer-block-title"><?php _e( 'Company', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_company' ) ); ?>
</div>

And then what Medium looks like:

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

<!-- ===== COLUMN 01: TABLET  ======== -->
<div class="column medium-3">
  <div class="footer-contact footer-block">
    <h3 class="footer-block-title"><?php _e( 'Contact Us', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_contact' ) ); ?>
  </div>

  <div class="footer-company footer-block">
    <h3 class="footer-block-title"><?php _e( 'Company', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_company' ) ); ?>
  </div>
</div>
<!-- ===== COLUMN 02: TABLET  ======== -->
<div class="column medium-5">
  <div class="footer-newsletter footer-block">
    <h3 class="footer-block-title"><?php _e( 'Our Newsletter', 'my-theme' ); ?></h3>
    <p><?php _e( 'Want exclusive offers and first access to events? Join our email newsletter.', 'my-theme' ); ?></p>
    <a href="<?php echo site_url( '/newsletter-signup' ); ?>" class="footer-button newsletter"><?php _e( 'Sign Up', 'my-theme' ); ?></a>
  </div>

  <div class="footer-customer footer-block">
    <h3 class="footer-block-title"><?php _e( 'Customer Support', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_customer' ) ); ?>
  </div>
</div>

<!-- ===== COLUMN 03: TABLET  ======== -->
<div class="column medium-4">
  <div class="footer-stores footer-block">
    <h3 class="footer-block-title"><?php _e( 'Find a Store', 'my-theme' ); ?></h3>
    <a href="<?php echo site_url('/store-locator'); ?>" class="footer-button stores"><?php _e('View Stores', 'my-theme' ); ?></a>
  </div>

  <div class="footer-social footer-block">
    <h3 class="footer-block-title"><?php _e( 'Stay Connected', 'my-theme' ); ?></h3>
    <a href="http://www.tumblr.com" class="link-social tumblr" target="_blank"><?php _e( 'Tumblr', 'my-theme' ); ?></a>
    <a href="https://www.pinterest.com" class="link-social pinterest" target="_blank"><?php _e( 'Pinterest', 'my-theme' ); ?></a>
    <a href="https://twitter.com" class="link-social twitter" target="_blank"><?php _e( 'Twitter', 'my-theme' ); ?></a>
    <a href="https://www.facebook.com" class="link-social facebook" target="_blank"><?php _e( 'Facebook', 'my-theme' ); ?></a>
    <a href="http://instagram.com" class="link-social instagram" target="_blank"><?php _e( 'Instagram', 'my-theme' ); ?></a>
  </div>
</div>

If you see, the number of columns are different and some content splits or appears in other columns, hence why I went the partial route versus just visibility classes because I couldn't find a clean readable way to pull it off...

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

@Chris M

The partials mostly have the same content - problem is the way the rows and columns are with the grid, and the way the designs are for mobile, the designs don't naturally stack.

So instead of things stacking beneath each other (like they should, I agree, I'm the dev, not the designer lol), the designs have columns either re-arranging or some content within columns showing up in other columns instead. Due to the nature of the designs, using the visibility classes with the rows/columns was confusing the heck out of me so partials seemed to be the most easy to read and less brain-busting approach.

Perhaps I should give it another try... I'll see if I can post a simple example later.

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

Also looks like the lag is coming from the partials themselves. Trying interchange with images that are also called with PHP and they work smoothly and perfectly.

So interchange with PHP image - good. Interchange with PHP partials that have mixed content - is no good.

My partials have this up top from that other WordPress reference I posted in the question - could this be the issue?

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

@Chris M You're right, I didn't think of that. I tried it with window re-sizer chrome extension just to see. And it looks it does still have a lag. Like it takes a moment for it to load the proper partial.

I also removed any grid visibility classes in the partials because I didn't want interference and still got lag.

So I have two choices:

1) Partials for sm/md/lg with visibility classes and using includes:

<?php include('partials/footer-lg.php'); ?>
<?php include('partials/footer-md.php'); ?>
<?php include('partials/footer-sm.php'); ?>

Method 1 doesn't have lag but I feel like I'm loading up extra html/code I don't need and using the visibility classes to hide them - I'd rather not do that.

2) Partials for sm/md/lg withOUT visibility classes and using interchange to swap:

<div data-interchange="[<?php echo get_stylesheet_directory_uri();?>/partials/footer-sm.php, (small)], [<?php echo get_stylesheet_directory_uri();?>/partials/footer-md.php, (medium)], [<?php echo get_stylesheet_directory_uri();?>/partials/footer-lg.php, (large)]"></div>

Method 2, I won't have a bunch of code just showing and hiding - instead, it will just swap what it needs depending on the size. But this is what gives lag.

Trying to pick the option for best performance obviously, so the tradeoff is more code loading, but faster partial swap, or less code with interchange, but laggy partial swap.

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

@Rafi Benkual I'm loading all JS before the closing body tag except jQuery and Modernizr which is in the head.

The partials are also using the grid - do you think maybe having the grid load before or after the interchange loading would make a difference? The grid is css and js whereas interchange is just js, correct?

Rachel Vasquez commented on Rachel Vasquez's post almost 5 years

@Brandon Arnold - not a body class, but definitely helps me to use interchange - I'll try this method and make any further comments there. Thanks. :-)

I would've liked the body class though, I feel it would've been a neater solution using WordPress conditionals if anyone's still up for offering a solution for that.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Harout 's post over 4 years

You must be my mind reader - seriously. I just wondered the same thing recently and wrote a tutorial based on my experience. The assumption of the tutorial is you're not using any package managers though. Hope it helps:

http://rachievee.com/foundation-underscores-and-sass/

As for workflow - I have a master sass file that I include my partials like variables, helpers (mixins and modular classes), global and individual styles per page or part of site. It looks something like this:

@import "partials/variables";
@import "partials/helpers";
@import "partials/global";
@import "partials/homepage";
@import "partials/about";
/* And so on... */

I also cleaned up Foundation's Sass file so it only has what I needed versus using all the components. I explain how to do that in the tutorial.

In my functions.php I'm enqueueing the files in a specific order:

  wp_enqueue_style( 'theme-default' );   //the style.css in the theme folder's root
  wp_enqueue_style( 'theme-foundation-normalize' ); //foundation's normalize
  wp_enqueue_style( 'theme-foundation-css' ); //foundation's Sass output Css file
  wp_enqueue_style( 'theme-master' );  //my master pulling my variables/helpers/custom etc.

Hope that helps!

You commented on Rachel Vasquez's post over 4 years

Just wanted to make a note that this is working fine now - there was probably something else interfering but eventually, having those partials without visibility classes in their code was what I did. I also have a loader running on the site, using pace.js so the page doesn't show until everything is loaded so that may have helped.

http://github.hubspot.com/pace/docs/welcome/

Marking as resolved.

You commented on Phil He's post over 4 years

@Rafi Benkual Thanks for referring to my blog on RachieVee. :-)

Assuming this is not WordPress that Phil is working off of - is there any reason why you can't separate those two blocks of PHP into partials? I had an issue with using PHP at first as well used includes, maybe this thread will help?

http://foundation.zurb.com/forum/posts/21954-getting-lag-with-interchange-in-wordpress

You commented on Rachel Vasquez's post almost 5 years

I ended up just using JQuery to add a body class based on screen width which I based off of my foundation size for "small."

So something like this in case it helps someone in the future:

 function MobileClass(){
  var body = $('body'),
  viewportWidth = $(window).width();

  if( viewportWidth < 640 ){ 
    body.addClass('mobile');
  } else {
    body.addClass('medium-up');
  }
}

And I'm also using interchange rather than trying to use body class conditionals. The body class I'm using just for styling purposes.

You commented on Rachel Vasquez's post almost 5 years

Here is an example of what one of the 3 partials look like - this is for Small:

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

<!-- ===== COLUMN 01: MOBILE ======== -->
<div class="footer-contact footer-block">
  <h3 class="footer-block-title"><?php _e( 'Contact Us', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_contact' ) ); ?>
</div>
<!-- ===== COLUMN 02: MOBILE ======== -->
<div class="footer-newsletter footer-block">
  <h3 class="footer-block-title"><?php _e( 'Our Newsletter', 'my-theme' ); ?></h3>
  <p><?php _e( 'Want exclusive offers and first access to events? Join our email newsletter.', 'my-theme' ); ?></p>
  <a href="<?php echo site_url( '/newsletter-signup' ); ?>" class="footer-button newsletter"><?php _e( 'Sign Up', 'my-theme' ); ?></a>
</div>
<!-- ===== COLUMN 03: MOBILE ======== -->
<div class="footer-stores footer-customer footer-block">
  <h3 class="footer-block-title"><?php _e( 'Find a Store', 'my-theme' ); ?></h3>
  <a href="<?php echo site_url('/store-locator'); ?>" class="footer-button stores"><?php _e('View Stores', 'my-theme' ); ?></a>
</div>
<!-- ===== COLUMN 04: MOBILE ======== -->
<div class="footer-block">
  <h3 class="footer-block-title"><?php _e( 'Customer Support', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_customer' ) ); ?>
</div>
<!-- ===== COLUMN 05: MOBILE ======== -->
<div class="footer-company footer-block">
  <h3 class="footer-block-title"><?php _e( 'Company', 'my-theme' ); ?></h3>
  <?php wp_nav_menu( array( 'theme_location' => 'footer_company' ) ); ?>
</div>

And then what Medium looks like:

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

<!-- ===== COLUMN 01: TABLET  ======== -->
<div class="column medium-3">
  <div class="footer-contact footer-block">
    <h3 class="footer-block-title"><?php _e( 'Contact Us', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_contact' ) ); ?>
  </div>

  <div class="footer-company footer-block">
    <h3 class="footer-block-title"><?php _e( 'Company', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_company' ) ); ?>
  </div>
</div>
<!-- ===== COLUMN 02: TABLET  ======== -->
<div class="column medium-5">
  <div class="footer-newsletter footer-block">
    <h3 class="footer-block-title"><?php _e( 'Our Newsletter', 'my-theme' ); ?></h3>
    <p><?php _e( 'Want exclusive offers and first access to events? Join our email newsletter.', 'my-theme' ); ?></p>
    <a href="<?php echo site_url( '/newsletter-signup' ); ?>" class="footer-button newsletter"><?php _e( 'Sign Up', 'my-theme' ); ?></a>
  </div>

  <div class="footer-customer footer-block">
    <h3 class="footer-block-title"><?php _e( 'Customer Support', 'my-theme' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'footer_customer' ) ); ?>
  </div>
</div>

<!-- ===== COLUMN 03: TABLET  ======== -->
<div class="column medium-4">
  <div class="footer-stores footer-block">
    <h3 class="footer-block-title"><?php _e( 'Find a Store', 'my-theme' ); ?></h3>
    <a href="<?php echo site_url('/store-locator'); ?>" class="footer-button stores"><?php _e('View Stores', 'my-theme' ); ?></a>
  </div>

  <div class="footer-social footer-block">
    <h3 class="footer-block-title"><?php _e( 'Stay Connected', 'my-theme' ); ?></h3>
    <a href="http://www.tumblr.com" class="link-social tumblr" target="_blank"><?php _e( 'Tumblr', 'my-theme' ); ?></a>
    <a href="https://www.pinterest.com" class="link-social pinterest" target="_blank"><?php _e( 'Pinterest', 'my-theme' ); ?></a>
    <a href="https://twitter.com" class="link-social twitter" target="_blank"><?php _e( 'Twitter', 'my-theme' ); ?></a>
    <a href="https://www.facebook.com" class="link-social facebook" target="_blank"><?php _e( 'Facebook', 'my-theme' ); ?></a>
    <a href="http://instagram.com" class="link-social instagram" target="_blank"><?php _e( 'Instagram', 'my-theme' ); ?></a>
  </div>
</div>

If you see, the number of columns are different and some content splits or appears in other columns, hence why I went the partial route versus just visibility classes because I couldn't find a clean readable way to pull it off...

You commented on Rachel Vasquez's post almost 5 years

@Chris M

The partials mostly have the same content - problem is the way the rows and columns are with the grid, and the way the designs are for mobile, the designs don't naturally stack.

So instead of things stacking beneath each other (like they should, I agree, I'm the dev, not the designer lol), the designs have columns either re-arranging or some content within columns showing up in other columns instead. Due to the nature of the designs, using the visibility classes with the rows/columns was confusing the heck out of me so partials seemed to be the most easy to read and less brain-busting approach.

Perhaps I should give it another try... I'll see if I can post a simple example later.

You commented on Rachel Vasquez's post almost 5 years

Also looks like the lag is coming from the partials themselves. Trying interchange with images that are also called with PHP and they work smoothly and perfectly.

So interchange with PHP image - good. Interchange with PHP partials that have mixed content - is no good.

My partials have this up top from that other WordPress reference I posted in the question - could this be the issue?

require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

You commented on Rachel Vasquez's post almost 5 years

@Chris M You're right, I didn't think of that. I tried it with window re-sizer chrome extension just to see. And it looks it does still have a lag. Like it takes a moment for it to load the proper partial.

I also removed any grid visibility classes in the partials because I didn't want interference and still got lag.

So I have two choices:

1) Partials for sm/md/lg with visibility classes and using includes:

<?php include('partials/footer-lg.php'); ?>
<?php include('partials/footer-md.php'); ?>
<?php include('partials/footer-sm.php'); ?>

Method 1 doesn't have lag but I feel like I'm loading up extra html/code I don't need and using the visibility classes to hide them - I'd rather not do that.

2) Partials for sm/md/lg withOUT visibility classes and using interchange to swap:

<div data-interchange="[<?php echo get_stylesheet_directory_uri();?>/partials/footer-sm.php, (small)], [<?php echo get_stylesheet_directory_uri();?>/partials/footer-md.php, (medium)], [<?php echo get_stylesheet_directory_uri();?>/partials/footer-lg.php, (large)]"></div>

Method 2, I won't have a bunch of code just showing and hiding - instead, it will just swap what it needs depending on the size. But this is what gives lag.

Trying to pick the option for best performance obviously, so the tradeoff is more code loading, but faster partial swap, or less code with interchange, but laggy partial swap.

You commented on Rachel Vasquez's post almost 5 years

@Rafi Benkual I'm loading all JS before the closing body tag except jQuery and Modernizr which is in the head.

The partials are also using the grid - do you think maybe having the grid load before or after the interchange loading would make a difference? The grid is css and js whereas interchange is just js, correct?

You commented on Rachel Vasquez's post almost 5 years

@Brandon Arnold - not a body class, but definitely helps me to use interchange - I'll try this method and make any further comments there. Thanks. :-)

I would've liked the body class though, I feel it would've been a neater solution using WordPress conditionals if anyone's still up for offering a solution for that.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content