Menu icon Foundation

Designer | Minnesota

My Posts

  • NEW
  • Sass Multiple Theme Management

    By Jennifer Tso

    SassF6themes

    I am just starting to use the Foundation 6 Sass Starter files. The main issue I have is figuring out the file structure to accommodate a CMS with multiple color themes that are customizable based user choice, and I am not sure how to best structure my fil... (continued)









  • NEW
  • F6 Dropdown hover issues

    By Jennifer Tso

    Dropdown Hover Issue

    I have modified the responsive navigation to include the dropdown effect on medium and above, with a logo in the center. I've also changed the top bar code so that top bar left and top bar right are wrapping <li> inside of the <ul> container. ... (continued)


  • 1
    Reply
  • F6 Toggler Overlay Menu

    By Jennifer Tso

    F6Toggler Plugin

    I have been using the an Off-Canvas Overlay Menu in F6 Building Blocks (http://zurb.com/building-blocks/off-canvas-overlay-panel). The Menu from the example itself works, but I have modified it so that the trigger is a menu icon that activates ... (continued)

    Last Reply by Rafi Benkual 11 months ago


My Comments

Jennifer Tso commented on Jennifer Tso's post 3 months

This is the code from the gulpfile:
var gulp = require('gulp');

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

var sassPaths = [

'bower_components/normalize.scss/sass',

'bower_components/foundation-sites/scss',

'bower_components/motion-ui/src'

];

//var themePaths = ['css/themes'];

gulp.task('sass', function() {

return gulp.src('scss/app.scss')

.pipe($.sass({

  includePaths: sassPaths,

  outputStyle: 'compressed' // if css compressed **file size**

})

  .on('error', $.sass.logError))

.pipe($.autoprefixer({

  browsers: ['last 2 versions', 'ie >= 9']

}))

.pipe(gulp.dest('css'));

});

gulp.task('themes', function () {

//console.log("themes");

return gulp.src('themes/theme-*.scss')

.pipe($.sass({

  includePaths: sassPaths,

  outputStyle: 'compressed' // if css compressed **file size**

})

  .on('error', $.sass.logError))

.pipe($.autoprefixer({

  browsers: ['last 2 versions', 'ie >= 9']

}))

.pipe(gulp.dest('css/themes/theme-*.css'));

});

gulp.task('default', ['sass', 'themes'], function() {

gulp.watch(['scss/*/.scss'], ['sass']);

gulp.watch(['scss/*/.scss'], ['themes']);

});
This image is a shot of the Club Assets directory folder with all the files from the SASS basic starter template:

Jennifer Tso commented on Jennifer Tso's post 7 months

I updated to Foundation 6.3.0 and it has fixed the Equalizer issue.

Jennifer Tso commented on Jennifer Tso's post 12 months

Thanks for the reply! When I first tried applying that fix, it did nothing until I realized it was in a new version of foundation (I am still on 6.0.5). However I was hesitant to update to the new version because I thought it would break my custom version of a full-width megamenu, which basically took the dropdown-panes from the dropdown container component and combined that under a submenu in the top bar.
Do you know if there's a way to modify the current responsive navigation so that when its in medium or larger, the top bar dropdown items with submenus will display in a full-width dropdown?

Jennifer Tso commented on Jennifer Tso's post about 1 year

This what happened before I used the callout columns like you did: 
 

 
With the callout columns  they now sit on the same row with some gutter space. However, I don't entirely understand the margin values for the callout because I had put a negative margin-right for me to reduce the gutters between the callouts.
 
Standard Callout Gutters:

 
Callout with margin-right: -10px;

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Jennifer Tso's post 3 months

This is the code from the gulpfile:
var gulp = require('gulp');

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

var sassPaths = [

'bower_components/normalize.scss/sass',

'bower_components/foundation-sites/scss',

'bower_components/motion-ui/src'

];

//var themePaths = ['css/themes'];

gulp.task('sass', function() {

return gulp.src('scss/app.scss')

.pipe($.sass({

  includePaths: sassPaths,

  outputStyle: 'compressed' // if css compressed **file size**

})

  .on('error', $.sass.logError))

.pipe($.autoprefixer({

  browsers: ['last 2 versions', 'ie >= 9']

}))

.pipe(gulp.dest('css'));

});

gulp.task('themes', function () {

//console.log("themes");

return gulp.src('themes/theme-*.scss')

.pipe($.sass({

  includePaths: sassPaths,

  outputStyle: 'compressed' // if css compressed **file size**

})

  .on('error', $.sass.logError))

.pipe($.autoprefixer({

  browsers: ['last 2 versions', 'ie >= 9']

}))

.pipe(gulp.dest('css/themes/theme-*.css'));

});

gulp.task('default', ['sass', 'themes'], function() {

gulp.watch(['scss/*/.scss'], ['sass']);

gulp.watch(['scss/*/.scss'], ['themes']);

});
This image is a shot of the Club Assets directory folder with all the files from the SASS basic starter template:

You commented on Jennifer Tso's post 7 months

I updated to Foundation 6.3.0 and it has fixed the Equalizer issue.

You commented on Jennifer Tso's post 12 months

Thanks for the reply! When I first tried applying that fix, it did nothing until I realized it was in a new version of foundation (I am still on 6.0.5). However I was hesitant to update to the new version because I thought it would break my custom version of a full-width megamenu, which basically took the dropdown-panes from the dropdown container component and combined that under a submenu in the top bar.
Do you know if there's a way to modify the current responsive navigation so that when its in medium or larger, the top bar dropdown items with submenus will display in a full-width dropdown?

You commented on Jennifer Tso's post about 1 year

This what happened before I used the callout columns like you did: 
 

 
With the callout columns  they now sit on the same row with some gutter space. However, I don't entirely understand the margin values for the callout because I had put a negative margin-right for me to reduce the gutters between the callouts.
 
Standard Callout Gutters:

 
Callout with margin-right: -10px;

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content