Menu icon Foundation

Developer | Dallas, Texas

I have been developing websites for almost 20 years and spend a lot of my development time focused on accessibility, semantic, and adaptive-responsive development.

My Posts


  • 6
    Replies
  • Responsive menu

    By Glenn Philp

    responsive-menu

    How can I achieve an accordion menu for mobile (small) devices and a normal vertical nested menu for tablets (medium) and desktop (large) devices? I thought it was simply `data-responsive-menu="accordion medium-vertical"`, that didn't work though.

    Last Reply by karthic 11 days ago


  • NEW
  • CSS3 Grayscale Filter

    By Glenn Philp

    gulpcss filtersgulp error

    Has anyone else experienced Gulp Sass error when trying to use filter: grayscale(); I am using Foundation 6.4 and getting the following error: Error: required parameter $color is missing in call to Function grayscale on line 207 of src/assets/... (continued)



  • NEW
  • Multiple Environments

    By Glenn Philp

    environmentflagssites

    Can anyone provide direction on how to extend environment flags? For instance, Foundation comes with --production out-of-the-box. However, I would like to add a flag for --development and --staging, while keeping --production. Is this possible with the c... (continued)




  • NEW
  • Foundation Reveal and WordPress

    By Glenn Philp

    wordpressrevealAJAX

    I realize this is probably more of a WordPress forum question but maybe one of my fellow Foundation-ites has run into the same issue. The goal is to use either the Foundation for Sites - reveal modal or the HTML history API to load the single post c... (continued)




My Comments

Glenn Philp commented on Glenn Philp's post 16 days

Thank you 'Walking into the Darkness', I was afraid this was the only solution. Maybe Foundation 6.4 will deliver a way to use any navigation type by screen size. 

Glenn Philp commented on Glenn Philp's post 19 days

I understand how the component works based on the documentation, and I realize there is not. That is why I am asking how would one use accordion for small and then a normal nested vertical menu for medium up.
<!-- NORMAL MENU
for MEDIUM and LARGE SCEENS -->

<ul class="vertical menu">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
<!-- ACCORDION MENU
for SMALL ONLY SCREENS -->

<ul class="vertical menu accordion-menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu vertical nested">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
According to Foundation documentation a developer can use data-responsive-menu for dropdown, drilldown, and accordion. What I would like to know is there a way to use data-responsive-menu to unset the special navigation type without having to use JavaScript and Foundation Media Queries to destroy, like so:
// Using Foundations built-in MediaQuery to test screen size
// Then undo all the attributes, classes, and inline styles that data-responsive-menu add when using accordion menus.

if (Foundation.MediaQuery.atLeast('medium')) {
// True if medium or large
// False if small
$(".menu").removeAttr('data-accordion-menu').removeClass('accordion-menu');
$(".menu li.is-accordion-submenu-parent").removeClass("is-accordion-submenu-parent");
$(".menu ul.is-accordion-submenu").removeClass("is-accordion-submenu").removeAttr('style');
}

Glenn Philp commented on Glenn Philp's post 5 months

Below I have listed two different code pens. The goal would be to use a grid-x for the medium and large screens, while grid-y for small. 
 
X-Grid for Medium and Large

https://codepen.io/glennphilp/full/qjMvvd/

Y-Grid for Small

https://codepen.io/glennphilp/full/YQOMzN/

Glenn Philp commented on jm's post 9 months

 Larry,
Please check out my post about this "Reveal Modal with AJAX"

Glenn Philp commented on Glenn Philp's post 9 months

Michelle,
Bad news, I am unable to get FooTable to work with the Foundation 6.3 build out-of-the-box. If this is a requirement and you cannot switch responsive table plugins I would reach out to the Foundation team on Twitter. As they are usually quick to help. Send them a link to your Forum post.
Good news, if you can switch. I was able to install Tablesaw from Filament group bower install tablesaw&nbsp;--save and then replace the footable.js with the tablesaw.jquery.js and tablesaw-init.js without any issue.
It is apparent that FooTable has more features like AJAX calls and pagination for dynamic data that makes it definitely better than Tablesaw.
The other quick solution would be to use FooTable as a standalone plugin. This would mean removing jQuery from being included in the app.js file.
<!-- HTML file -->
<script src="jquery.js"></script>
<script src="footable.js"></script>
<script src="app.js"></script>
<!-- CONFIG.YML file -->

Libraries required by Foundation

# Remove the jQuery path below
# - "bower_components/jquery/dist/jquery.js"
- "bower_components/what-input/dist/what-input.js"
# Core Foundation files
- "bower_components/foundation-sites/js/foundation.core.js"
- "bower_components/foundation-sites/js/foundation.util.*.js"
# Individual Foundation components
# If you aren't using a component, just remove it from the list
- "bower_components/foundation-sites/js/foundation.abide.js"
- "bower_components/foundation-sites/js/foundation.accordion.js"
- "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- "bower_components/foundation-sites/js/foundation.drilldown.js"
- "bower_components/foundation-sites/js/foundation.dropdown.js"
- "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- "bower_components/foundation-sites/js/foundation.equalizer.js"
- "bower_components/foundation-sites/js/foundation.interchange.js"
- "bower_components/foundation-sites/js/foundation.magellan.js"
- "bower_components/foundation-sites/js/foundation.offcanvas.js"
- "bower_components/foundation-sites/js/foundation.orbit.js"
- "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- "bower_components/foundation-sites/js/foundation.reveal.js"
- "bower_components/foundation-sites/js/foundation.slider.js"
- "bower_components/foundation-sites/js/foundation.sticky.js"
- "bower_components/foundation-sites/js/foundation.tabs.js"
- "bower_components/foundation-sites/js/foundation.toggler.js"
- "bower_components/foundation-sites/js/foundation.tooltip.js"
- "bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js"
# Paths to your own project code are here
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"</code></pre>

 

Glenn Philp commented on Glenn Philp's post 9 months

Michelle,
I added FooTable using the bower install without any build issue. One item I forgot to mention is adding the bable preset to your package.json file.
The following is my setup and how I work everyday.
Let's run through versions.

NodeJS v6.9.2
npm v4.0.5
Bower v1.8.0
Gulp CLI v3.9.1
Gulp Local v4.0.0-alpha.2
Foundation v6.3.0

My Package.json file (Important piece here is babel presets)
{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"devDependencies": {
"babel-preset-es2015": "6.3.13",
"babel-register": "6.7.2",
"browser-sync": "2.10.0",
"gulp": "gulpjs/gulp#4.0",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "6.1.2",
"gulp-cli": "1.2.1",
"gulp-combine-mq": "0.4.0",
"gulp-concat": "2.5.2",
"gulp-cssnano": "2.1.0",
"gulp-extname": "0.2.0",
"gulp-if": "2.0.0",
"gulp-imagemin": "2.2.1",
"gulp-inline-source": "3.0.0",
"gulp-load-plugins": "1.1.0",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "1.2.0",
"gulp-uncss": "1.0.1",
"js-yaml": "3.4.6",
"panini": "1.3.0",
"rimraf": "2.4.3",
"style-sherpa": "1.0.0",
"yargs": "3.8.0"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"babel": {
"presets": [
"es2015"
]
},
"private": true
}

Gulp file:
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import inlinesource from 'gulp-inline-source';
import combineMq from 'gulp-combine-mq';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, TARGET, PORT, BROWSER, UNCSS_OPTIONS, PATHS, COPY, STYLES, JS, PROJECT } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, sass, jsFoundation, gulp.parallel(pages, copyPhp, copyParts, copyIncludes, images, copyAssets, copyJS, copyFonts, copyScreenshot), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copyAssets() {
return gulp.src(COPY.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

function copyJS() {
return gulp.src(COPY.js)
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

function copyFonts() {
return gulp.src(COPY.fonts)
.pipe(gulp.dest(PATHS.dist + '/fonts'));
}

function copyParts() {
return gulp.src(COPY.parts)
.pipe(gulp.dest(PATHS.dist + '/template-parts'));
}

function copyIncludes() {
return gulp.src(COPY.inc)
.pipe(gulp.dest(PATHS.dist + '/inc'));
}

function copyPhp() {
return gulp.src(COPY.php)
.pipe($.if(PRODUCTION, inlinesource({
rootpath: ('../')
})))
.pipe($.if(PRODUCTION, gulp.dest(PATHS.wp)))
.pipe($.if(!PRODUCTION, gulp.dest(PATHS.dist)));
}

function copyScreenshot() {
return gulp.src(COPY.screenshot)
.pipe(gulp.dest(PATHS.dist));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
return gulp.src(STYLES.core)
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'expanded',
includePaths: STYLES.include
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
// Comment in the pipe below to run UnCSS in production
.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
.pipe($.if(PRODUCTION, combineMq({ beautify: false })))
.pipe($.if(PRODUCTION, $.cssnano()))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist))
.pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function jsFoundation() {
return gulp.src(JS.zf)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['what-input.js']}))
.pipe($.concat('core.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/*/')
.pipe($.if(PRODUCTION, $.imagemin({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
proxy: TARGET,
browser: BROWSER
//server: PATHS.dist, port: PORT
});
done();
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(COPY.js, copyJS);
gulp.watch(COPY.fonts, copyFonts);
gulp.watch(COPY.assets, copyAssets);
gulp.watch('src/{template-parts,inc}//*.php').on('all', gulp.series(copyParts, copyIncludes, browser.reload));
gulp.watch('src/pages/
/.{php,html}').on('all', gulp.series(pages, copyPhp, browser.reload));
gulp.watch('src/{layouts,partials}/
/.{php,html}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss//*.scss').on('all', gulp.series(sass, browser.reload));
gulp.watch('src/assets/js/
/.js').on('all', gulp.series(jsFoundation, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

Config file:
# Your project's server will run on localhost:xxxx at this port
TARGET: "www.localhost.dev"
BROWSER: ["google chrome"]
PORT: 8000

Autoprefixer will make sure your CSS works with these browsers

COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
- "ios >= 7"

UnCSS will use these settings

UNCSS_OPTIONS:
html:
- "src/*/.php"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*
- !!js/regexp .show-.*

Gulp will reference these paths when it copies files

PATHS:
# Path to dist folder
dist: "../wp-content/themes/themeName"
wp: "../wp-content/themes/themeName"
COPY:
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss,fonts}/
/"
fonts:
- "bower_components/foundation-icon-fonts/foundation-icons.eot"
- "bower_components/foundation-icon-fonts/foundation-icons.svg"
- "bower_components/foundation-icon-fonts/foundation-icons.ttf"
- "bower_components/foundation-icon-fonts/foundation-icons.woff"
- "src/assets/fonts/
/"
js:
# Individual Foundation components
# If you aren't using a component, just remove it from the list
- "bower_components/foundation-sites/js/foundation.abide.js"
- "bower_components/foundation-sites/js/foundation.accordion.js"
- "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- "bower_components/foundation-sites/js/foundation.drilldown.js"
- "bower_components/foundation-sites/js/foundation.dropdown.js"
- "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- "bower_components/foundation-sites/js/foundation.equalizer.js"
- "bower_components/foundation-sites/js/foundation.interchange.js"
- "bower_components/foundation-sites/js/foundation.magellan.js"
- "bower_components/foundation-sites/js/foundation.offcanvas.js"
- "bower_components/foundation-sites/js/foundation.orbit.js"
- "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- "bower_components/foundation-sites/js/foundation.reveal.js"
- "bower_components/foundation-sites/js/foundation.slider.js"
- "bower_components/foundation-sites/js/foundation.sticky.js"
- "bower_components/foundation-sites/js/foundation.tabs.js"
- "bower_components/foundation-sites/js/foundation.toggler.js"
- "bower_components/foundation-sites/js/foundation.tooltip.js"
- "bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js"
# Waypoints
- "bower_components/gsap/src/uncompressed/TweenMax.js"
- "bower_components/scrollmagic/scrollmagic/uncompressed//*"
# - "bower_components/waypoints/lib/jquery.waypoints.js"
# - "bower_components/headroom.js/dist/headroom.js"
# Lightboxes
# - "bower_components/fancyBox/source/jquery.fancybox.pack.js"
# Improve images for hidef
- "bower_components/retinajs/dist/retina.js"
# JS CSS
- "bower_components/eqcss/EQCSS.js"
# Slider
- "bower_components/owl.carousel/dist/owl.carousel.js"
- "bower_components/swiper/dist/js/swiper.js"
# - "bower_components/flickity/js/flickity.js"
# LocalStorage loader
- "bower_components/basket.js/dist/basket.js"
# Custom JS
- "src/assets/js/wp-includes/
/"
# Paths to your own project code are here
- "src/assets/js/triggers.js"
php:
- "src/pages/
/"
parts:
- "src/template-parts//*"
inc:
- "src/inc/
/"
screenshot:
- "src/wp-required/screenshot.png"
STYLES:
# Paths to Sass libraries, which can then be loaded with @import
core:
- "src/assets/scss/style.scss"
- "src/assets/scss/style-desktop.scss"
- "src/assets/scss/style-tablet.scss"
include:
- "bower_components/foundation-sites/scss"
- "bower_components/foundation-icon-fonts"
- "bower_components/foundation-font-awesome-buttons/src"
- "bower_components/motion-ui/src"
- "bower_components/animate.css/source"
- "bower_components/fontawesome/scss"
- "bower_components/megatype"
- "bower_components/modular-scale/stylesheets/"
- "bower_components/magnific-popup/src/css"
JS:
# Paths to JavaScript libraries, which are combined into one file
zf:
# Libraries required by Foundation
- "bower_components/jquery/dist/jquery.js"
- "bower_components/what-input/dist/what-input.js"
# Core Foundation files
- "bower_components/foundation-sites/js/foundation.core.js"
- "bower_components/foundation-sites/js/foundation.util.
.js"
# 3rd Party Frameworks
- "bower_components/footable/compiled/footable.js"

Glenn Philp commented on Glenn Philp's post 9 months

Michelle,
See if the bable ignore pipe works. The rest is a little modified for my build process.
// Combine JavaScript into one file
// In production, the file is minified
function jsFoundation() {
return gulp.src(JS.zf)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'bower_components/footable/compiled/footable.js'
]}))
.pipe($.concat('core.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
If it still isn't working, I would suggest only listing 'footable.js' without the path. Like what-input.js.

Glenn Philp commented on Glenn Philp's post 10 months

Yes, it is possible, you would simply pass a link with a parameter that would trigger your JavaScript to open the modal with the content passed inside.

Glenn Philp commented on Glenn Philp's post 12 months

I discovered this issue was the result of Bable ES6 which is required by Foundation. For anyone running into similar issues when compiling third-party JS when added to the config file, this is the solution:
Use preset es2015 and tell it the files to ignore.
Source: https://github.com/zurb/foundation-zurb-template/pull/43
{
"presets": ["es2015"],
"ignore": [
"bower_components/justgage/raphael-2.1.4.min.js",
"bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"bower_components/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
"bower_components/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
],
"compact": false
}
 

Glenn Philp commented on Karsten Wentink's post about 1 year

You might read the forum post "Reveal Modal with AJAX Content" for a complete discussion on AJAX and Foundation 6 reveal modals.

Posts Followed


  • 9
    Replies
  • How to load URL in modal window

    By Karsten Wentink

    reveal

    Is it possible to open an URL in a modal window? I've been looking at the "Reveal" function in Foundation but this does not seem to have this option? I was using Fancybox but would like to do this using the Foundation toolkit if possible. I want to open ... (continued)

    Last Reply by Martin Adam about 1 year ago










Following

    No Content

Followers

My Posts

My Comments

You commented on Glenn Philp's post 16 days

Thank you 'Walking into the Darkness', I was afraid this was the only solution. Maybe Foundation 6.4 will deliver a way to use any navigation type by screen size. 

You commented on Glenn Philp's post 19 days

I understand how the component works based on the documentation, and I realize there is not. That is why I am asking how would one use accordion for small and then a normal nested vertical menu for medium up.
<!-- NORMAL MENU
for MEDIUM and LARGE SCEENS -->

<ul class="vertical menu">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
<!-- ACCORDION MENU
for SMALL ONLY SCREENS -->

<ul class="vertical menu accordion-menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu vertical nested">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
According to Foundation documentation a developer can use data-responsive-menu for dropdown, drilldown, and accordion. What I would like to know is there a way to use data-responsive-menu to unset the special navigation type without having to use JavaScript and Foundation Media Queries to destroy, like so:
// Using Foundations built-in MediaQuery to test screen size
// Then undo all the attributes, classes, and inline styles that data-responsive-menu add when using accordion menus.

if (Foundation.MediaQuery.atLeast('medium')) {
// True if medium or large
// False if small
$(".menu").removeAttr('data-accordion-menu').removeClass('accordion-menu');
$(".menu li.is-accordion-submenu-parent").removeClass("is-accordion-submenu-parent");
$(".menu ul.is-accordion-submenu").removeClass("is-accordion-submenu").removeAttr('style');
}

You commented on Glenn Philp's post 5 months

Below I have listed two different code pens. The goal would be to use a grid-x for the medium and large screens, while grid-y for small. 
 
X-Grid for Medium and Large

https://codepen.io/glennphilp/full/qjMvvd/

Y-Grid for Small

https://codepen.io/glennphilp/full/YQOMzN/

You commented on jm's post 9 months

 Larry,
Please check out my post about this "Reveal Modal with AJAX"

You commented on Glenn Philp's post 9 months

Michelle,
Bad news, I am unable to get FooTable to work with the Foundation 6.3 build out-of-the-box. If this is a requirement and you cannot switch responsive table plugins I would reach out to the Foundation team on Twitter. As they are usually quick to help. Send them a link to your Forum post.
Good news, if you can switch. I was able to install Tablesaw from Filament group bower install tablesaw&nbsp;--save and then replace the footable.js with the tablesaw.jquery.js and tablesaw-init.js without any issue.
It is apparent that FooTable has more features like AJAX calls and pagination for dynamic data that makes it definitely better than Tablesaw.
The other quick solution would be to use FooTable as a standalone plugin. This would mean removing jQuery from being included in the app.js file.
<!-- HTML file -->
<script src="jquery.js"></script>
<script src="footable.js"></script>
<script src="app.js"></script>
<!-- CONFIG.YML file -->

Libraries required by Foundation

# Remove the jQuery path below
# - "bower_components/jquery/dist/jquery.js"
- "bower_components/what-input/dist/what-input.js"
# Core Foundation files
- "bower_components/foundation-sites/js/foundation.core.js"
- "bower_components/foundation-sites/js/foundation.util.*.js"
# Individual Foundation components
# If you aren't using a component, just remove it from the list
- "bower_components/foundation-sites/js/foundation.abide.js"
- "bower_components/foundation-sites/js/foundation.accordion.js"
- "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- "bower_components/foundation-sites/js/foundation.drilldown.js"
- "bower_components/foundation-sites/js/foundation.dropdown.js"
- "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- "bower_components/foundation-sites/js/foundation.equalizer.js"
- "bower_components/foundation-sites/js/foundation.interchange.js"
- "bower_components/foundation-sites/js/foundation.magellan.js"
- "bower_components/foundation-sites/js/foundation.offcanvas.js"
- "bower_components/foundation-sites/js/foundation.orbit.js"
- "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- "bower_components/foundation-sites/js/foundation.reveal.js"
- "bower_components/foundation-sites/js/foundation.slider.js"
- "bower_components/foundation-sites/js/foundation.sticky.js"
- "bower_components/foundation-sites/js/foundation.tabs.js"
- "bower_components/foundation-sites/js/foundation.toggler.js"
- "bower_components/foundation-sites/js/foundation.tooltip.js"
- "bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js"
# Paths to your own project code are here
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"</code></pre>

 

You commented on Glenn Philp's post 9 months

Michelle,
I added FooTable using the bower install without any build issue. One item I forgot to mention is adding the bable preset to your package.json file.
The following is my setup and how I work everyday.
Let's run through versions.

NodeJS v6.9.2
npm v4.0.5
Bower v1.8.0
Gulp CLI v3.9.1
Gulp Local v4.0.0-alpha.2
Foundation v6.3.0

My Package.json file (Important piece here is babel presets)
{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"devDependencies": {
"babel-preset-es2015": "6.3.13",
"babel-register": "6.7.2",
"browser-sync": "2.10.0",
"gulp": "gulpjs/gulp#4.0",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "6.1.2",
"gulp-cli": "1.2.1",
"gulp-combine-mq": "0.4.0",
"gulp-concat": "2.5.2",
"gulp-cssnano": "2.1.0",
"gulp-extname": "0.2.0",
"gulp-if": "2.0.0",
"gulp-imagemin": "2.2.1",
"gulp-inline-source": "3.0.0",
"gulp-load-plugins": "1.1.0",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "1.2.0",
"gulp-uncss": "1.0.1",
"js-yaml": "3.4.6",
"panini": "1.3.0",
"rimraf": "2.4.3",
"style-sherpa": "1.0.0",
"yargs": "3.8.0"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"babel": {
"presets": [
"es2015"
]
},
"private": true
}

Gulp file:
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import inlinesource from 'gulp-inline-source';
import combineMq from 'gulp-combine-mq';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, TARGET, PORT, BROWSER, UNCSS_OPTIONS, PATHS, COPY, STYLES, JS, PROJECT } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, sass, jsFoundation, gulp.parallel(pages, copyPhp, copyParts, copyIncludes, images, copyAssets, copyJS, copyFonts, copyScreenshot), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copyAssets() {
return gulp.src(COPY.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

function copyJS() {
return gulp.src(COPY.js)
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

function copyFonts() {
return gulp.src(COPY.fonts)
.pipe(gulp.dest(PATHS.dist + '/fonts'));
}

function copyParts() {
return gulp.src(COPY.parts)
.pipe(gulp.dest(PATHS.dist + '/template-parts'));
}

function copyIncludes() {
return gulp.src(COPY.inc)
.pipe(gulp.dest(PATHS.dist + '/inc'));
}

function copyPhp() {
return gulp.src(COPY.php)
.pipe($.if(PRODUCTION, inlinesource({
rootpath: ('../')
})))
.pipe($.if(PRODUCTION, gulp.dest(PATHS.wp)))
.pipe($.if(!PRODUCTION, gulp.dest(PATHS.dist)));
}

function copyScreenshot() {
return gulp.src(COPY.screenshot)
.pipe(gulp.dest(PATHS.dist));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
return gulp.src(STYLES.core)
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'expanded',
includePaths: STYLES.include
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
// Comment in the pipe below to run UnCSS in production
.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
.pipe($.if(PRODUCTION, combineMq({ beautify: false })))
.pipe($.if(PRODUCTION, $.cssnano()))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist))
.pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function jsFoundation() {
return gulp.src(JS.zf)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['what-input.js']}))
.pipe($.concat('core.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/*/')
.pipe($.if(PRODUCTION, $.imagemin({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
proxy: TARGET,
browser: BROWSER
//server: PATHS.dist, port: PORT
});
done();
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(COPY.js, copyJS);
gulp.watch(COPY.fonts, copyFonts);
gulp.watch(COPY.assets, copyAssets);
gulp.watch('src/{template-parts,inc}//*.php').on('all', gulp.series(copyParts, copyIncludes, browser.reload));
gulp.watch('src/pages/
/.{php,html}').on('all', gulp.series(pages, copyPhp, browser.reload));
gulp.watch('src/{layouts,partials}/
/.{php,html}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss//*.scss').on('all', gulp.series(sass, browser.reload));
gulp.watch('src/assets/js/
/.js').on('all', gulp.series(jsFoundation, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

Config file:
# Your project's server will run on localhost:xxxx at this port
TARGET: "www.localhost.dev"
BROWSER: ["google chrome"]
PORT: 8000

Autoprefixer will make sure your CSS works with these browsers

COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
- "ios >= 7"

UnCSS will use these settings

UNCSS_OPTIONS:
html:
- "src/*/.php"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*
- !!js/regexp .show-.*

Gulp will reference these paths when it copies files

PATHS:
# Path to dist folder
dist: "../wp-content/themes/themeName"
wp: "../wp-content/themes/themeName"
COPY:
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss,fonts}/
/"
fonts:
- "bower_components/foundation-icon-fonts/foundation-icons.eot"
- "bower_components/foundation-icon-fonts/foundation-icons.svg"
- "bower_components/foundation-icon-fonts/foundation-icons.ttf"
- "bower_components/foundation-icon-fonts/foundation-icons.woff"
- "src/assets/fonts/
/"
js:
# Individual Foundation components
# If you aren't using a component, just remove it from the list
- "bower_components/foundation-sites/js/foundation.abide.js"
- "bower_components/foundation-sites/js/foundation.accordion.js"
- "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- "bower_components/foundation-sites/js/foundation.drilldown.js"
- "bower_components/foundation-sites/js/foundation.dropdown.js"
- "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- "bower_components/foundation-sites/js/foundation.equalizer.js"
- "bower_components/foundation-sites/js/foundation.interchange.js"
- "bower_components/foundation-sites/js/foundation.magellan.js"
- "bower_components/foundation-sites/js/foundation.offcanvas.js"
- "bower_components/foundation-sites/js/foundation.orbit.js"
- "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- "bower_components/foundation-sites/js/foundation.reveal.js"
- "bower_components/foundation-sites/js/foundation.slider.js"
- "bower_components/foundation-sites/js/foundation.sticky.js"
- "bower_components/foundation-sites/js/foundation.tabs.js"
- "bower_components/foundation-sites/js/foundation.toggler.js"
- "bower_components/foundation-sites/js/foundation.tooltip.js"
- "bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js"
# Waypoints
- "bower_components/gsap/src/uncompressed/TweenMax.js"
- "bower_components/scrollmagic/scrollmagic/uncompressed//*"
# - "bower_components/waypoints/lib/jquery.waypoints.js"
# - "bower_components/headroom.js/dist/headroom.js"
# Lightboxes
# - "bower_components/fancyBox/source/jquery.fancybox.pack.js"
# Improve images for hidef
- "bower_components/retinajs/dist/retina.js"
# JS CSS
- "bower_components/eqcss/EQCSS.js"
# Slider
- "bower_components/owl.carousel/dist/owl.carousel.js"
- "bower_components/swiper/dist/js/swiper.js"
# - "bower_components/flickity/js/flickity.js"
# LocalStorage loader
- "bower_components/basket.js/dist/basket.js"
# Custom JS
- "src/assets/js/wp-includes/
/"
# Paths to your own project code are here
- "src/assets/js/triggers.js"
php:
- "src/pages/
/"
parts:
- "src/template-parts//*"
inc:
- "src/inc/
/"
screenshot:
- "src/wp-required/screenshot.png"
STYLES:
# Paths to Sass libraries, which can then be loaded with @import
core:
- "src/assets/scss/style.scss"
- "src/assets/scss/style-desktop.scss"
- "src/assets/scss/style-tablet.scss"
include:
- "bower_components/foundation-sites/scss"
- "bower_components/foundation-icon-fonts"
- "bower_components/foundation-font-awesome-buttons/src"
- "bower_components/motion-ui/src"
- "bower_components/animate.css/source"
- "bower_components/fontawesome/scss"
- "bower_components/megatype"
- "bower_components/modular-scale/stylesheets/"
- "bower_components/magnific-popup/src/css"
JS:
# Paths to JavaScript libraries, which are combined into one file
zf:
# Libraries required by Foundation
- "bower_components/jquery/dist/jquery.js"
- "bower_components/what-input/dist/what-input.js"
# Core Foundation files
- "bower_components/foundation-sites/js/foundation.core.js"
- "bower_components/foundation-sites/js/foundation.util.
.js"
# 3rd Party Frameworks
- "bower_components/footable/compiled/footable.js"

You commented on Glenn Philp's post 9 months

Michelle,
See if the bable ignore pipe works. The rest is a little modified for my build process.
// Combine JavaScript into one file
// In production, the file is minified
function jsFoundation() {
return gulp.src(JS.zf)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'bower_components/footable/compiled/footable.js'
]}))
.pipe($.concat('core.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
If it still isn't working, I would suggest only listing 'footable.js' without the path. Like what-input.js.

You commented on Glenn Philp's post 10 months

Yes, it is possible, you would simply pass a link with a parameter that would trigger your JavaScript to open the modal with the content passed inside.

You commented on Glenn Philp's post 12 months

I discovered this issue was the result of Bable ES6 which is required by Foundation. For anyone running into similar issues when compiling third-party JS when added to the config file, this is the solution:
Use preset es2015 and tell it the files to ignore.
Source: https://github.com/zurb/foundation-zurb-template/pull/43
{
"presets": ["es2015"],
"ignore": [
"bower_components/justgage/raphael-2.1.4.min.js",
"bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"bower_components/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
"bower_components/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
],
"compact": false
}
 

You commented on Karsten Wentink's post about 1 year

You might read the forum post "Reveal Modal with AJAX Content" for a complete discussion on AJAX and Foundation 6 reveal modals.

Posts Followed

Following

  • No Content

Followers