Menu icon Foundation

Engineer | San Francisco, CA

James Stone is an award-winning web designer and a top contributor to ZURB Foundation. Learn how front-end code + living styleguide can reduce team conflict, personal stress, and improve workflow with his free Design Systems Crash Course below:

My Posts

No Content

My Comments

James Stone commented on Tom Philips's post over 1 year

If you can you can support flexbox with your project, then you should use the ZURB Foundation for Sites flexbox grid. Once you add this you can then set the .align-middle class on your row.

You can learn more about that in the official docs on flex grid.

If you cannot support flexbox (IE I am looking at you), then you are in for a bit of work.

The typical workaround is to set everything up to be tables and table cells to accommodate vertical centering. This is even more complicated if you need to center to the full height of the device as you will need to set the height of every inheriting object to 100% including body and html.

A quick search of how to center content vertically in divs will point you in the right direction.

If at all possible, I recommend the flexbox based solution.

James Stone commented on sten's post almost 2 years

I believe Yeti Launch was also created with F4A.

James Stone commented on Simone Marcutti's post almost 2 years

These are both not needed for Foundation 6 Sites.

If you want to still use fast click the easiest way is to included it in your project with bower install.

As for the cookie jQuery plugin, I can't remember which specific js component used it. Maybe JoyRide? I would assume it is no longer a requirement which is why it is no longer included.

James Stone commented on Tom Belknap's post almost 2 years

Config.rb is from foundation 5 is you used compass (rather than grunt + libsass) to compile your sass.

i.e. compass watch

In Foundation 5 lots of people switched over to using Grunt / Libsass. This was with the --libsass flag when you use the foundation cli to install.

i.e. grunt

Now in Foundation 6 the default option is libsass + Gulp (A different project that is similar to Grunt).

i.e. npm start (or gulp)

I would recommend moving over to the Gulp workflow unless you have a strong reason for using Ruby Compass to compile your sass.

If you had modified your config.rb file before to optimize the output of your sass or to include additional sass import directories, you can do the same thing in the gulpfile.js. The format is slightly different but you should be able to largely do the same types of things.

James Stone commented on John Bocook's post almost 2 years

I recently created a video that might help if you are working on a windows installation.

https://www.youtube.com/watch?v=JKywQK4NPdc

Did you install git prior to node? Are you able to run it from the same directory?

James Stone commented on Steve Valet's post almost 2 years

@Jordan Bommelje is correct. The method I usually use is to put the panel class on the column instead of nesting it within it.

James Stone commented on Nick TC's post almost 2 years

I agree with @Knight Yoshi that sticking with Foundation 5 is a good move if you have not tested out functionality with v6.

I understand you are frustrated, but a more appropriate place to report issues that you are finding is on github issues. Here you can see if there are similar issues, there is often a discussion, potentially a workaround. The biggest thing is that it gets it in front of the right people who are fixing these things.

@Pawel if bootstrap is better for the project then go for it. Personally I have used Foundation 5 + Angular Foundation for countless projects and it is very solid.

James Stone commented on Vitas Kanaporis's post almost 2 years

If you are using apps then you will likely need to come up with an angular based solution.

However, you might look at the action sheet module in f4a and see if that solves your problem. It is very similar to a drop down menu.

http://foundation.zurb.com/apps/docs/#!/action-sheet

James Stone commented on Ron Wade's post almost 2 years

You need to change a variable in your _settings.scss file:

$grid-row-width Number $global-width

The maximum width of a row.

This is independent of breakpoints. Think of it as max-width being set on the row. Meaning if the viewport is wider, then it will be a specific amount. If the viewport is smaller then it will be 100% because it is less than this amount.

This is independent of the breakpoints and media queries, but you could potentially change that by overriding it in your own css. With say a different max-width on the .row for different breakpoints.

James Stone commented on Stanislav Simovski's post almost 2 years

I might have to take another look at Sails.js. I was using it a while back experimentally but there was very poor documentation on Passport and handling user authentication.

Nice job on the integration and thank you for sharing with the community.

Posts Followed


  • 1
    Reply
  • What happened to config.rb?

    By Tom Belknap

    config.rb

    Just trying to wrap my head around F6, currently, and creating a new Foundation project, I notice that the config.rb file is no longer present. Obviously, I can see a lot has changed about the new version, but I'm missing a very important component of my ... (continued)

    Last Reply by James Stone almost 2 years ago



  • 3
    Replies
  • Remove Spacing On Panel

    By Steve Valet

    panel sites

    What is the best method to remove the spacing on the side of a panel? I have three in a Foundation Row, and I would like the row to look like a single row instead of three columns in a row. I have attached images of what it looks like now, and what I ... (continued)

    Last Reply by Steve Valet almost 2 years ago


  • 26
    Replies
  • Disaster release Foundation 6

    By Nick TC

    foundation 6disaster

    Last year I have done a few projects with Foundation 5. Therefor I have been playing with Foundation 6 since the launch. I can't believe ZURB is releasing a product that's not ready and full of errors. 1. No migration guide between foundation 5 and 6 (... (continued)

    Last Reply by Nick TC almost 2 years ago




  • 3
    Replies
  • Foundation 6 Frustrations

    By Paper9oll

    foundation 6

    Hi All, I just started transiting and i find out that foundation 6 does changes a lot as in the _settings.scss no longer features a lot of variables (as ZURB developer says the code-base is now smaller in size) as i previous use the variables in my per... (continued)

    Last Reply by Antonio Gallo almost 2 years ago




Following

Followers

My Posts

No Content

My Comments

You commented on Tom Philips's post over 1 year

If you can you can support flexbox with your project, then you should use the ZURB Foundation for Sites flexbox grid. Once you add this you can then set the .align-middle class on your row.

You can learn more about that in the official docs on flex grid.

If you cannot support flexbox (IE I am looking at you), then you are in for a bit of work.

The typical workaround is to set everything up to be tables and table cells to accommodate vertical centering. This is even more complicated if you need to center to the full height of the device as you will need to set the height of every inheriting object to 100% including body and html.

A quick search of how to center content vertically in divs will point you in the right direction.

If at all possible, I recommend the flexbox based solution.

You commented on sten's post almost 2 years

I believe Yeti Launch was also created with F4A.

You commented on Simone Marcutti's post almost 2 years

These are both not needed for Foundation 6 Sites.

If you want to still use fast click the easiest way is to included it in your project with bower install.

As for the cookie jQuery plugin, I can't remember which specific js component used it. Maybe JoyRide? I would assume it is no longer a requirement which is why it is no longer included.

You commented on Tom Belknap's post almost 2 years

Config.rb is from foundation 5 is you used compass (rather than grunt + libsass) to compile your sass.

i.e. compass watch

In Foundation 5 lots of people switched over to using Grunt / Libsass. This was with the --libsass flag when you use the foundation cli to install.

i.e. grunt

Now in Foundation 6 the default option is libsass + Gulp (A different project that is similar to Grunt).

i.e. npm start (or gulp)

I would recommend moving over to the Gulp workflow unless you have a strong reason for using Ruby Compass to compile your sass.

If you had modified your config.rb file before to optimize the output of your sass or to include additional sass import directories, you can do the same thing in the gulpfile.js. The format is slightly different but you should be able to largely do the same types of things.

You commented on John Bocook's post almost 2 years

I recently created a video that might help if you are working on a windows installation.

https://www.youtube.com/watch?v=JKywQK4NPdc

Did you install git prior to node? Are you able to run it from the same directory?

You commented on Steve Valet's post almost 2 years

@Jordan Bommelje is correct. The method I usually use is to put the panel class on the column instead of nesting it within it.

You commented on Nick TC's post almost 2 years

I agree with @Knight Yoshi that sticking with Foundation 5 is a good move if you have not tested out functionality with v6.

I understand you are frustrated, but a more appropriate place to report issues that you are finding is on github issues. Here you can see if there are similar issues, there is often a discussion, potentially a workaround. The biggest thing is that it gets it in front of the right people who are fixing these things.

@Pawel if bootstrap is better for the project then go for it. Personally I have used Foundation 5 + Angular Foundation for countless projects and it is very solid.

You commented on Vitas Kanaporis's post almost 2 years

If you are using apps then you will likely need to come up with an angular based solution.

However, you might look at the action sheet module in f4a and see if that solves your problem. It is very similar to a drop down menu.

http://foundation.zurb.com/apps/docs/#!/action-sheet

You commented on Ron Wade's post almost 2 years

You need to change a variable in your _settings.scss file:

$grid-row-width Number $global-width

The maximum width of a row.

This is independent of breakpoints. Think of it as max-width being set on the row. Meaning if the viewport is wider, then it will be a specific amount. If the viewport is smaller then it will be 100% because it is less than this amount.

This is independent of the breakpoints and media queries, but you could potentially change that by overriding it in your own css. With say a different max-width on the .row for different breakpoints.

You commented on Stanislav Simovski's post almost 2 years

I might have to take another look at Sails.js. I was using it a while back experimentally but there was very poor documentation on Passport and handling user authentication.

Nice job on the integration and thank you for sharing with the community.

Posts Followed







Following

Followers