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 Paper9oll's post almost 4 years

There are always changes like this that break your workflow a bit with a new version. Although I also am stuck re-memorizing some new class names and structures for the sass mixins, I am confident it is for the better. I have used Foundation since version 3 and there are always some changes like what you are describing. Each feature added some great functionality and today we are leaps and bounds ahead of foundation 3.

As for buttons you can easily just add the border-radius to you css or if you use it alot, why not just write your own mixin that wraps foundations button mixin. That is what I would do if I used it a lot.

@mixin rad-button($expand, $background, $background-hover, $color, $style, $radius) {
  @include button($expand, $background, $background-hover, $color, $style);
  border-radius: $radius;
}

James Stone commented on Stéphane Richin's post almost 4 years

This is not possible the way you are trying to change the global sass variables.

The way to accomplish this is to use the breakpoints mixin and apply the grid mixin classes directly to your classes. Otherwise these settings are global.

Since 12 is divisible by 4, you are not gaining much by taking the time to do so. Just multiply your small columns by 3 and you will have a similar result.

James Stone commented on sten's post almost 4 years

Here are the advantages of f4a:

  1. Angular Directives (although there is angular-foundation as a 3rd party add on for sites)
  2. Mobile App style modules
  3. Vertical Flexbox Grid Abstraction (You can still accomplish this with CSS)
  4. A different set of modules aimed towards Apps and Mobile Web Apps
  5. Other small things like a tool that takes YML and builds your ui-router routes automatically

The biggest thing when using angular, if you use a jquery based framework or plugin, often your bindings break when you reflow the dom. That means whenever your template changes at all, you need to reinstantionate foundation. This is typically handled in the link function. This is a a bit of a hack IMO.

Better solutions are f4a and angular-foundation because they have rewritten the js modules as angular directives. This assumes that you are going to actually use some of the js based modules in your project.

If you are not going to use any of the js modules (any many of them are trivial to (re)create in angular) then you can just use the generated sass / css from either project. Just depends on the look you are going for and which solves the majority of your problems and allows you to quickly build your project out.

James Stone commented on Serguei Cambour's post almost 4 years

Try wrapping it in a centered column

.row>.medium-8.columns.medium-centered

Or you can add left and right margin to the table element in a medium-up media query.

-James

James Stone commented on Alex's post almost 4 years

You might take a look at the gulp file and see what is going on. F4A has 4 main components:

1) javascript via bower (angular, ui-router, f4a, etc)
2) your local app javascript
3) sass / scss files, compiled into a single css file
4) your angular templates (for ui-router)

You could add these to a new project or use the f4a gulp project as the basis for another project. Just depends on how much of the f4a gulp workflow you want to keep.

I would recommend reading up on ui-router since f4a is largely dependent on it. I highly recommend the official docs and perhaps taking a look at the egghead.io videos on this topic. Egghead is also a great resource for angular in general and might offer you some great starting points in developing front-end patterns and interaction.

I can't speak to php or specific frameworks. Angular should be agnostic. You can easily use it with any restful API.

Angularfire and Firebase might be a good way to prototype and get started. It also provides basic and oauth authentication that works with Angular without too much effort. Oauth is easier to implement, basic requires you to handle a bunch of the interaction directly in JavaScript.

This way you could get started, test out your idea and research and figure out how to reimplement the backend in php if you want at your convenience.

James Stone commented on Knight Yoshi's post almost 4 years

If you are using the compass mixins to create prefixed css then there is not really an advantage over autoprefixer. Autoprefixer accomplishes the same thing and automatically adds prefixes. Depending on your use case, you might want to go back farther than 2 browsers. The same thing applies to the library Bourbon by ThoughtBot that is very similar to the Compass mixins for prefixing css.

James Stone commented on Serguei Cambour's post almost 4 years

If you place your table within the grid it will be the full width of the column or 100%. You could then set different grid settings depending on the breakpoint (small, medium, large, etc.).

If you are looking to do something more radical you will have to write your own CSS and use media queries or the new sass breakpoint mixin in foundation for sites 6.

James Stone commented on sten's post almost 4 years

I answered a similar question on the forum last week:

http://foundation.zurb.com/forum/posts/36069-what-should-i-use-sites-or-apps

James Stone commented on Joshua Smith's post almost 4 years

When f4a was released I was experimenting a bit and posted a public repo with a branch using angular fire. You might also want to check out the fire branch. Hope that helps in trying to get a firebase + f4a app up and running fast.

https://github.com/jamesstoneco/foundation-for-apps-live-reload/tree/firechat

Be sure to take a look at my bower, gulp, javascript and template files for the specifics.

James Stone commented on Jay Dcoder's post almost 4 years

if you are concerned about your site speed and the size of the files being downloaded, you should only look at files referenced in your html files.

Typically this is stylesheets/app.css <-- generated by the scss files, but you should only count the size of this file.
All loaded JavaScript files.

Nothing else should be loaded. You will also need to consider any 3rd party javascript, css etc. that might be loaded through iframes or async.

Typically you want to create a build script or use something that has an asset pipeline. All of your JavaScript files should be ideally concatenated (added together) into one single file. Then it should be minified. If you change your settings on app.css in config.rb or in Gruntfile.js you will get the same for CSS for free.

Often using a tool like tools.pingdom.com is a good way to look at the actual file sizes of your site or app. It will show you all the files that are being loaded and how large they are.

Posts Followed








  • 5
    Replies
  • Hero Image using local images

    By Jesse B

    heroimagelocal

    Hey guys, I just started designing my webpage for the first time, so I'm a complete noob. I wanted to add this one to my page: http://zurb.com/building-blocks/hero-image-with-text-and-image. So far so good, it got it working. Now I want to replac... (continued)

    Last Reply by James Stone almost 4 years ago



  • 4
    Replies
  • MVC for Zurb Foundation

    By Travis Edlefsen

    laravelPHPCMV

    So being new to the game, what are recommended MVC's that can integrate Foundation easily. I know a lot of people use Ruby on Rails, but my other work uses PHP. I would like to use Laravel, but I am not sure how easy it is for Foundation to roll into Lara... (continued)

    Last Reply by Jason Roy almost 2 years ago


Following

Followers

My Posts

No Content

My Comments

You commented on Paper9oll's post almost 4 years

There are always changes like this that break your workflow a bit with a new version. Although I also am stuck re-memorizing some new class names and structures for the sass mixins, I am confident it is for the better. I have used Foundation since version 3 and there are always some changes like what you are describing. Each feature added some great functionality and today we are leaps and bounds ahead of foundation 3.

As for buttons you can easily just add the border-radius to you css or if you use it alot, why not just write your own mixin that wraps foundations button mixin. That is what I would do if I used it a lot.

@mixin rad-button($expand, $background, $background-hover, $color, $style, $radius) {
  @include button($expand, $background, $background-hover, $color, $style);
  border-radius: $radius;
}

You commented on Stéphane Richin's post almost 4 years

This is not possible the way you are trying to change the global sass variables.

The way to accomplish this is to use the breakpoints mixin and apply the grid mixin classes directly to your classes. Otherwise these settings are global.

Since 12 is divisible by 4, you are not gaining much by taking the time to do so. Just multiply your small columns by 3 and you will have a similar result.

You commented on sten's post almost 4 years

Here are the advantages of f4a:

  1. Angular Directives (although there is angular-foundation as a 3rd party add on for sites)
  2. Mobile App style modules
  3. Vertical Flexbox Grid Abstraction (You can still accomplish this with CSS)
  4. A different set of modules aimed towards Apps and Mobile Web Apps
  5. Other small things like a tool that takes YML and builds your ui-router routes automatically

The biggest thing when using angular, if you use a jquery based framework or plugin, often your bindings break when you reflow the dom. That means whenever your template changes at all, you need to reinstantionate foundation. This is typically handled in the link function. This is a a bit of a hack IMO.

Better solutions are f4a and angular-foundation because they have rewritten the js modules as angular directives. This assumes that you are going to actually use some of the js based modules in your project.

If you are not going to use any of the js modules (any many of them are trivial to (re)create in angular) then you can just use the generated sass / css from either project. Just depends on the look you are going for and which solves the majority of your problems and allows you to quickly build your project out.

You commented on Serguei Cambour's post almost 4 years

Try wrapping it in a centered column

.row>.medium-8.columns.medium-centered

Or you can add left and right margin to the table element in a medium-up media query.

-James

You commented on Alex's post almost 4 years

You might take a look at the gulp file and see what is going on. F4A has 4 main components:

1) javascript via bower (angular, ui-router, f4a, etc)
2) your local app javascript
3) sass / scss files, compiled into a single css file
4) your angular templates (for ui-router)

You could add these to a new project or use the f4a gulp project as the basis for another project. Just depends on how much of the f4a gulp workflow you want to keep.

I would recommend reading up on ui-router since f4a is largely dependent on it. I highly recommend the official docs and perhaps taking a look at the egghead.io videos on this topic. Egghead is also a great resource for angular in general and might offer you some great starting points in developing front-end patterns and interaction.

I can't speak to php or specific frameworks. Angular should be agnostic. You can easily use it with any restful API.

Angularfire and Firebase might be a good way to prototype and get started. It also provides basic and oauth authentication that works with Angular without too much effort. Oauth is easier to implement, basic requires you to handle a bunch of the interaction directly in JavaScript.

This way you could get started, test out your idea and research and figure out how to reimplement the backend in php if you want at your convenience.

You commented on Knight Yoshi's post almost 4 years

If you are using the compass mixins to create prefixed css then there is not really an advantage over autoprefixer. Autoprefixer accomplishes the same thing and automatically adds prefixes. Depending on your use case, you might want to go back farther than 2 browsers. The same thing applies to the library Bourbon by ThoughtBot that is very similar to the Compass mixins for prefixing css.

You commented on Serguei Cambour's post almost 4 years

If you place your table within the grid it will be the full width of the column or 100%. You could then set different grid settings depending on the breakpoint (small, medium, large, etc.).

If you are looking to do something more radical you will have to write your own CSS and use media queries or the new sass breakpoint mixin in foundation for sites 6.

You commented on sten's post almost 4 years

I answered a similar question on the forum last week:

http://foundation.zurb.com/forum/posts/36069-what-should-i-use-sites-or-apps

You commented on Joshua Smith's post almost 4 years

When f4a was released I was experimenting a bit and posted a public repo with a branch using angular fire. You might also want to check out the fire branch. Hope that helps in trying to get a firebase + f4a app up and running fast.

https://github.com/jamesstoneco/foundation-for-apps-live-reload/tree/firechat

Be sure to take a look at my bower, gulp, javascript and template files for the specifics.

You commented on Jay Dcoder's post almost 4 years

if you are concerned about your site speed and the size of the files being downloaded, you should only look at files referenced in your html files.

Typically this is stylesheets/app.css <-- generated by the scss files, but you should only count the size of this file.
All loaded JavaScript files.

Nothing else should be loaded. You will also need to consider any 3rd party javascript, css etc. that might be loaded through iframes or async.

Typically you want to create a build script or use something that has an asset pipeline. All of your JavaScript files should be ideally concatenated (added together) into one single file. Then it should be minified. If you change your settings on app.css in config.rb or in Gruntfile.js you will get the same for CSS for free.

Often using a tool like tools.pingdom.com is a good way to look at the actual file sizes of your site or app. It will show you all the files that are being loaded and how large they are.

Posts Followed

Following

Followers