Menu icon Foundation

My Posts

No Content

My Comments

Geoff Kimball commented on donkykong's post almost 4 years

Can you post the SCSS file that imports Foundation? This behavior doesn't exist in our compiled CSS.

For an example of the "right" way to use Foundation in an entry point file, you can refer to our starter project file.

Geoff Kimball commented on Arkarys's post almost 4 years

We're working on the fix, it should be out today!

Geoff Kimball commented on Arkarys's post almost 4 years

You can write a custom helper that dynamically inserts the date for you.

If you're using the ZURB Template (which you probably are), you can create a folder under src/helpers/, and put JavaScript files inside there that are helpers.

Make a file called year.js and add this code:

module.exports = function() {
  return new Date().getFullYear();
}

Panini will load in the helper using the filename, so the helper is called #year.

Now add {{year}} in your code and you'll get the year.

Geoff Kimball commented on Glenn Philp's post almost 4 years

We defer active state management for navigation, pagination, etc. to the backend. ui-router's ui-sref-active exists because Angular is designed for single-page apps, which manage state on the client side.

If you hook your Foundation site into a backend framework like Rails, you can use that to manage active state. If you're building a static site, you might have access to a templating engine like Handlebars, which would allow you to do something similar.

Geoff Kimball commented on Glenn Philp's post almost 4 years

@Glenn Philp This approach definitely works. We do something very similar in the Foundation for Sites build process, which you can see here.

My only suggestion to make the tasks easier to group/read is to namespace them. For example, instead of naming the task bowerJS, make it javascript:bower. Then all of your JS-related tasks start with the word javascript. We also do this in the F4S build process, with groups like docs, sass, deploy, and so on.

Geoff Kimball commented on Glenn Philp's post almost 4 years

@Glenn Philp You'll want to define one array of "files that should all be combined into app.js", and then separately, "files that should be included as-is".

Geoff Kimball commented on Glenn Philp's post almost 4 years

@Glenn Philp gulp.src can be used in the middle of a stream to add new files.

Here's the existing javascript task in the ZURB template, modified. We add the new files after concat is run, which is the plugin that mashes all the files together.

gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    // gulp.src is added in the middle of the stream
    .pipe(gulp.src(ARRAY_OF_NEW_FILES))
    // The new files will pass through uglify, but not through concat
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'));
});

Geoff Kimball commented on Rodrigo Hernando's post almost 4 years

Nope, that's pretty much it! If you want to do the numbering approach, but not use all 12 numbers, I'd recommend taking a look at the source code for how grid classes are generated. Instead of going from 1 to 12, you could iterate through a list like (1, 3, 6, 9, 12) to only get a subset of the numbers.

Geoff Kimball commented on Rodrigo Hernando's post almost 4 years

You might want to consider going all the way in the direction of a fully-semantic grid. So instead of using number-based classes, write plain classes like .content and .sidebar and then apply grid styles to them.

In the following example, I have three layout pieces: a container row, and two columns, named "main content" and "sidebar". Using the grid mixins and media queries, I apply grid styles to those classes, so they imitate the behavior of the built-in .row and .column classes.

.container {
  @include grid-row;
}

.main-content {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(8);
  }
}

.sidebar {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(4);
  }
}

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

I don't think gulp-if will work with run-sequence. However, you can use Function.prototype.apply() to pass in the arguments to run-sequence. In this code sample, I'm building an array of function arguments to pass to the sequence() function. In some instances, the array will contain the 'notable' task.

// Initial task list
var tasks = ['clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide'];

// Add notable only in dev
if (!isProduction) {
  tasks.push('notable');
}

// Add done() at the end always
tasks.push(done);

// Run the function with the contents of "tasks" as the arguments
sequence.apply(this, tasks);

Posts Followed


  • 4
    Replies
  • How to use font Awesome with F4Apps

    By Euan G

    appsicons

    Hi All Since the icon fonts are limited in Foundation for Apps and since this caught me out for a bit, I thought I'd put it on here in case someone else was having the same issue: How to add fontawesome-fonts to foundation4apps 1. install using bow... (continued)

    Last Reply by G over 3 years ago









  • 7
    Replies
  • Motion-UI on Scroll?

    By Jeremy Englert

    motion-ui

    Is it possible to trigger Motion-UI animations/transitions when an element becomes visible on a page? For example, I have an element near the bottom of the page that animates, however, I don't want the animate to trigger until the element is visible. ... (continued)

    Last Reply by Kaya Tuerkay almost 4 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on donkykong's post almost 4 years

Can you post the SCSS file that imports Foundation? This behavior doesn't exist in our compiled CSS.

For an example of the "right" way to use Foundation in an entry point file, you can refer to our starter project file.

You commented on Arkarys's post almost 4 years

We're working on the fix, it should be out today!

You commented on Arkarys's post almost 4 years

You can write a custom helper that dynamically inserts the date for you.

If you're using the ZURB Template (which you probably are), you can create a folder under src/helpers/, and put JavaScript files inside there that are helpers.

Make a file called year.js and add this code:

module.exports = function() {
  return new Date().getFullYear();
}

Panini will load in the helper using the filename, so the helper is called #year.

Now add {{year}} in your code and you'll get the year.

You commented on Glenn Philp's post almost 4 years

We defer active state management for navigation, pagination, etc. to the backend. ui-router's ui-sref-active exists because Angular is designed for single-page apps, which manage state on the client side.

If you hook your Foundation site into a backend framework like Rails, you can use that to manage active state. If you're building a static site, you might have access to a templating engine like Handlebars, which would allow you to do something similar.

You commented on Glenn Philp's post almost 4 years

@Glenn Philp This approach definitely works. We do something very similar in the Foundation for Sites build process, which you can see here.

My only suggestion to make the tasks easier to group/read is to namespace them. For example, instead of naming the task bowerJS, make it javascript:bower. Then all of your JS-related tasks start with the word javascript. We also do this in the F4S build process, with groups like docs, sass, deploy, and so on.

You commented on Glenn Philp's post almost 4 years

@Glenn Philp You'll want to define one array of "files that should all be combined into app.js", and then separately, "files that should be included as-is".

You commented on Glenn Philp's post almost 4 years

@Glenn Philp gulp.src can be used in the middle of a stream to add new files.

Here's the existing javascript task in the ZURB template, modified. We add the new files after concat is run, which is the plugin that mashes all the files together.

gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    // gulp.src is added in the middle of the stream
    .pipe(gulp.src(ARRAY_OF_NEW_FILES))
    // The new files will pass through uglify, but not through concat
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'));
});

You commented on Rodrigo Hernando's post almost 4 years

Nope, that's pretty much it! If you want to do the numbering approach, but not use all 12 numbers, I'd recommend taking a look at the source code for how grid classes are generated. Instead of going from 1 to 12, you could iterate through a list like (1, 3, 6, 9, 12) to only get a subset of the numbers.

You commented on Rodrigo Hernando's post almost 4 years

You might want to consider going all the way in the direction of a fully-semantic grid. So instead of using number-based classes, write plain classes like .content and .sidebar and then apply grid styles to them.

In the following example, I have three layout pieces: a container row, and two columns, named "main content" and "sidebar". Using the grid mixins and media queries, I apply grid styles to those classes, so they imitate the behavior of the built-in .row and .column classes.

.container {
  @include grid-row;
}

.main-content {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(8);
  }
}

.sidebar {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(4);
  }
}

You commented on Hans McMurdy's post almost 4 years

I don't think gulp-if will work with run-sequence. However, you can use Function.prototype.apply() to pass in the arguments to run-sequence. In this code sample, I'm building an array of function arguments to pass to the sequence() function. In some instances, the array will contain the 'notable' task.

// Initial task list
var tasks = ['clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide'];

// Add notable only in dev
if (!isProduction) {
  tasks.push('notable');
}

// Add done() at the end always
tasks.push(done);

// Run the function with the contents of "tasks" as the arguments
sequence.apply(this, tasks);

Posts Followed

Following

  • No Content

Followers

  • No Content