Menu icon Foundation

Developer | Florida

Full stack developer, designer, coder since 2001, programmer since 1987.

My Posts



My Comments

holmescreek commented on Mayura Ram's post 1 day

Great!  -- please be sure to mark as Helpful on my answer (above).
Again, for primary, alert, other buttons, you might want to play with the above code I provided along with SASS mixins -- if you need to style the default Foundation buttons globally.
Happy Coding!
 

holmescreek commented on Mike Weisz's post 1 day

This question is still relevant.
Maybe because every time you post a question on the forum it gets flagged as spam and you have to e-mail Zurb!
Foundation is a great product, but, if Zurb continues to allow forum bots to flag every post as spam, where you have to e-mail zurb to clarify, the forums (the main site for peer to peer support) will continue to suffer.
Without a solid, and growing,  peer to peer support platform, foundation just keeps shooting themselves in the foot. :/

holmescreek commented on Mayura Ram's post 1 day

Quickest way I could think of, might be better solutions if you need to apply it to the primary button, alert, etc, globally. Make sure mybutton is last in the html class link due to css specificity.
 
 
html:
<a class="button primary mybutton" href="/helpus/">CALL US TODAY!</a>
 
css:
 
.mybutton {
background: red; /* For browsers that do not support gradients /
background: -webkit-linear-gradient(left top, red, yellow); /
For Safari 5.1 to 6.0 /
background: -o-linear-gradient(bottom right, red, yellow); /
For Opera 11.1 to 12.0 /
background: -moz-linear-gradient(bottom right, red, yellow); /
For Firefox 3.6 to 15 /
background: linear-gradient(to bottom right, red, yellow); /
Standard syntax */
}

holmescreek commented on holmescreek's post 10 days

I think I finally got it. Ugh, seems every time I upgrade Foundation versions it takes half a day to get things sorted.
Anyway, I downloaded the npm/node installer from here:
https://nodejs.org/en/download/
After the install, I had to go into my old 6.3.x project folder and run:
 
sudo npm rebuild node-sass
 
sudo npm update -g npm
 
The last line above updates gulp - otherwise npm start will throw a (node:18275) message. ;)
npm start now seems to be running fine in old 6.3 project folders and foundation-cli seems to be working in 6.4.x project folders -- along with npm start.
 
<whew>

holmescreek commented on holmescreek's post 10 days

 I checked the OS X 64-bit message. Also in the error, I noticed that a message:
'Found bindings for the following environments:
  - OS X 64-bit with Node.js 4.x'
 
So, I downgraded to node 4.8.4 using :
 
sudo n 4.8.4
 
 
After this, foundation and npm start is working in 6.3 project folders but goes back to erroring out on 6.4.x project folders. :/
 
 
Thanks for your help, Rafi.

holmescreek commented on holmescreek's post 10 days

Yeah, I updated npm, node, etc.  Foundation new and npm start both work fine on a new 6.4.1 project, now whenever I go into an older Founation 6.3.0 project folder and run npm start, everything breaks. <ugh>
 
This is what I did to get foundation to work with 6.4.1, and foundation new and npm start:
sudo npm uninstall foundation-cli -global

sudo npm cache clean -f

sudo npm install -g n

sudo n stable

sudo npm update -g bower

sudo npm install foundation-cli -global

 
However, if I go into an older 6.3.0 project folder and run npm start I get these errors:
 
[12:39:35] Using gulpfile ~/Documents/webprojects/seacrest wolf preserve/public_html/site/templates/gulpfile.js
[12:39:35] Starting 'sass'...
[12:39:35] 'sass' errored after 84 ms
[12:39:35] Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (57)
 

holmescreek commented on holmescreek's post 10 days

Yeah. Still when I run sudo npm update -g foundation-cli then run foundation or foundation new, it gives me error that I included in the code section of the first post.

holmescreek commented on holmescreek's post 7 months

Adam, I appreciate you input. But, if you go back and re-read your reply, it's the same answer that put me into a dead end for four days. Quoting links to the documentation, which I wen through over and over for 4-5 days just puts you back into a cycle of google searches, reading pages of threads upon sub-threads ... just a nightmare.Right now, as you will see in my example, I've got the Foundation 5 to 6 transition working for me. On a side note, they really assed up when they changed the block grid, a great feature.After this project, nothing but converting a 2011 design over to make it responsive / accessible, I'll probably move over to bootstrap.
I love foundation, but, it just seems that in regards to support or the community forums, it seems dead.
Again, I do appreciate you trying to assist -- and in the future I do hope you and others will start pumping up these forums with tips, how-to's and helping others.
 

holmescreek commented on holmescreek's post 7 months

After digging around, since the original pos,t I managed to figure out how this is done. I'm going to leave the original post, as it may save a lot of people some frustration when moving from Foundation 5 to 6. It would be really nice if Zurb would create a 'How to move from F5 to F6' guide.The short answer is that to reduce code, Zurb decided to remove all the handy top-bar variables from the _settings.scss file in Foundation 6. This means that you will have to actually write the styles that you need for top-bar in Foundation 6.Here is a very (very) simple starting point show how to change the top-bar link color and hover color.  I added this to the _settings.scss file.
So, the short answer is : You'll  have to manually style things like the top-bar when you use Foundation 6 as the _settings.scss files does not include all the top-bar variables that use to be in Foundation 5.
 
/* add to _settings.scss */

/* just styling a plain top-bar horizontal navigation for full screens /
/
this just makes the links white and when you hover turns them yellow */

.top-bar li {

a {
color: white;

 &amp;:hover {
    color: yellow;
 }

}

}

/* this is how you style the top-bar when it switches to "mobile" mode /
/
by default the links will be red and turn blue on hover */

.top-bar ul.drilldown li {

a {
color:red;

   &amp;:hover { 
      color:blue;
   }

}
}

holmescreek commented on Kelly Wong's post over 1 year

This should fix ya up...

Just came across this google searching the same issue. I noticed when I zip compressed the foundation-icons folder, then decompressed them on my live server, the icons was missing. After checking the path I found the *nix permissions on the live server were wrong.

They should be in the foundation-icons folder

foundation-icons-css 644
foundation-icons-eot 644
foundation-icons-ttf 644
index.php 755


for ProcessWire CMS users only

I'm going to drop in the tag processwire here -- in case my fellow processwire developers run into the same issue as well. For processwire path in your header.php file, use this :

href="<?php echo $config->urls->templates?>foundation-icons/foundation-icons.css">

cheers!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Mayura Ram's post 1 day

Great!  -- please be sure to mark as Helpful on my answer (above).
Again, for primary, alert, other buttons, you might want to play with the above code I provided along with SASS mixins -- if you need to style the default Foundation buttons globally.
Happy Coding!
 

You commented on Mike Weisz's post 1 day

This question is still relevant.
Maybe because every time you post a question on the forum it gets flagged as spam and you have to e-mail Zurb!
Foundation is a great product, but, if Zurb continues to allow forum bots to flag every post as spam, where you have to e-mail zurb to clarify, the forums (the main site for peer to peer support) will continue to suffer.
Without a solid, and growing,  peer to peer support platform, foundation just keeps shooting themselves in the foot. :/

You commented on Mayura Ram's post 1 day

Quickest way I could think of, might be better solutions if you need to apply it to the primary button, alert, etc, globally. Make sure mybutton is last in the html class link due to css specificity.
 
 
html:
<a class="button primary mybutton" href="/helpus/">CALL US TODAY!</a>
 
css:
 
.mybutton {
background: red; /* For browsers that do not support gradients /
background: -webkit-linear-gradient(left top, red, yellow); /
For Safari 5.1 to 6.0 /
background: -o-linear-gradient(bottom right, red, yellow); /
For Opera 11.1 to 12.0 /
background: -moz-linear-gradient(bottom right, red, yellow); /
For Firefox 3.6 to 15 /
background: linear-gradient(to bottom right, red, yellow); /
Standard syntax */
}

You commented on holmescreek's post 10 days

I think I finally got it. Ugh, seems every time I upgrade Foundation versions it takes half a day to get things sorted.
Anyway, I downloaded the npm/node installer from here:
https://nodejs.org/en/download/
After the install, I had to go into my old 6.3.x project folder and run:
 
sudo npm rebuild node-sass
 
sudo npm update -g npm
 
The last line above updates gulp - otherwise npm start will throw a (node:18275) message. ;)
npm start now seems to be running fine in old 6.3 project folders and foundation-cli seems to be working in 6.4.x project folders -- along with npm start.
 
<whew>

You commented on holmescreek's post 10 days

 I checked the OS X 64-bit message. Also in the error, I noticed that a message:
'Found bindings for the following environments:
  - OS X 64-bit with Node.js 4.x'
 
So, I downgraded to node 4.8.4 using :
 
sudo n 4.8.4
 
 
After this, foundation and npm start is working in 6.3 project folders but goes back to erroring out on 6.4.x project folders. :/
 
 
Thanks for your help, Rafi.

You commented on holmescreek's post 10 days

Yeah, I updated npm, node, etc.  Foundation new and npm start both work fine on a new 6.4.1 project, now whenever I go into an older Founation 6.3.0 project folder and run npm start, everything breaks. <ugh>
 
This is what I did to get foundation to work with 6.4.1, and foundation new and npm start:
sudo npm uninstall foundation-cli -global

sudo npm cache clean -f

sudo npm install -g n

sudo n stable

sudo npm update -g bower

sudo npm install foundation-cli -global

 
However, if I go into an older 6.3.0 project folder and run npm start I get these errors:
 
[12:39:35] Using gulpfile ~/Documents/webprojects/seacrest wolf preserve/public_html/site/templates/gulpfile.js
[12:39:35] Starting 'sass'...
[12:39:35] 'sass' errored after 84 ms
[12:39:35] Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (57)
 

You commented on holmescreek's post 10 days

Yeah. Still when I run sudo npm update -g foundation-cli then run foundation or foundation new, it gives me error that I included in the code section of the first post.

You commented on holmescreek's post 7 months

Adam, I appreciate you input. But, if you go back and re-read your reply, it's the same answer that put me into a dead end for four days. Quoting links to the documentation, which I wen through over and over for 4-5 days just puts you back into a cycle of google searches, reading pages of threads upon sub-threads ... just a nightmare.Right now, as you will see in my example, I've got the Foundation 5 to 6 transition working for me. On a side note, they really assed up when they changed the block grid, a great feature.After this project, nothing but converting a 2011 design over to make it responsive / accessible, I'll probably move over to bootstrap.
I love foundation, but, it just seems that in regards to support or the community forums, it seems dead.
Again, I do appreciate you trying to assist -- and in the future I do hope you and others will start pumping up these forums with tips, how-to's and helping others.
 

You commented on holmescreek's post 7 months

After digging around, since the original pos,t I managed to figure out how this is done. I'm going to leave the original post, as it may save a lot of people some frustration when moving from Foundation 5 to 6. It would be really nice if Zurb would create a 'How to move from F5 to F6' guide.The short answer is that to reduce code, Zurb decided to remove all the handy top-bar variables from the _settings.scss file in Foundation 6. This means that you will have to actually write the styles that you need for top-bar in Foundation 6.Here is a very (very) simple starting point show how to change the top-bar link color and hover color.  I added this to the _settings.scss file.
So, the short answer is : You'll  have to manually style things like the top-bar when you use Foundation 6 as the _settings.scss files does not include all the top-bar variables that use to be in Foundation 5.
 
/* add to _settings.scss */

/* just styling a plain top-bar horizontal navigation for full screens /
/
this just makes the links white and when you hover turns them yellow */

.top-bar li {

a {
color: white;

 &amp;:hover {
    color: yellow;
 }

}

}

/* this is how you style the top-bar when it switches to "mobile" mode /
/
by default the links will be red and turn blue on hover */

.top-bar ul.drilldown li {

a {
color:red;

   &amp;:hover { 
      color:blue;
   }

}
}

You commented on Kelly Wong's post over 1 year

This should fix ya up...

Just came across this google searching the same issue. I noticed when I zip compressed the foundation-icons folder, then decompressed them on my live server, the icons was missing. After checking the path I found the *nix permissions on the live server were wrong.

They should be in the foundation-icons folder

foundation-icons-css 644
foundation-icons-eot 644
foundation-icons-ttf 644
index.php 755


for ProcessWire CMS users only

I'm going to drop in the tag processwire here -- in case my fellow processwire developers run into the same issue as well. For processwire path in your header.php file, use this :

href="<?php echo $config->urls->templates?>foundation-icons/foundation-icons.css">

cheers!

Posts Followed

Following

  • No Content

Followers

  • No Content