Menu icon Foundation

My Posts


  • 2
    Replies
  • What IDE do Zurb developers use?

    By Tom Belknap

    ide

    I've been watching a lot of the video tutorials. In many videos, I see you guys type out a CSS declaration, "off-canvas.position-left" and it magically transforms into a full HTML element with the classes assigned. What are you guys using that does that? ... (continued)

    Last Reply by Ralph Bolliger 13 days ago


  • NEW
  • F6 Compass replacements?

    By Tom Belknap

    compass

    I'm fully onboard with Foundation 6 and really loving what it has to offer (well, minus this irritating bug). But it seems like, in abandoning Compass, Foundation has lost a lot of it's helpful mixins that made life easier writing SASS. I don't need a co... (continued)




  • 2
    Replies
  • Compass in F6

    By Tom Belknap

    compass

    I have a couple general questions that almost certainly seem silly to those of you more experienced with the tools that make Foundation work. But I'll ask anyway, because I doubt I'm the only PHP developer that's a bit lost.. 1. Do we necessarily need ... (continued)

    Last Reply by Tom Belknap over 1 year ago



  • 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
  • foundation upgrade

    By Tom Belknap

    5.3upgrade

    So, I ran foundation upgrade and it asked me whether I wanted to upgrade to 5.0.2 or 5.3.0. I tried upgrading to 5.3 to see what it was all about and my site has not been the same since. Specifically, the top-bar no longer works and the "hamburger" is out... (continued)

    Last Reply by Tom Belknap about 3 years ago



My Comments

Tom Belknap commented on Tom Belknap's post 2 days

Bump.
Anybody? Anybody? Bueller? Bueller?

Tom Belknap commented on Dennis's post 12 days

I have a related issue. What my client wants is for the top of the drilldown menu to show what level you're on. Thus:
one
two->
   Aye
   Bee
   See
three
If you click on level two, the menu should now read:
two
Aye
Bee
See
 
Would this be possible? I'm sure I can probably swap out with JS, but an organic solution would be ideal.

Tom Belknap commented on Tom Belknap's post over 1 year

Thanks for the attempts, Rafi. But this appears to be a consistent problem with Foundation 6:
http://foundation.zurb.com/forum/posts/37692-foundation-6-gulp-deletes-css-file-when-compiling-scss
 

Tom Belknap commented on Kendall Roth's post over 1 year

I originally thought I had a problem with my gulpfile.js because I'd made so many changes. But nope. Looks like this is a common issue.
My experience today has been that if I make a trivial change like adding a few carriage returns - just for the sake of making the CLI recompile the Sass - most of the time, everything goes back to normal. But this makes for a pretty ungainly development process.
http://foundation.zurb.com/forum/posts/38992-sass-defaulting-to-original-with-custom-gulpfilejs

Tom Belknap commented on Tom Belknap's post over 1 year

On further inspection, there just seems to be something profoundly flakey about the way the Sass compiler is working. Make a change, it defauts. Add a few spaces at the bottom of the Sass file (or take some away) and resave, it's back in action.
 

Tom Belknap commented on Tom Belknap's post over 1 year

Ok,

Where in the documentation does it say anything about a "components directory?"
There is no components directory
If I create a brand new Foundation project for Sites, I see no such entries in that gulpfile.
What would the above code, when added to the gulpfile.js, solve about my current issue?

 

Tom Belknap commented on Tom Belknap's post over 1 year

Well no, actually. What seems to be happening:

Run foundation
Styles are now being honored
Make a change to the app.scss file
Styles are now NOT being honored
Shut down foundation
Restart foundation
Styles are once again being honored.

And when I say "styles," that's actually a limited subset as well. The padding I'm trying to introduce is not being honored. Only the fact that Foundation is loading the flexbox classes and using the _settings.scss files correctly.
Here is the result when things are working:

 
Here's when it's not:

Tom Belknap commented on Tom Belknap's post over 1 year

... and now it's back. Didn't change a thing, just started and stopped Foundation. What??

Tom Belknap commented on Tom Belknap's post over 1 year

Ok. Additional details - though I do not understand a thing about them:
For reasons I cannot explain, the SCSS files suddenly got compiled correctly right after typing up this post. Then I added the following to the app.scss file and it went right back where it was:
div.hero-well {
background-image: url(/wp-content/uploads/sites/67/2016/03/hero.png);
background-size: cover;
background-position: center;
padding: 0 50px; <-- NEW
}
My markup looks like this:
<?php /* Hero */ ?>
<div class="row align-center hero-well">
<div class="columns large-8">
<?php echo wp_get_attachment_image( 32, 'full' ); ?>
</div>
</div>
What is going on??

Tom Belknap commented on Rafi Benkual's post over 1 year

I'll say this: one advantage of using Gulp for the new iteration of Foundation means you can be a lot more flexible and independent with where you place the application-specific files for a Foundation project. I'm using the following structure for a Wordpress theme based on ZF:

root
-- /inc
-- -- /scss
-- /vendor
-- -- /foundation

My gulpfile looks like this:

 var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src',
  '../../lib/scss'
];

gulp.task('sass', function() {
  return gulp.src('../../lib/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../../inc/css'));
});

gulp.task('javascript', function() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel()) // <-- There it is!
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'))
    .on('finish', browser.reload);
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss', '../../lib/scss/*.scss'], ['sass']);
});

Posts Followed




  • 3
    Replies
  • foundation upgrade

    By Tom Belknap

    5.3upgrade

    So, I ran foundation upgrade and it asked me whether I wanted to upgrade to 5.0.2 or 5.3.0. I tried upgrading to 5.3 to see what it was all about and my site has not been the same since. Specifically, the top-bar no longer works and the "hamburger" is out... (continued)

    Last Reply by Tom Belknap about 3 years ago



Following

    No Content

Followers

My Posts









My Comments

You commented on Tom Belknap's post 2 days

Bump.
Anybody? Anybody? Bueller? Bueller?

You commented on Dennis's post 12 days

I have a related issue. What my client wants is for the top of the drilldown menu to show what level you're on. Thus:
one
two->
   Aye
   Bee
   See
three
If you click on level two, the menu should now read:
two
Aye
Bee
See
 
Would this be possible? I'm sure I can probably swap out with JS, but an organic solution would be ideal.

You commented on Tom Belknap's post over 1 year

Thanks for the attempts, Rafi. But this appears to be a consistent problem with Foundation 6:
http://foundation.zurb.com/forum/posts/37692-foundation-6-gulp-deletes-css-file-when-compiling-scss
 

You commented on Kendall Roth's post over 1 year

I originally thought I had a problem with my gulpfile.js because I'd made so many changes. But nope. Looks like this is a common issue.
My experience today has been that if I make a trivial change like adding a few carriage returns - just for the sake of making the CLI recompile the Sass - most of the time, everything goes back to normal. But this makes for a pretty ungainly development process.
http://foundation.zurb.com/forum/posts/38992-sass-defaulting-to-original-with-custom-gulpfilejs

You commented on Tom Belknap's post over 1 year

On further inspection, there just seems to be something profoundly flakey about the way the Sass compiler is working. Make a change, it defauts. Add a few spaces at the bottom of the Sass file (or take some away) and resave, it's back in action.
 

You commented on Tom Belknap's post over 1 year

Ok,

Where in the documentation does it say anything about a "components directory?"
There is no components directory
If I create a brand new Foundation project for Sites, I see no such entries in that gulpfile.
What would the above code, when added to the gulpfile.js, solve about my current issue?

 

You commented on Tom Belknap's post over 1 year

Well no, actually. What seems to be happening:

Run foundation
Styles are now being honored
Make a change to the app.scss file
Styles are now NOT being honored
Shut down foundation
Restart foundation
Styles are once again being honored.

And when I say "styles," that's actually a limited subset as well. The padding I'm trying to introduce is not being honored. Only the fact that Foundation is loading the flexbox classes and using the _settings.scss files correctly.
Here is the result when things are working:

 
Here's when it's not:

You commented on Tom Belknap's post over 1 year

... and now it's back. Didn't change a thing, just started and stopped Foundation. What??

You commented on Tom Belknap's post over 1 year

Ok. Additional details - though I do not understand a thing about them:
For reasons I cannot explain, the SCSS files suddenly got compiled correctly right after typing up this post. Then I added the following to the app.scss file and it went right back where it was:
div.hero-well {
background-image: url(/wp-content/uploads/sites/67/2016/03/hero.png);
background-size: cover;
background-position: center;
padding: 0 50px; <-- NEW
}
My markup looks like this:
<?php /* Hero */ ?>
<div class="row align-center hero-well">
<div class="columns large-8">
<?php echo wp_get_attachment_image( 32, 'full' ); ?>
</div>
</div>
What is going on??

You commented on Rafi Benkual's post over 1 year

I'll say this: one advantage of using Gulp for the new iteration of Foundation means you can be a lot more flexible and independent with where you place the application-specific files for a Foundation project. I'm using the following structure for a Wordpress theme based on ZF:

root
-- /inc
-- -- /scss
-- /vendor
-- -- /foundation

My gulpfile looks like this:

 var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src',
  '../../lib/scss'
];

gulp.task('sass', function() {
  return gulp.src('../../lib/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../../inc/css'));
});

gulp.task('javascript', function() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel()) // <-- There it is!
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'))
    .on('finish', browser.reload);
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss', '../../lib/scss/*.scss'], ['sass']);
});

Posts Followed

Following

  • No Content

Followers

  • No Content