Menu icon Foundation

My Posts

No Content

My Comments

Geoff Kimball commented on Lefthandmedia's post almost 4 years

To answer your questions:

  • Never change anything in bower_components (or node_modules, which is where the template's development dependencies are stored). This is because, when you upgrade Foundation, jQuery, etc., the package manager is going to overwrite all of those files to update them to newer versions.
  • To disable a component's default CSS, comment out the corresponding @include in app.scss. The framework is designed to be imported at all once, but just importing it doesn't print any CSS—you only get the guts of the framework.
  • Your settings file is the right place to change settings. The file you see in scss/settings/_settings.scss is actually not used by the framework. We just keep it there so our other build tools (like the custom download creator) can use it.

The framework does try to assign values to the variables after you've already changed them in _settings.scss. But note that, in the framework code, there's a flag called !default. What that does is say, "only change this value if it hasn't already been set earlier." Since you're setting it earlier in _settings.scss, it won't get overridden.

Geoff Kimball commented on Kevin Kershaw's post almost 4 years

There are sort of two ways you have to think about the grid. There's the top-level where you're creating the broad structure of your app. Fixed headers, sidebars, and so on.

  • Use .grid-frame once at the top level to house everything.
  • Use .grid-content for scrolling sections of content.
  • Use .grid-block instead of .grid-content to nest multiple items together.

Unlike the F5 grid, where you alternate row and column, with the Apps grid, you can nest multiple blocks in a row, depending on how deep you need to nest. The last element is always going to be .grid-content (which we call a "content block" versus a "block").

So that's the top-level of the layout. Within scrolling sections (.grid-content), these same classes behave more like the Foundation for Sites grid.

  • Use .grid-block for rows.
  • Use .grid-content for columns.

In this mode, you do need to alternate row and column, because nested rows need to invert their margins so everything lines up.

If this seems confusing, it's because it is ;) After a year of using Apps on various projects, we've found a need for two separate grid concepts, with different classes. In the future I think the "inner" grid will just be .row and .column, instead of us trying to use the same classes for different use cases.

Geoff Kimball commented on Simone Marcutti's post almost 4 years

Modern mobile browsers have hooks built-in to remove the tap delay, making the plugin less necessary as time goes on.

The cookie library was only used for Joyride, and the next version of Joyride (which should land in the framework before the end of the year) will use Local Storage instead of cookies.

We wanted to have fewer dependencies in Foundation 6 than in 5. F5 has five dependencies, while F6 only has two, and one of them (what-input) isn't a hard requirement.

Geoff Kimball commented on Eli Lev's post almost 4 years

@Mohammad Mostafa Shahreki Thanks for posting that!

@Eli Lev We're looking into it, and can probably have it resolved in the next week.

Geoff Kimball commented on Hans McMurdy's post almost 4 years

There's two things you'll want to change here:

First, the name of the destination folder. You can change dist to a variable that changes depending on if you're in production or not.

var distFolder = isProduction ? 'prod-dist' : 'dist';

The first string is the production folder, and the second string is the destination folder.

Second, you want to change how files are copied so that they are always a flat structure. You can use the gulp-flatten plugin to strip the folder structure out of a stream of files, so that every file ends up in the exact same place.

Here's what the pages task would look like with the flatten plugin loaded:

gulp.task('pages', function() {
  gulp.src('./src/pages/**/*.html')
    .pipe(panini({
      layouts: './src/layouts/',
      partials: './src/partials/**/*.html',
      data: './src/data/**/*.{json,yml}'
    }))
    .pipe($.flatten())
    .pipe(gulp.dest('../dist'));
});

Geoff Kimball commented on Paul Terry's post almost 4 years

We fixed this issue in Foundation 6.0.4, which was released last week. Try upgrading your project and see if it works.

Geoff Kimball commented on Euan G's post almost 4 years

Awesome, thanks for the tip! We've had folks ask us about this here and there, so this would be useful to point people to.

Geoff Kimball commented on Yucel's post almost 4 years

This is an intentional change from 5 to 6 to avoid Sass errors that users frequently ran into with the settings file. Here's an explanation of what the change does.

Geoff Kimball commented on Zacharie Roy's post almost 4 years

If you want it to fade in instantly, you can write a fade animation. This SCSS and HTML will make the button fade in once, on page load.

@import 'motion-ui';

.animate-fade {
  @include mui-animation(fade);
}
<button type="button" class="button animate-fade">Fade</button>

Geoff Kimball commented on L Andringa's post almost 4 years

Verify that all of your packages are installed by running npm install. If that doesn't work, try installing Gulp itself manually: npm install gulp --save-dev

Posts Followed









  • 23
    Replies
  • NPM warn error

    By Des

    helpNewbie. Foundation

    Hi, I am completely new to this. Could someone please point me in the right direction? I have tried following the following instructions. http://foundation.zurb.com/apps/docs/#!/installation . However I get the following error. npm warn deprecated exec... (continued)

    Last Reply by Geoff Kimball almost 4 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Lefthandmedia's post almost 4 years

To answer your questions:

  • Never change anything in bower_components (or node_modules, which is where the template's development dependencies are stored). This is because, when you upgrade Foundation, jQuery, etc., the package manager is going to overwrite all of those files to update them to newer versions.
  • To disable a component's default CSS, comment out the corresponding @include in app.scss. The framework is designed to be imported at all once, but just importing it doesn't print any CSS—you only get the guts of the framework.
  • Your settings file is the right place to change settings. The file you see in scss/settings/_settings.scss is actually not used by the framework. We just keep it there so our other build tools (like the custom download creator) can use it.

The framework does try to assign values to the variables after you've already changed them in _settings.scss. But note that, in the framework code, there's a flag called !default. What that does is say, "only change this value if it hasn't already been set earlier." Since you're setting it earlier in _settings.scss, it won't get overridden.

You commented on Kevin Kershaw's post almost 4 years

There are sort of two ways you have to think about the grid. There's the top-level where you're creating the broad structure of your app. Fixed headers, sidebars, and so on.

  • Use .grid-frame once at the top level to house everything.
  • Use .grid-content for scrolling sections of content.
  • Use .grid-block instead of .grid-content to nest multiple items together.

Unlike the F5 grid, where you alternate row and column, with the Apps grid, you can nest multiple blocks in a row, depending on how deep you need to nest. The last element is always going to be .grid-content (which we call a "content block" versus a "block").

So that's the top-level of the layout. Within scrolling sections (.grid-content), these same classes behave more like the Foundation for Sites grid.

  • Use .grid-block for rows.
  • Use .grid-content for columns.

In this mode, you do need to alternate row and column, because nested rows need to invert their margins so everything lines up.

If this seems confusing, it's because it is ;) After a year of using Apps on various projects, we've found a need for two separate grid concepts, with different classes. In the future I think the "inner" grid will just be .row and .column, instead of us trying to use the same classes for different use cases.

You commented on Simone Marcutti's post almost 4 years

Modern mobile browsers have hooks built-in to remove the tap delay, making the plugin less necessary as time goes on.

The cookie library was only used for Joyride, and the next version of Joyride (which should land in the framework before the end of the year) will use Local Storage instead of cookies.

We wanted to have fewer dependencies in Foundation 6 than in 5. F5 has five dependencies, while F6 only has two, and one of them (what-input) isn't a hard requirement.

You commented on Eli Lev's post almost 4 years

@Mohammad Mostafa Shahreki Thanks for posting that!

@Eli Lev We're looking into it, and can probably have it resolved in the next week.

You commented on Hans McMurdy's post almost 4 years

There's two things you'll want to change here:

First, the name of the destination folder. You can change dist to a variable that changes depending on if you're in production or not.

var distFolder = isProduction ? 'prod-dist' : 'dist';

The first string is the production folder, and the second string is the destination folder.

Second, you want to change how files are copied so that they are always a flat structure. You can use the gulp-flatten plugin to strip the folder structure out of a stream of files, so that every file ends up in the exact same place.

Here's what the pages task would look like with the flatten plugin loaded:

gulp.task('pages', function() {
  gulp.src('./src/pages/**/*.html')
    .pipe(panini({
      layouts: './src/layouts/',
      partials: './src/partials/**/*.html',
      data: './src/data/**/*.{json,yml}'
    }))
    .pipe($.flatten())
    .pipe(gulp.dest('../dist'));
});

You commented on Paul Terry's post almost 4 years

We fixed this issue in Foundation 6.0.4, which was released last week. Try upgrading your project and see if it works.

You commented on Euan G's post almost 4 years

Awesome, thanks for the tip! We've had folks ask us about this here and there, so this would be useful to point people to.

You commented on Yucel's post almost 4 years

This is an intentional change from 5 to 6 to avoid Sass errors that users frequently ran into with the settings file. Here's an explanation of what the change does.

You commented on Zacharie Roy's post almost 4 years

If you want it to fade in instantly, you can write a fade animation. This SCSS and HTML will make the button fade in once, on page load.

@import 'motion-ui';

.animate-fade {
  @include mui-animation(fade);
}
<button type="button" class="button animate-fade">Fade</button>

You commented on L Andringa's post almost 4 years

Verify that all of your packages are installed by running npm install. If that doesn't work, try installing Gulp itself manually: npm install gulp --save-dev

Posts Followed

Following

  • No Content

Followers

  • No Content