Menu icon Foundation

My Posts

No Content

My Comments

Zackery Gianotti commented on Philip Feldmann's post about 3 years

Hi Rachel
I'm not really understanding what you are trying to do. If there are specific overrides you are attempting, you could always create a custom class and 
@mixin
or 
@extend
the Foundation class name and do your overrides below that. As long as your custom-written CSS is last in the load order it will override the original settings. I personally create my own scss file (usually called "_custom.scss" and @import it at the bottom of the app.scss file. I use that file for very specific overrides that I want.
 
Additionally, custom made components are also in their own _COMPONENT-NAME.scss document. They all get imported after my custom file. Basically, whatever is last, is the style that will be applied. 
 
This information is kind of vague, I know. If you were to provide some examples I could write up a CodePen in an attempt to help. (Not saying I have all the answers, but it is always good to soundboard with other developers.) 
 
In any case, happy coding and cheers!

Zackery Gianotti commented on Philip Feldmann's post about 3 years

Hi Brian
You're right about that! I am finding that many people forget there are more options in SCSS than using variables. Mixins and Includes are tremendously helpful. Possibly the largest bandwidth consumer is the app.js file once all is said and done. Don't forget to remove any JS that you aren't using. It tends to be overlooked. Removing the SCSS files reduces the app.css and the same is true for the JS files. Good luck moving forward! 

Zackery Gianotti commented on Philip Feldmann's post about 3 years

Hello, All!
As Rafi has shown, it is very possible to reduce Foundation down to just the components you want. But, if I am reading the post correctly, it seems the components themselves are what is missing. If that is the case, I recommend that the user updates their Bower, NPM (or whatever service they are using for the package management), Foundation CLI, Sass, Git, Grunt and Gulp and try a clean install unmodified. 

Zackery Gianotti commented on Henry Spencer's post about 3 years

Hello, All
I realized that my prior post wasn't very clear, so I took the liberty of creating a codepen with a clear example of using a wrapper for this effect. I hope it helps! 
 
http://codepen.io/ZMGDesigns/pen/OREboz
 
Cheers!

Zackery Gianotti commented on Zackery Gianotti's post about 3 years

Hi Rafi!
It's been a long while since we have last had a chance to collaborate. I hope all is well. As always, your assistance is very appreciated. While I am very familiar with the {{root}} helper, that does not work in the SCSS files. What you have demonstrated is an image being placed directly into the markup document using an <img> tag. In the example I am providing, the image is being set as a background image via the SCSS document. The Panini helpers do not help in the SCSS files. Now, if they are SUPPOSED to, then there is something wrong with my build. Can you confirm the Panini {{root}} helper is supposed to function in both the HTML and SCSS docs?
Thanks again, Rafi!
- Cheers!

Zackery Gianotti commented on Sergio Osorio's post about 3 years

Hi Sergio
While posting some new requests on the Forums I took a look at your site, perfectstylerecipes.com and I wanted to say it looks good! One thing I noticed, was the main nav is a bit jerky when you hover over them. You could fix that by adding a transparent border on the element (before the hover). Looks like you have this on the a:hover element:
border-bottom:8px inset #08b5ef;
If you were to add:
border-bottom:8px inset rgba(0, 0, 0, 0);
to the element when it is NOT in its hover state, you wouldn't see that 8px jump when you put the mouse over the navigation.
Just a tip!
Cheers!

Zackery Gianotti commented on Hig's post about 3 years

Move 
Foundation.Orbit.defaults.timerDelay = 10;
To the bottom. (Line 11.)
Is that what you are trying to do?
 
$(document).foundation();

setTimeout(function(){
$(".orbit").hide();
}, 2000);

setTimeout(function(){
$(".orbit").show();
}, 3000);

Foundation.Orbit.defaults.timerDelay = 10;

Zackery Gianotti commented on Henry Spencer's post about 3 years

You would want to include a container class, or add an actual background color to the MAIN, SECTION, ARTICLE, ASIDE, and any other content tags. Whether it is easier for you to wrap the site in a container or to add the background color to these elements is debatable. Guessing that since this post of over 2 years old it has been figured out, but if anybody out there needs further assistance, just let me know! I would be happy to assist! 

Zackery Gianotti commented on Vincent Morel's post about 4 years

Thanks Rafi. I guess I didnt realize it would be under visibility. Which makes sense in retrospect. Maybe it should also be mentioned in Accessibility since that is really what it is for. Just a thought. As always, I appreciate your assistance! - Cheers!

Zackery Gianotti commented on Vincent Morel's post about 4 years

I was not able to find this in the DOCs anywhere. Will it be added? (or did I just miss it?) I looked in typography, utility classes, and accessibility but was not able to find it. Searching for screen reader did not yield any results. (Except in the Forum of course!) Thanks for answering this question Rafi!

Posts Followed







Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Philip Feldmann's post about 3 years

Hi Rachel
I'm not really understanding what you are trying to do. If there are specific overrides you are attempting, you could always create a custom class and 
@mixin
or 
@extend
the Foundation class name and do your overrides below that. As long as your custom-written CSS is last in the load order it will override the original settings. I personally create my own scss file (usually called "_custom.scss" and @import it at the bottom of the app.scss file. I use that file for very specific overrides that I want.
 
Additionally, custom made components are also in their own _COMPONENT-NAME.scss document. They all get imported after my custom file. Basically, whatever is last, is the style that will be applied. 
 
This information is kind of vague, I know. If you were to provide some examples I could write up a CodePen in an attempt to help. (Not saying I have all the answers, but it is always good to soundboard with other developers.) 
 
In any case, happy coding and cheers!

You commented on Philip Feldmann's post about 3 years

Hi Brian
You're right about that! I am finding that many people forget there are more options in SCSS than using variables. Mixins and Includes are tremendously helpful. Possibly the largest bandwidth consumer is the app.js file once all is said and done. Don't forget to remove any JS that you aren't using. It tends to be overlooked. Removing the SCSS files reduces the app.css and the same is true for the JS files. Good luck moving forward! 

You commented on Philip Feldmann's post about 3 years

Hello, All!
As Rafi has shown, it is very possible to reduce Foundation down to just the components you want. But, if I am reading the post correctly, it seems the components themselves are what is missing. If that is the case, I recommend that the user updates their Bower, NPM (or whatever service they are using for the package management), Foundation CLI, Sass, Git, Grunt and Gulp and try a clean install unmodified. 

You commented on Henry Spencer's post about 3 years

Hello, All
I realized that my prior post wasn't very clear, so I took the liberty of creating a codepen with a clear example of using a wrapper for this effect. I hope it helps! 
 
http://codepen.io/ZMGDesigns/pen/OREboz
 
Cheers!

You commented on Zackery Gianotti's post about 3 years

Hi Rafi!
It's been a long while since we have last had a chance to collaborate. I hope all is well. As always, your assistance is very appreciated. While I am very familiar with the {{root}} helper, that does not work in the SCSS files. What you have demonstrated is an image being placed directly into the markup document using an <img> tag. In the example I am providing, the image is being set as a background image via the SCSS document. The Panini helpers do not help in the SCSS files. Now, if they are SUPPOSED to, then there is something wrong with my build. Can you confirm the Panini {{root}} helper is supposed to function in both the HTML and SCSS docs?
Thanks again, Rafi!
- Cheers!

You commented on Sergio Osorio's post about 3 years

Hi Sergio
While posting some new requests on the Forums I took a look at your site, perfectstylerecipes.com and I wanted to say it looks good! One thing I noticed, was the main nav is a bit jerky when you hover over them. You could fix that by adding a transparent border on the element (before the hover). Looks like you have this on the a:hover element:
border-bottom:8px inset #08b5ef;
If you were to add:
border-bottom:8px inset rgba(0, 0, 0, 0);
to the element when it is NOT in its hover state, you wouldn't see that 8px jump when you put the mouse over the navigation.
Just a tip!
Cheers!

You commented on Hig's post about 3 years

Move 
Foundation.Orbit.defaults.timerDelay = 10;
To the bottom. (Line 11.)
Is that what you are trying to do?
 
$(document).foundation();

setTimeout(function(){
$(".orbit").hide();
}, 2000);

setTimeout(function(){
$(".orbit").show();
}, 3000);

Foundation.Orbit.defaults.timerDelay = 10;

You commented on Henry Spencer's post about 3 years

You would want to include a container class, or add an actual background color to the MAIN, SECTION, ARTICLE, ASIDE, and any other content tags. Whether it is easier for you to wrap the site in a container or to add the background color to these elements is debatable. Guessing that since this post of over 2 years old it has been figured out, but if anybody out there needs further assistance, just let me know! I would be happy to assist! 

You commented on Vincent Morel's post about 4 years

Thanks Rafi. I guess I didnt realize it would be under visibility. Which makes sense in retrospect. Maybe it should also be mentioned in Accessibility since that is really what it is for. Just a thought. As always, I appreciate your assistance! - Cheers!

You commented on Vincent Morel's post about 4 years

I was not able to find this in the DOCs anywhere. Will it be added? (or did I just miss it?) I looked in typography, utility classes, and accessibility but was not able to find it. Searching for screen reader did not yield any results. (Except in the Forum of course!) Thanks for answering this question Rafi!

Posts Followed

Following

  • No Content

Followers

  • No Content