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

Just use the tab-bar and or offcanvas component. Just don't add any additional visibility classes (hide / show) like the other tutorials. Note: you will still need to wrap the entirety of your page to get the same look.

That offcanvas with icons that @Rafi Benkual shared is pretty cool though :)

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

If you leave everything as is with ZURB Foundation 5 the sass outputted will be about 250k. I don't know the exact figure off hand. You can get this much smaller.

1) use compressed output in compass or grunt (this will get you down to around 150k)
2) remove unused components (varies, but can make things much smaller). Replace the @import "foundation"; blanket import with specific component ones.

Then, you should think about reducing your JavaScript is a similar way. On most sites that I build out I usually end up somewhere between 40-100k depending on the complexity.

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

I took a quick look at your site but wasn't able to take a look at your app (since it is invite only) but here is some general advice.

For your marketing site you might find Foundation for Sites to be a better fit. Why? It has been used for years to build exactly that and it has a bunch of components that make creating a marketing site a snap. Sites can basically be made to look like just about anything.

To compare that to Apps. I think you will find it more difficult to build a marketing site in Apps. The patterns are typically more suited to web apps and I would say tend to focus more on the Mobile UX. I would suggest taking a look at some of the demos to get an idea of what some of these patterns look like.

So here is the rub, with single page apps you might lose a lot of the Foundation JS Functionality. Since you are not using Angular you have a couple of choices. 1) Do a site / app audit and see which patterns / components you will need and rewrite them for Marionette / Backbone (in the case of Apps) or 2) If you are reflowing the dom, which is typical in Single Page Apps, you will need to re-instantionate Foundation after you paint your templates and the dom isn't changing. This is a bit of a hacked solution but it works. In Angular you accomplish this in the link function. I don't use Backbone or Marionette extensively but I assume there is some similar method to accomplish this. I say I assume because, it is a common use case to want to use jQuery Plugins within your app.

Hope that helps as a starting point. Feel free to DM me on twitter if you want me to take a look at your app and provide more specific advice. @JAMESSTONEco

James Stone commented on Jesse B's post about 4 years

Just to followup, the reason you have the ../ preceding the images directory is because typically, your CSS stylesheets are stored in a directory ~/css or ~/stylesheets or something like that. Your images live on that same directory, in general, ~/images. So you have to use ../ do descend one directory to be able select the images. You have to think about where are the images being loaded, from the point of view of the CSS files.

James Stone commented on Allan Langley's post about 4 years

I think if you are looking for a non-command line static site gen, CodeKit is the closest thing to that. It really isn't a static site gen, but will let you use separate files like partials (header, footer, etc.). Just as a heads up for other people looking at this post, CodeKit is commercial software and costs $32 as of the time of this posting. For windows people there is another paid product called Prepros. I have not used it, but have heard good things. CodeKit is Mac only.

If you end up wanting to build out a much more complicated site, a huge blog, logic, take markdown files and generate pages, lots of layouts, both middleman (ruby based) and assemble.io are both worth looking at. Both of these solutions are free and open source.

James Stone commented on Travis Edlefsen's post over 4 years

To answer this question I will first rephrase it into several questions:

1) How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?
2) Why would I use a server side MVC framework?

Let’s start with #1: “How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?”

There are three main ways to integrate a front-end framework like ZURB Foundation with a PHP MVC framework. These approaches also work for non-MVC based PHP sites and apps as well.

1) Use an asset-pipeline for your MVC framework to handle your JavaScript and Scss assets
2) Externalize your asset generation using a build tool such as Compass, Grunt or Gulp
3) A hybrid approach, use the asset-pipeline for things such as javascript files and a build tool such as Grunt

To better understand the first approach you must understand what an asset-pipeline is and why it is useful. From a quick search online, it appears that Laravel supports a rails like asset-pipeline so that is worth looking into. It even appears that it can build Sass/Scss files. I have not personally tested this with Foundation, but in theory it should work.

On the front-end you have two different distinct modes of development. In dev mode you want to work with pristine un minified separate JavaScript files.

This is because you want to be able to quickly debug and understand exactly which line of which file is causing issues. You want to look at the code in its original form with comments to aid in the debugging process.

In the production mode things are completely different.

You typically want a single javascript file, at the bottom of your page, loaded with the defer attribute set, minified, without comments and perhaps mangling the code. Google Closure Compiler does this for example by renaming your variable and function names to single letter equivalents, i.e. functionOne, thisLongFunction2, and someCrazyLongNameOfAVariable becomes a, b, c. This takes up less space and should load quicker.

For Sass and Scss things are a bit different, but in simple terms as you are getting started, you want to load a single css file that is minified and without comments in the <head> of your file for production. For dev you want to enabled comments (so you can see which original file your CSS is generated from) or source maps (so in chrome you can see which specific file your CSS is generated from in devtools) and to have it expanded and nested so you can clearly see hierarchy.

In short, a single-crazy-small-file that only a computer can read for production and a easy for humans to read, with comments and lots of whitespace for dev.

An asset pipeline accomplishes this by setting up patterns in which you can tell your framework to load up specific distinct files and then serve them up differently depending on wether or not you are in production mode or dev mode.

There are two main ways this is implemented.

The first way is that you use a special syntax in your JavaScript file (you should create a single JavaScript file for your project that links to others). This is how things are handled in Ruby based projects that use the Sprockets Asset Pipeline (used by RoR, Middleman and others).

For example

  //= '/path/to/my/awesome/library'

These are then picked up and interpreted depending on the mode. As an advanced thing there is the concept of precompiling your assets which just means you are not wasting time doing this on the fly every time someone hits your server.

The second way this is implemented is by having a specific file and syntax that handles which JavaScript files to import. There is literally no difference in the way that this works in the final implementation, there is just a difference in how you link to the individual files and libraries. The source ordering here is important and you may need to use a specialized PHP link tag to import your generated JavaScript or CSS.

Be sure to check your Asset Pipeline docs for details.

Our 3rd approach, the hybrid, is in my observation on of the most common ways of implementing ZURB Foundation on PHP based projects. Here typical the Asset Pipeline is used for JavaScript only and a build tool (typically grunt or gulp) is used to generate all of the CSS.

This has all the benefits of handling your dev vs. production JavaScript in an easy to use package. This runs very quick and is a well tested solution.

Generation of Scss assets into CSS is a less tested territory in the world of PHP. The article referenced above states that it is able to generate the CSS using the Asset Pipeline, but your milage may vary. There is also the SCSSPHP project that looks interesting.

The problem with generating CSS from Sass or Scss though is that it is very slow. So slow in fact that new complied c libraries such as libsass have come onto the scene to speed things up.

Unless you are doing something special, such as setting sass variables on the fly via php variables, I don’t see much of an advantage to having things compiling your scss on the fly.

Let’s circle back to part 2 of your question: Why would I use a server side MVC framework.

In my opinion there are two main reasons you want to use a MVC framework.

First, for larger projects or teams it helps to keep everything organized in a consistent way (assuming your team is following these conventions).

The second reason is one that is great for solo developers and small projects alike. Using a MVC framework such as Rails on Ruby or Laravel (or any of the other frameworks) is that is allows you to quickly scaffold and build out a site or app without having to spend a lot of time reinventing the wheel.

All of your basic CRUD (Create Read Update Delete) services are typically already taken care of and you can more or less quickly add, remove and update tables and access the data in the database without really knowing a lot about the underlying technologies. This is great because you can focus on building out your application logic rather than all the usual bits and pieces that go into making these simple calls.

So in my opinion, ZURB Foundation should work equally well with nearly all PHP MVC frameworks.

Choosing one that has a flexible and configurable asset pipeline will give you the greatest flexibility in setting things up and optimizing your dev and build states.

The question about which Framework is really more a matter of preference, your familiarity with it, the popularity and support of the project, and the amount of community and support behind it.

James Stone commented on Natalee Caipen's post over 4 years

Here is a code pen to the above example:

http://codepen.io/jamesstoneco/pen/VLmymK

James Stone commented on Natalee Caipen's post over 4 years

To use push/pull classes the best way is to do this:

1) place the content in the order you want it on mobile
2) from the medium / large viewport, adjust using push - pull classes to reorder content

note: there is a limit to how far you can push / pull, generally within the grid row on the medium/large viewports.

note: I also cleaned up your grid classes. You don't usually need to use small-12 unless you are going to have full width on every viewport. If you want large and medium to be the same, just use medium classes.

<footer class="row full-width">
  <div class="small-12 columns">
    <div class="row">
    <div class="medium-4 columns medium-push-4">
        logo here
      </div>
      <div class="medium-4 columns medium-pull-4">
        &#169; <?php echo date('Y');?>    
      </div>
      <div class="medium-4 columns">
        <nav id="site-navigation" class="footer-navigation" role="navigation">
          <!--<button class="menu-toggle" aria-controls="footer-menu" aria-expanded="false"><?php esc_html_e( 'Secondary Menu', 'diadem' ); ?></button>-->
          <?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_id' => 'footer-menu' ) ); ?>
        </nav><!-- #site-navigation -->
      </div>
    </div>
  </div>
</footer>

James Stone commented on Vincent Chan's post over 4 years

Emrah:

typically you set guides as you go, based on the elements you are using. Standard 15px bottom margin on most elements.

Vincent:

very cool of you to share this with the community. I have generated these many times myself and here are a couple of tips which might be useful to you as well, or others using your guide.

I typically double the resolution to ease the generation of retina sized assets. So instead of 1000px wide, I use 2000px.

Also, if you are going to do full width / bleed backgrounds or images, you might go a little wider to simulate a common screen width persona. You can pull this from your Google Analytics screen size data or make a best educated guess.

Again, very cool of you to share with the Foundation community and its an awesome quick way to get started designing Foundation sites in PhotoShop.

NOTE: The link by provided by Ole is a paid product at $7, just a heads up as it is not disclosed.

James Stone commented on Stuart's post over 4 years

I am not sure how the modals are being used in f4apps, but you might also take a look at the example code + directive in the Angular-Foundation project for modals. Might give you some insight into how to approach it in f4a.

http://pineconellc.github.io/angular-foundation

note: it is not a simple solution how angular-foundation handles it, but it works.

Posts Followed


  • 56
    Replies
  • PSD Grid created for Foundation

    By Vincent Chan

    PSD Grid

    Foundation PSD Gird for all. I had created a psd file that had the following setting Size: 1000px GuideGuide settings included Size: 1170px GuideGuide settings included Let me know if anyone like to have this file. And how do we share PSD in this forum?

    Last Reply by JamesJhon 10 months ago





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Kevin Neal's post almost 4 years

Just use the tab-bar and or offcanvas component. Just don't add any additional visibility classes (hide / show) like the other tutorials. Note: you will still need to wrap the entirety of your page to get the same look.

That offcanvas with icons that @Rafi Benkual shared is pretty cool though :)

You commented on Jay Dcoder's post almost 4 years

If you leave everything as is with ZURB Foundation 5 the sass outputted will be about 250k. I don't know the exact figure off hand. You can get this much smaller.

1) use compressed output in compass or grunt (this will get you down to around 150k)
2) remove unused components (varies, but can make things much smaller). Replace the @import "foundation"; blanket import with specific component ones.

Then, you should think about reducing your JavaScript is a similar way. On most sites that I build out I usually end up somewhere between 40-100k depending on the complexity.

You commented on Jay Cano's post almost 4 years

I took a quick look at your site but wasn't able to take a look at your app (since it is invite only) but here is some general advice.

For your marketing site you might find Foundation for Sites to be a better fit. Why? It has been used for years to build exactly that and it has a bunch of components that make creating a marketing site a snap. Sites can basically be made to look like just about anything.

To compare that to Apps. I think you will find it more difficult to build a marketing site in Apps. The patterns are typically more suited to web apps and I would say tend to focus more on the Mobile UX. I would suggest taking a look at some of the demos to get an idea of what some of these patterns look like.

So here is the rub, with single page apps you might lose a lot of the Foundation JS Functionality. Since you are not using Angular you have a couple of choices. 1) Do a site / app audit and see which patterns / components you will need and rewrite them for Marionette / Backbone (in the case of Apps) or 2) If you are reflowing the dom, which is typical in Single Page Apps, you will need to re-instantionate Foundation after you paint your templates and the dom isn't changing. This is a bit of a hacked solution but it works. In Angular you accomplish this in the link function. I don't use Backbone or Marionette extensively but I assume there is some similar method to accomplish this. I say I assume because, it is a common use case to want to use jQuery Plugins within your app.

Hope that helps as a starting point. Feel free to DM me on twitter if you want me to take a look at your app and provide more specific advice. @JAMESSTONEco

You commented on Jesse B's post about 4 years

Just to followup, the reason you have the ../ preceding the images directory is because typically, your CSS stylesheets are stored in a directory ~/css or ~/stylesheets or something like that. Your images live on that same directory, in general, ~/images. So you have to use ../ do descend one directory to be able select the images. You have to think about where are the images being loaded, from the point of view of the CSS files.

You commented on Allan Langley's post about 4 years

I think if you are looking for a non-command line static site gen, CodeKit is the closest thing to that. It really isn't a static site gen, but will let you use separate files like partials (header, footer, etc.). Just as a heads up for other people looking at this post, CodeKit is commercial software and costs $32 as of the time of this posting. For windows people there is another paid product called Prepros. I have not used it, but have heard good things. CodeKit is Mac only.

If you end up wanting to build out a much more complicated site, a huge blog, logic, take markdown files and generate pages, lots of layouts, both middleman (ruby based) and assemble.io are both worth looking at. Both of these solutions are free and open source.

You commented on Travis Edlefsen's post over 4 years

To answer this question I will first rephrase it into several questions:

1) How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?
2) Why would I use a server side MVC framework?

Let’s start with #1: “How can I best integrate ZURB Foundation with a PHP based MVC Framework like Laravel?”

There are three main ways to integrate a front-end framework like ZURB Foundation with a PHP MVC framework. These approaches also work for non-MVC based PHP sites and apps as well.

1) Use an asset-pipeline for your MVC framework to handle your JavaScript and Scss assets
2) Externalize your asset generation using a build tool such as Compass, Grunt or Gulp
3) A hybrid approach, use the asset-pipeline for things such as javascript files and a build tool such as Grunt

To better understand the first approach you must understand what an asset-pipeline is and why it is useful. From a quick search online, it appears that Laravel supports a rails like asset-pipeline so that is worth looking into. It even appears that it can build Sass/Scss files. I have not personally tested this with Foundation, but in theory it should work.

On the front-end you have two different distinct modes of development. In dev mode you want to work with pristine un minified separate JavaScript files.

This is because you want to be able to quickly debug and understand exactly which line of which file is causing issues. You want to look at the code in its original form with comments to aid in the debugging process.

In the production mode things are completely different.

You typically want a single javascript file, at the bottom of your page, loaded with the defer attribute set, minified, without comments and perhaps mangling the code. Google Closure Compiler does this for example by renaming your variable and function names to single letter equivalents, i.e. functionOne, thisLongFunction2, and someCrazyLongNameOfAVariable becomes a, b, c. This takes up less space and should load quicker.

For Sass and Scss things are a bit different, but in simple terms as you are getting started, you want to load a single css file that is minified and without comments in the <head> of your file for production. For dev you want to enabled comments (so you can see which original file your CSS is generated from) or source maps (so in chrome you can see which specific file your CSS is generated from in devtools) and to have it expanded and nested so you can clearly see hierarchy.

In short, a single-crazy-small-file that only a computer can read for production and a easy for humans to read, with comments and lots of whitespace for dev.

An asset pipeline accomplishes this by setting up patterns in which you can tell your framework to load up specific distinct files and then serve them up differently depending on wether or not you are in production mode or dev mode.

There are two main ways this is implemented.

The first way is that you use a special syntax in your JavaScript file (you should create a single JavaScript file for your project that links to others). This is how things are handled in Ruby based projects that use the Sprockets Asset Pipeline (used by RoR, Middleman and others).

For example

  //= '/path/to/my/awesome/library'

These are then picked up and interpreted depending on the mode. As an advanced thing there is the concept of precompiling your assets which just means you are not wasting time doing this on the fly every time someone hits your server.

The second way this is implemented is by having a specific file and syntax that handles which JavaScript files to import. There is literally no difference in the way that this works in the final implementation, there is just a difference in how you link to the individual files and libraries. The source ordering here is important and you may need to use a specialized PHP link tag to import your generated JavaScript or CSS.

Be sure to check your Asset Pipeline docs for details.

Our 3rd approach, the hybrid, is in my observation on of the most common ways of implementing ZURB Foundation on PHP based projects. Here typical the Asset Pipeline is used for JavaScript only and a build tool (typically grunt or gulp) is used to generate all of the CSS.

This has all the benefits of handling your dev vs. production JavaScript in an easy to use package. This runs very quick and is a well tested solution.

Generation of Scss assets into CSS is a less tested territory in the world of PHP. The article referenced above states that it is able to generate the CSS using the Asset Pipeline, but your milage may vary. There is also the SCSSPHP project that looks interesting.

The problem with generating CSS from Sass or Scss though is that it is very slow. So slow in fact that new complied c libraries such as libsass have come onto the scene to speed things up.

Unless you are doing something special, such as setting sass variables on the fly via php variables, I don’t see much of an advantage to having things compiling your scss on the fly.

Let’s circle back to part 2 of your question: Why would I use a server side MVC framework.

In my opinion there are two main reasons you want to use a MVC framework.

First, for larger projects or teams it helps to keep everything organized in a consistent way (assuming your team is following these conventions).

The second reason is one that is great for solo developers and small projects alike. Using a MVC framework such as Rails on Ruby or Laravel (or any of the other frameworks) is that is allows you to quickly scaffold and build out a site or app without having to spend a lot of time reinventing the wheel.

All of your basic CRUD (Create Read Update Delete) services are typically already taken care of and you can more or less quickly add, remove and update tables and access the data in the database without really knowing a lot about the underlying technologies. This is great because you can focus on building out your application logic rather than all the usual bits and pieces that go into making these simple calls.

So in my opinion, ZURB Foundation should work equally well with nearly all PHP MVC frameworks.

Choosing one that has a flexible and configurable asset pipeline will give you the greatest flexibility in setting things up and optimizing your dev and build states.

The question about which Framework is really more a matter of preference, your familiarity with it, the popularity and support of the project, and the amount of community and support behind it.

You commented on Natalee Caipen's post over 4 years

Here is a code pen to the above example:

http://codepen.io/jamesstoneco/pen/VLmymK

You commented on Natalee Caipen's post over 4 years

To use push/pull classes the best way is to do this:

1) place the content in the order you want it on mobile
2) from the medium / large viewport, adjust using push - pull classes to reorder content

note: there is a limit to how far you can push / pull, generally within the grid row on the medium/large viewports.

note: I also cleaned up your grid classes. You don't usually need to use small-12 unless you are going to have full width on every viewport. If you want large and medium to be the same, just use medium classes.

<footer class="row full-width">
  <div class="small-12 columns">
    <div class="row">
    <div class="medium-4 columns medium-push-4">
        logo here
      </div>
      <div class="medium-4 columns medium-pull-4">
        &#169; <?php echo date('Y');?>    
      </div>
      <div class="medium-4 columns">
        <nav id="site-navigation" class="footer-navigation" role="navigation">
          <!--<button class="menu-toggle" aria-controls="footer-menu" aria-expanded="false"><?php esc_html_e( 'Secondary Menu', 'diadem' ); ?></button>-->
          <?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_id' => 'footer-menu' ) ); ?>
        </nav><!-- #site-navigation -->
      </div>
    </div>
  </div>
</footer>

You commented on Vincent Chan's post over 4 years

Emrah:

typically you set guides as you go, based on the elements you are using. Standard 15px bottom margin on most elements.

Vincent:

very cool of you to share this with the community. I have generated these many times myself and here are a couple of tips which might be useful to you as well, or others using your guide.

I typically double the resolution to ease the generation of retina sized assets. So instead of 1000px wide, I use 2000px.

Also, if you are going to do full width / bleed backgrounds or images, you might go a little wider to simulate a common screen width persona. You can pull this from your Google Analytics screen size data or make a best educated guess.

Again, very cool of you to share with the Foundation community and its an awesome quick way to get started designing Foundation sites in PhotoShop.

NOTE: The link by provided by Ole is a paid product at $7, just a heads up as it is not disclosed.

You commented on Stuart's post over 4 years

I am not sure how the modals are being used in f4apps, but you might also take a look at the example code + directive in the Angular-Foundation project for modals. Might give you some insight into how to approach it in f4a.

http://pineconellc.github.io/angular-foundation

note: it is not a simple solution how angular-foundation handles it, but it works.

Posts Followed

Following

  • No Content

Followers

  • No Content