Menu icon Foundation

Coder | Jersey City, NJ

I'm a front-end guy. Excelling in CSS3 and HTML5 and building my JS chops. I've worked on the views for all sorts of app stacks: LAMP, Rails, Python, Node JS/Angular & .NET. I work with PHP daily on Wordpress theme and plugin customizations and consider myself an above average PHP coder as it relates to Wordpress actions and filters.

My Posts

No Content

My Comments

Chris Matthias commented on Dana Svedova's post about 5 years

Sorry for the late reply, Dana. I've experienced this bug before in Foundation 3-- If you move the top-bar to a different place sometimes this crops up-- essentially, what is happening is that the top-bar when it hits that scroll point gets set to be "fixed" and the .fixed class is applied to.top-bar`'s parent element.

This CSS style fixes it to the top of the site, thus, essentially pulling the .top-bar element right out of the layout so you'll lose whatever vertical space that .top-bar element was taking up when it is fixed. I think it's a bug in the script for that version-- I've had success creating a div.top-bar-fill just before my .top-bar element and using SASS/CSS to hide it initally and only activate it when the parent element is set to .fixed. The trick is to figure out how tall you want the filler-- it should match the height of the .top-bar element when it's NOT fixed.

HTML:

<div class="contain-to-grid sticky">
  <div class="sticky-fill"></div>
  <div class="top-bar">
    ...etc...
</div>
.sticky-fill { height: 42px; display: none; }
.fixed .sticky-fill { display: block; }

Chris Matthias commented on Nathaniel Flick's post about 5 years

I don't know about integration with Django much but I do know you can use grunt to copy the bower_compenents/ directory into /js/ or wherever you need it.

Here's a sample of my Gruntfile.js and package.json-- you can use those files and run npm install && bower install and then run grunt to watch which will compile your SASS and copy the bower components. Update the path to where you want your js files in the Gruntfile.js.

https://gist.github.com/thetrickster/8743340

Chris Matthias commented on neil kanth's post about 5 years

It's probably a CSS issue-- usually when you create a google map, the width and height need to be set via CSS. In your case since the accordians change size I might try to make sure you use:

.google-maps {
  width: 100%;
  height: 400px;
}

Right now the height of the .google-maps container is set to 0 which might be why either Google Maps is having an issue or maybe it's the accordian js. Not sure yet, but give that a try.

Chris Matthias commented on Patrick Turner's post about 5 years

Did you try running foundation update from your project folder? Also, you should definitely run bower update && bower install if you are having issues.

Did you try all this in a fresh project? It's possible that if you have an existing project and there's Gemfile file in there it could specifically be loading Foundation 4.

Chris Matthias commented on Dana Svedova's post about 5 years

It'd be much more helpful if we had a URL of the issue in action. Here's a reproduction of your code (without the color styling) and it's working fine: http://jsfiddle.net/thetrickster/LE5Ap/

So that means it has to do with the parent elements and their styles if this HTML block is inside other elements or it's a javascript error.

Chris Matthias commented on Alan Smithee's post about 5 years

@Ryan-- setting a height seems counter-intuitive. What happens if you add more items to your menu-- do you need to update the height of your nav.top-bar.expanded?

Chris Matthias commented on Alan Smithee's post about 5 years

Rafi's got the right idea-- you need to use CSS3 animations/transitions to get them to dropdown how you'd like. I've worked up a fiddle for you using the base Foundation 4 HTML markup for the top bar and the javascript-- all you'll need is the CSS from the fiddle and it should work--- i'm doing the dropdown effect on the UL elements inside .top-bar-section.

I've tried this on the default Foundation demo markup and it doesn't look great until you remove the background color from the #header element that the top bar is usually inside.

Here's the fiddle: http://jsfiddle.net/thetrickster/62bsF/

Chris Matthias commented on Bjorn Blomqvist's post about 5 years

Everyone else who wants to use the bower and grunt can use an adapted Gruntfile.js to copy the bower_components scripts to a /js/ folder or anywher you'd like them in your project.

If you have grunt/npm installed then just run: npm install grunt-contrib-copy --save-dev to install the grunt copy utility.

Next, add your 'copy' method to your Gruntfile.js:


copy: {
main: {
expand: true,
cwd: 'bower_components',
src: '**',
dest: 'js'
},
}

Then add grunt.loadNpmTasks('grunt-contrib-copy'); to the other npm tasks in your Gruntfile.js. You can see my Gruntfile i have for a project that uses the 'copy' method as well as some minification and concatenation: https://github.com/thetrickster/FoundationPress-child/blob/master/Gruntfile.js

Chris Matthias commented on Bjorn Blomqvist's post about 5 years

If you are only using the CSS part of Foundation and aren't familiar with bower/grunt/sass and all that then you should just download the "Default CSS" version of the library at http://foundation.zurb.com/develop/download.html

The version of Foundation you check out from Git is intended more for advanced development using the framework and SASS.

The "Default CSS" version doesn't have those folders you want to delete. If you go that route, however you will run into issues with easily updating the Foundation library in your project which is what the SASS/bower workflow is for.

Chris Matthias commented on Charlie Schliesser's post about 5 years

I started working on a Wordpress theme with Foundation 5 using libsass and I think that you just need to have Gruntfile.js and package.json in your project folder like mine: https://github.com/thetrickster/FoundationPress-child

You can keep the concat and other grunt methods in there or comment them out-- you're really mostly concerned with the libsass "watch" method anyway.

Once you have those two files in your project you might be able to run npm install && bower install to grab all the grunt/bower dependencies and run grunt once to setup/watch the sass.

The gruntfile I'm using copies the bower_compenents folder to /js/ in your project and also minifies and concatenates the foundation and app script files into one js-- edit or comment out whatever you don't need in my Gruntfile.js or create a temp foundation project using libsass and copy those files over from there.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Dana Svedova's post about 5 years

Sorry for the late reply, Dana. I've experienced this bug before in Foundation 3-- If you move the top-bar to a different place sometimes this crops up-- essentially, what is happening is that the top-bar when it hits that scroll point gets set to be "fixed" and the .fixed class is applied to.top-bar`'s parent element.

This CSS style fixes it to the top of the site, thus, essentially pulling the .top-bar element right out of the layout so you'll lose whatever vertical space that .top-bar element was taking up when it is fixed. I think it's a bug in the script for that version-- I've had success creating a div.top-bar-fill just before my .top-bar element and using SASS/CSS to hide it initally and only activate it when the parent element is set to .fixed. The trick is to figure out how tall you want the filler-- it should match the height of the .top-bar element when it's NOT fixed.

HTML:

<div class="contain-to-grid sticky">
  <div class="sticky-fill"></div>
  <div class="top-bar">
    ...etc...
</div>
.sticky-fill { height: 42px; display: none; }
.fixed .sticky-fill { display: block; }

You commented on Nathaniel Flick's post about 5 years

I don't know about integration with Django much but I do know you can use grunt to copy the bower_compenents/ directory into /js/ or wherever you need it.

Here's a sample of my Gruntfile.js and package.json-- you can use those files and run npm install && bower install and then run grunt to watch which will compile your SASS and copy the bower components. Update the path to where you want your js files in the Gruntfile.js.

https://gist.github.com/thetrickster/8743340

You commented on neil kanth's post about 5 years

It's probably a CSS issue-- usually when you create a google map, the width and height need to be set via CSS. In your case since the accordians change size I might try to make sure you use:

.google-maps {
  width: 100%;
  height: 400px;
}

Right now the height of the .google-maps container is set to 0 which might be why either Google Maps is having an issue or maybe it's the accordian js. Not sure yet, but give that a try.

You commented on Patrick Turner's post about 5 years

Did you try running foundation update from your project folder? Also, you should definitely run bower update && bower install if you are having issues.

Did you try all this in a fresh project? It's possible that if you have an existing project and there's Gemfile file in there it could specifically be loading Foundation 4.

You commented on Dana Svedova's post about 5 years

It'd be much more helpful if we had a URL of the issue in action. Here's a reproduction of your code (without the color styling) and it's working fine: http://jsfiddle.net/thetrickster/LE5Ap/

So that means it has to do with the parent elements and their styles if this HTML block is inside other elements or it's a javascript error.

You commented on Alan Smithee's post about 5 years

@Ryan-- setting a height seems counter-intuitive. What happens if you add more items to your menu-- do you need to update the height of your nav.top-bar.expanded?

You commented on Alan Smithee's post about 5 years

Rafi's got the right idea-- you need to use CSS3 animations/transitions to get them to dropdown how you'd like. I've worked up a fiddle for you using the base Foundation 4 HTML markup for the top bar and the javascript-- all you'll need is the CSS from the fiddle and it should work--- i'm doing the dropdown effect on the UL elements inside .top-bar-section.

I've tried this on the default Foundation demo markup and it doesn't look great until you remove the background color from the #header element that the top bar is usually inside.

Here's the fiddle: http://jsfiddle.net/thetrickster/62bsF/

You commented on Bjorn Blomqvist's post about 5 years

Everyone else who wants to use the bower and grunt can use an adapted Gruntfile.js to copy the bower_components scripts to a /js/ folder or anywher you'd like them in your project.

If you have grunt/npm installed then just run: npm install grunt-contrib-copy --save-dev to install the grunt copy utility.

Next, add your 'copy' method to your Gruntfile.js:


copy: {
main: {
expand: true,
cwd: 'bower_components',
src: '**',
dest: 'js'
},
}

Then add grunt.loadNpmTasks('grunt-contrib-copy'); to the other npm tasks in your Gruntfile.js. You can see my Gruntfile i have for a project that uses the 'copy' method as well as some minification and concatenation: https://github.com/thetrickster/FoundationPress-child/blob/master/Gruntfile.js

You commented on Bjorn Blomqvist's post about 5 years

If you are only using the CSS part of Foundation and aren't familiar with bower/grunt/sass and all that then you should just download the "Default CSS" version of the library at http://foundation.zurb.com/develop/download.html

The version of Foundation you check out from Git is intended more for advanced development using the framework and SASS.

The "Default CSS" version doesn't have those folders you want to delete. If you go that route, however you will run into issues with easily updating the Foundation library in your project which is what the SASS/bower workflow is for.

You commented on Charlie Schliesser's post about 5 years

I started working on a Wordpress theme with Foundation 5 using libsass and I think that you just need to have Gruntfile.js and package.json in your project folder like mine: https://github.com/thetrickster/FoundationPress-child

You can keep the concat and other grunt methods in there or comment them out-- you're really mostly concerned with the libsass "watch" method anyway.

Once you have those two files in your project you might be able to run npm install && bower install to grab all the grunt/bower dependencies and run grunt once to setup/watch the sass.

The gruntfile I'm using copies the bower_compenents folder to /js/ in your project and also minifies and concatenates the foundation and app script files into one js-- edit or comment out whatever you don't need in my Gruntfile.js or create a temp foundation project using libsass and copy those files over from there.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content