Menu icon Foundation

Developer | Vancouver, BC

Web developer & System Administrator

My Posts



My Comments

Michal Pandyra commented on Sean M. Kimball's post 2 months

I'm not sure whether the Flowplayer package is built in a modular nature supported natively by Webpack. You may have to do some shimming to get things to work.
https://webpack.js.org/guides/shimming/

Michal Pandyra commented on Steve Juliusson's post 2 months

I'd recommend trying two things.
First, check the networking tab of your browser's web inspector to make sure that all of the font resources are being loaded correctly.
Second, make sure that the glyphs you've pasted into your CSS haven't been replaced by your code editor or IDE with an actual 'white box' character. Make sure you're saving your files in UTF-8.
As a suggestion, rather than pasting the character directly into the CSS, why don't you try using the unicode hex notation. This keeps things nice and ASCII. You can find the hex values for all of FontAwesome's unicode characters on their site.

http://fontawesome.io/icons/
http://fontawesome.io/cheatsheet/

Does that make a difference?
content: '□';
to:
content: '\f13c';
 

Michal Pandyra commented on Roy Six's post 2 months

Hi Roy,
Thanks for sharing. An elegant solution to an age-old problem! Thanks for taking the time to work it into Foundation's wrapper structure.

Michal Pandyra commented on Monk's post 2 months

If you wish to continue using the Float Grid, Cloudflare CDN does appear to provide a version built for it. The file is here:
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation-float.min.css

Michal Pandyra commented on Monk's post 2 months

Good morning,
With Foundation 6.4 cane some sweeping changes to the entire framework. The new XY Grid layout tool was introduced as the new standard and the traditional Float Grid and Flex Grid have been moved to a legacy branch.
I suspect that the version of Foundation 6.4 available via Cloudflare CDN has been compiled to the new standard.

Michal Pandyra commented on Guy Van Bael's post 2 months

Thanks Guy, I've updated the issue on GitHub to hopefully gain some traction.

Michal Pandyra commented on Greg Brown's post 2 months

Good morning Ron,
Looks as though this is a lower level issue specific to the operating system's kernel. Not necessarily to do with the matter at hand, but it's great to be aware of it and have a solution in our back pocket.
Thanks for sharing.

Michal Pandyra commented on Monk's post 2 months

It looks like the Foundation 6.4.1 CSS file that you're loading from the CDN is compiled for use with the new "XY Grid" system while your HTML markup is for the traditional Grid.

Michal Pandyra commented on Elisandro Martinez's post 2 months

Hi Lee,
Two quick CSS only solutions that don't require any changes to HTML. Neither are particularly elegant and each has its own set of drawbacks.
This is drop-in CSS code that leverages variables already set by Foundation.
SVG images to the left and right of the button:
.button {

position: relative;
transition: none;

&:before, &:after {
display: block;
position: absolute;
height: calc( 100% + 2px);
width: auto;
top: -1px;
bottom: 0;
overflow: hidden;
width: 15px;
transition: none;
}

&:before {
content: '';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
background-size: cover;
right: calc( 100% + 1px );
}

&:after {
content: '';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
background-size: cover;
left: calc( 100% + 1px );
}

&:hover, &:focus {

&:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
}

&:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
}

}

}
Non-SVG version that relies on CSS transformations and z-index positioning:
.button {

background-color: transparent;
position: relative;

&:before {
content: '';
position: absolute;
width: calc( 100% + 10px);
height: 100%;
top: 0;
left: -5px;
z-index: -1;
background-color: $button-background;
transform: skewX(-15deg);
}

&:hover, &:focus {
background-color: transparent;

&:before {
  background-color: $button-background-hover;
}

}

}

Michal Pandyra commented on Greg Brown's post 2 months

Hi Ron,
Did your console report any errors when installing the npm package? What are the errors npm is returning when you are running the watcher?

Posts Followed











Following

    No Content

Followers

My Posts

My Comments

You commented on Sean M. Kimball's post 2 months

I'm not sure whether the Flowplayer package is built in a modular nature supported natively by Webpack. You may have to do some shimming to get things to work.
https://webpack.js.org/guides/shimming/

You commented on Steve Juliusson's post 2 months

I'd recommend trying two things.
First, check the networking tab of your browser's web inspector to make sure that all of the font resources are being loaded correctly.
Second, make sure that the glyphs you've pasted into your CSS haven't been replaced by your code editor or IDE with an actual 'white box' character. Make sure you're saving your files in UTF-8.
As a suggestion, rather than pasting the character directly into the CSS, why don't you try using the unicode hex notation. This keeps things nice and ASCII. You can find the hex values for all of FontAwesome's unicode characters on their site.

http://fontawesome.io/icons/
http://fontawesome.io/cheatsheet/

Does that make a difference?
content: '□';
to:
content: '\f13c';
 

You commented on Roy Six's post 2 months

Hi Roy,
Thanks for sharing. An elegant solution to an age-old problem! Thanks for taking the time to work it into Foundation's wrapper structure.

You commented on Monk's post 2 months

If you wish to continue using the Float Grid, Cloudflare CDN does appear to provide a version built for it. The file is here:
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation-float.min.css

You commented on Monk's post 2 months

Good morning,
With Foundation 6.4 cane some sweeping changes to the entire framework. The new XY Grid layout tool was introduced as the new standard and the traditional Float Grid and Flex Grid have been moved to a legacy branch.
I suspect that the version of Foundation 6.4 available via Cloudflare CDN has been compiled to the new standard.

You commented on Guy Van Bael's post 2 months

Thanks Guy, I've updated the issue on GitHub to hopefully gain some traction.

You commented on Greg Brown's post 2 months

Good morning Ron,
Looks as though this is a lower level issue specific to the operating system's kernel. Not necessarily to do with the matter at hand, but it's great to be aware of it and have a solution in our back pocket.
Thanks for sharing.

You commented on Monk's post 2 months

It looks like the Foundation 6.4.1 CSS file that you're loading from the CDN is compiled for use with the new "XY Grid" system while your HTML markup is for the traditional Grid.

You commented on Elisandro Martinez's post 2 months

Hi Lee,
Two quick CSS only solutions that don't require any changes to HTML. Neither are particularly elegant and each has its own set of drawbacks.
This is drop-in CSS code that leverages variables already set by Foundation.
SVG images to the left and right of the button:
.button {

position: relative;
transition: none;

&:before, &:after {
display: block;
position: absolute;
height: calc( 100% + 2px);
width: auto;
top: -1px;
bottom: 0;
overflow: hidden;
width: 15px;
transition: none;
}

&:before {
content: '';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
background-size: cover;
right: calc( 100% + 1px );
}

&:after {
content: '';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
background-size: cover;
left: calc( 100% + 1px );
}

&:hover, &:focus {

&:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
}

&:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
}

}

}
Non-SVG version that relies on CSS transformations and z-index positioning:
.button {

background-color: transparent;
position: relative;

&:before {
content: '';
position: absolute;
width: calc( 100% + 10px);
height: 100%;
top: 0;
left: -5px;
z-index: -1;
background-color: $button-background;
transform: skewX(-15deg);
}

&:hover, &:focus {
background-color: transparent;

&:before {
  background-color: $button-background-hover;
}

}

}

You commented on Greg Brown's post 2 months

Hi Ron,
Did your console report any errors when installing the npm package? What are the errors npm is returning when you are running the watcher?

Posts Followed




Following

  • No Content

Followers

  • No Content