Questions tagged [zurb-foundation-6]

This is the latest version of Foundation for Sites

Filter by
Sorted by
Tagged with
102 votes
3 answers
2k views

JointsWP4 (SASS): Changing Properties in Sticky

TL;DR: Is Sticky actually able to react to changes I give through JavaScript? If so, how? (The project is using Foundation 6.2 and WordPress 4.4, theme installed using Node.js/npm and gulp 4.0. My ...
Samuel LOL Hackson's user avatar
21 votes
10 answers
61k views

Angular 6 ReferenceError: $ is not defined error with JQuery

I have installed angular 6 with foundation but I am getting an error with JQuery. Uncaught syntaxerror: unexpected identifier ReferenceError: $ is not defined In my component, i have declare ...
user3701188's user avatar
19 votes
2 answers
9k views

Foundation 6 does not generate any styles

I have setup a new project to test Foundation 6 using Gulp and Sass but it doesn't seem to compile at all. There is another post close to this topic, but I personally believe the accepted answer is ...
erwstout's user avatar
  • 1,287
15 votes
3 answers
22k views

Zurb Foundation 6 Reveal doesn't work

I've downloaded the new Zurb Foundation 6 complete package (Foundation for Sites). The archived file contains the following files and folders: [css] > app.css, foundation.css, foundation.min.css [...
Liron Harel's user avatar
  • 10.8k
13 votes
6 answers
10k views

Gulp-sass not compiling Foundation 6 properly

I'm having some issues with Foundation 6 files, for some reasons they are just not including all of the sass components. I tried to use Foundation 5 and it worked fine. Here is my gulp task: gulp....
user3586478's user avatar
11 votes
3 answers
5k views

Work needed to upgrade Zurb Foundation v5 to v6.2

What & how much work is required to upgrade Foundation 5 to 6.2? Our dev shop is taking over development of an existing F5 project. Seems the front-end layout is 80% complete, though we'll ...
tomByrer's user avatar
  • 1,115
8 votes
2 answers
7k views

using foundation 6 scss with angular 2 cli

How to use foundation 6 with angular cli.I tried with plain scss but was unable to proceed with foundation 6 scss.How should I proceed with this. Thanks in advance.
user93's user avatar
  • 1,866
8 votes
3 answers
1k views

Foundation 6 with Rails Simple Form

Simple Form includes a Foundation 5 template. However, I cannot find any template files modified for Foundation 6 on the web. How well does the generated forms work with Foundation 6? Moreover, any ...
Gavin's user avatar
  • 4,458
8 votes
1 answer
2k views

Zurb Foundation 6 sticky switch status at end of viewport height ".is-anchored .is-at-bottom"

Trying to create a menu that is sticked to the top of site whole time. Followed docs of zurb.foundation, but .sticky behaves always the same unexpected way. Or maybe I don't get some obvious? Please ...
Herr_Hansen's user avatar
  • 2,332
7 votes
0 answers
549 views

Foundation reInit equalizer throws "_init is not an available method for this element"

I'm using Foundation framework for my website and before updating to Foundation 6.4.3, this syntax Foundation.reInit('equalizer') used to work to re-bind/reflow my plug-ins like Equalizer for my ...
OptimusPrime's user avatar
6 votes
3 answers
2k views

Foundation project creation fails with npm ERR! git rev-list on debian 8.5.0

I nearly spent two or three hours and searched my ass of. But either i am to dumb to find a solution or there is none so far. First thing: i am not a pro in the linux world, but here is what i got. ...
Bodo Dackel's user avatar
6 votes
3 answers
2k views

Foundation 6 core js error

I am using a brand new install of Foundation 6 and trying to set up a closable toggle box (http://foundation.zurb.com/sites/docs/toggler.html). For some reason I am getting this error though.. ...
Dustin's user avatar
  • 4,324
6 votes
5 answers
1k views

Zurb Foundation 6 menu align-right easiet way to make align-center on small devices

I'm using ZURB foundation and I am wondering if an easier way exists of aligning menu items on small devices. Currently my HTML looks like this: <ul class="vertical menu align-right"> <...
Simon Hayter's user avatar
  • 3,131
5 votes
2 answers
5k views

How do I get ZURB Foundation 6.4.1 to work with Angular 4?

I'm trying to get ZURB Foundation 6.4.1 to work with Angular 4 but I'm failing miserably. I am following this tutorial http://shermandigital.com/blog/zurb-foundation-with-angular-cli/ but it only ...
Mr Teal's user avatar
  • 342
5 votes
3 answers
6k views

Foundation 6 reveal modal events not firing for me

I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty. But I can't ...
b mckenzie's user avatar
5 votes
4 answers
2k views

display slide number orbit.js foundation 6 zurb

I am currently working with orbit.js slider in Foundation 6 and not seeing an option to display slide number. Could you advice me on this or share examples please. Thanks!
Danila Belov's user avatar
5 votes
1 answer
1k views

sails.js and foundation 6 - TypeError: url.indexOf is not a function

I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, ...
Matt Knight's user avatar
5 votes
1 answer
984 views

Foundation sticky only on mobile

How can I have a sticky element with Foundation that sticks only on small breakpoints? data-sticky-on="small" works for small and up
jmontenegro's user avatar
5 votes
2 answers
2k views

Setup Zurb Foundation 6 (sass) in Laravel 5 using composer

I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2. I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through ...
Nicolas Lemoine's user avatar
5 votes
2 answers
3k views

Disable clickability on foundation accordion

I have a foundation accordion something like this. <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#panel1a">Accordion 1</a> <div ...
nitte93's user avatar
  • 1,820
5 votes
1 answer
381 views

Foundation vertical (Split Layout) Off-Canvas covers entire screen and on mobile screen only

I am trying to create an off-canvas using foundation 6; the idea is that I have two basic columns app, then I try to hide the one in the left only when the screen is small using off-canvas effect, But ...
victor sosa's user avatar
5 votes
1 answer
2k views

file to import not found or unreadable: util/util in my switch from foundation 5 to foundation 6

I used to use foundation 5 which uses compass to do the sass thing. but now i switch to foundation 6, I always cannot make it right. when running gulp,it show error: file to import not found or ...
Frank Lee's user avatar
  • 171
4 votes
1 answer
803 views

Panels in foundation 6 not rendering

new to foundation 6 here so probably missing something simple. Im trying to have panels render but its simply just not showing for me. Is there something ive missed? Whether or not i put the div = ...
callum's user avatar
  • 43
4 votes
2 answers
4k views

Browsersync server - Need different paths to html and css for reload

The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked. Into my second day trying to figure this out. I'm working ...
Preston's user avatar
  • 3,260
4 votes
2 answers
2k views

Custom Text for Drilldown Menu "Back" Button [Foundation 6]

While I know I can use data-back-button to change the text on my drilldown menus, is it possible to change them to reflect whatever the parents of the drilldown is? For example, the drilldown menu ...
Joe W.'s user avatar
  • 167
4 votes
2 answers
1k views

Foundation6 reveal popup form field unwanted focus lost (in jQuery events?)

I'm coding popup form using Foundation6 reveal. I'm facing JavaScript problem I have traced has probably something to do with jQuery.js / Foundation.js event binding or handling. When I click the ...
Repeat Spacer's user avatar
4 votes
1 answer
481 views

How to apply class to body element using Foundation's Responsive Navigation?

I'm using Foundation's Responsive Navigation to display a Hamburger icon for mobile. For the life of me, I cannot figure out how to apply a class to the body element when the mobile menu is displayed (...
Cofey's user avatar
  • 11.2k
4 votes
1 answer
6k views

How to configure Foundation 6 responsive menus to switch between Drilldown and Dropdown types?

How do I configure Foundation 6 responsive menus to switch from a dropdown menu to a drilldown menu when at the mobile device brealpoint? The last example in the Foundation documentation works as ...
Sean Kimball's user avatar
  • 4,506
4 votes
2 answers
2k views

How do I make rounded button-group in Foundation 6?

There used to be a "round" class on Foundation 5 that transforms a button-group to have rounded edges. How do I do this in Foundation 6?
user400424's user avatar
3 votes
2 answers
7k views

Foundation fire event on modal close?

I'm using foundation reveals within my application to send information via AJAX. Everything is working but upon the modal closing I want to change some text. How do you fire a function when a modal ...
Joe Scotto's user avatar
3 votes
1 answer
26k views

Responsive table with 100% width

Here's code: <div class="row"> <div class="large-12 columns"> <table class="scroll wide"> <tr> <td>First</td> <td>Second</td&...
emil.c's user avatar
  • 1,987
3 votes
1 answer
4k views

How to add JavaScript just for one specific page?

I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading. I used a ...
Guisong He's user avatar
  • 1,896
3 votes
4 answers
3k views

Foundation 6 Multiple Accordions, how to have only one accordion expanded at once

I am using Foundation 6's Accordion feature and have three separate accordions on one page. By default, within a single accordion, you can only have one content expanded at a time. However, I want to ...
alexandraleigh's user avatar
3 votes
1 answer
3k views

Foundation 6 data-responsive-menu parameters

I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The ...
Marco's user avatar
  • 732
3 votes
2 answers
2k views

Need nav bar to stick to top of window Foundation 6

I'm having trouble getting the Nav bar to stay on top of window. I've tried using the "sticky data" but nothing. No matter what i do it keeps scrolling along with the page. I've also tried to add the ...
Adolfo J Barreto's user avatar
3 votes
1 answer
1k views

Foundation 6 switches don't work?

In the following very basic example the switch works and is styled properly. If I merely change the foundation.css version from 5.5.2 to 6.0.5 the toggle style is lost. Why don't switches work in ...
Ken Williams's user avatar
3 votes
2 answers
128 views

Foundation.MediaQuery.current in a loop (first iteration always shows nothing, next are always correct)

I use Foundation.MediaQuery.current to determine current breakpoint. Every time I call console.log(Foundation.MediaQuery.current) for the first time (n=0) I get nothing. For all next calls (n>0) I ...
Matt Komarnicki's user avatar
3 votes
1 answer
479 views

How to accept Decimal values in Foundation 6

I have a form field built in Foundation 6 but it does not allow for decimal input. HTML <input type="number" name="decimal_amount" max="10" placeholder="" required> When I enter 8.5 I get ...
H. Ferrence's user avatar
  • 7,916
3 votes
1 answer
585 views

Foundation 6.2 Large Gutter Size

According to Foundation 6.2 documentation default grid gutter size for small is 20px and for medium is 30px, but did not mention for large. What is the default gutter size for large?
user avatar
3 votes
2 answers
5k views

Running Gulp and I get this error: File to import not found or unreadable: util/util

So I am pretty new at using gulp and I am having an issue getting my foundation 6 to compile correctly. I keep getting this error: File to import not found or unreadable: util/util I think it might ...
Garrett Sanderson's user avatar
3 votes
2 answers
2k views

Zurb Foundation 6 Primary Color Variable

Looking at _settings.scss in Zurb Foundation 6 the SASS variable $primary-color appears not to have any assigned value. My question is does $foundation-palettes primary equate to $primary-color? $...
user avatar
3 votes
1 answer
569 views

Foundation 6 Top Bar link color Sass

If I look at _settings.scss I can't find a variable to style the Top Bar link color? Something like: $topbar-link-color ? Is this variable somewhere?
meez's user avatar
  • 3,843
3 votes
2 answers
3k views

How to inline list ul in Foundation 6?

I cannot seem to find the right way to inline list a 'ul' (and it's li elements, so they appear horizontally instead of vertically) in Foundation 6 (F5 has a 'inline-list' class) <footer ...
gvanto's user avatar
  • 1,936
3 votes
1 answer
171 views

What does this Zurb Foundation 6 mixin @include xy-grid() mean?

What does this Zurb Foundation 6 mixin mean @include xy-grid(); Which one does it define, grid-x or grid-y?
Nvim's user avatar
  • 125
3 votes
1 answer
2k views

How to add background-image into HTML email in Zurb Foundation 6

I am trying to do HTML email with Zurb Foudation 6. After sending HTML email on mail clients there are don't show all background-images, but in web version everytning is ok. How to correct add ...
Veronica Ryzhkova's user avatar
3 votes
1 answer
461 views

Foundation 6 Button Group Expanded Not Working

I am using Foundation 6 Zurb Template with flexbox enabled and the expanded feature of the button group is not working. When I add the expanded class the last button will not fill the last space and ...
RCD's user avatar
  • 47
3 votes
1 answer
46 views

autosizing form w/ attached button in the navbar

I've been trying to do this a bunch of different ways. I'm using foundation 6 and although I have been unable to locate the responsible css value it seems that the top-bar class is preventing me from ...
thesowismine's user avatar
3 votes
2 answers
6k views

How to create sticky topbar in Foundation 6?

I wish to create a sticky topbar in Foundation 6. In foundation 5 this was easy; simply add the "sticky" class to the top bar. In Foundation 6 I believe you have to use the new "sticky" attribute (...
Yahya Uddin's user avatar
  • 27.1k
3 votes
0 answers
165 views

ZURB Foundation npm build not creating `dist` directory

I've followed the directions at http://foundation.zurb.com/sites/docs/installation.html#command-line-tool.html and there is no dist directory created. There are several dist directories scattered ...
edA-qa mort-ora-y's user avatar
3 votes
0 answers
1k views

ngOnDestroy and $('#element').foundation('destroy');

I'm trying to implement a Sticky Magellan in my Angular2 application. Once I leave the view I want to remove the plugin, because otherwise I get problems when I'm revisiting the view. So I'm using: ...
tschaka1904's user avatar
  • 1,323

1
2 3 4 5
10