Questions tagged [zurb-foundation]

Foundation is a cross-device CSS framework, maintained by ZURB, for building both prototypes and production code.

Filter by
Sorted by
Tagged with
0
votes
1answer
38 views

The foundation 5 docs on get.foundation/sites/docs/v/5.5.3/ are not available anymore

Today I found that the documentation for foundation 5 (https://get.foundation/sites/docs/v/5.5.3/) is not available anymore and I still have projects in long term maintenance that rely on version 5. ...
0
votes
1answer
36 views

columns not alligned side by side foundation css

i have the following code that should create a row with three columns side by side but the columns appear one after the other in large screen <div class="row"> <div class= "columns ...
0
votes
1answer
25 views

Zurb Foundation 6 reveal unable to trigger event followed by close event

We are alerting a message after close of popups. This was working fine with foundation 4 and now i am trying to upgrade to foundation 6 and it fails to trigger event followed by close of popup. ...
0
votes
1answer
23 views

Foundation for Email: Vertical-Align Not Working on Mobile

I'm attempting to vertically align a headline and byline next to an image. The meta text should appear in the middle of the image height. It works great on desktop, but mobile refuses to work. I've ...
0
votes
1answer
26 views

Foundation Panini how to add a manifest.json file to my dist folder in build process

I've just learned how to build my website using the Foundation Panini library using Foundation CLI. I've successfully finished building all the pages and it works great, but I cannot figure out how to ...
-2
votes
1answer
34 views

Columns not containing text

I'm using Zurb Foundation columns and trying to get my paragraph text contained within a column but it is displaying right across the screen, I'm not sure why this is happening, it can be fixed with ...
0
votes
1answer
28 views

Foundation 6 Custom Build Generation Not Working

I'm trying to generate a custom build of Foundation using: https://foundation.zurb.com/sites/download.html/#customizeFoundation I only unchecked Typography and Forms, and selected RTL Text Direction. ...
0
votes
0answers
41 views

Foundation 6 sticky responsive menu on left

I start working with Foundation. I would like to have a sticky responsive menu on the left side always visible except for small screen-size It's about the same as this: <https://codepen.io/...
0
votes
0answers
25 views

how to add foundation table.scss to my existing rails application

I am using the gem 'foundation-rails', '= 6.4.3.0' and have the following application.scss //= require nouislider @import 'foundation_and_overrides'; @import 'selectize'; @import 'selectize.default';...
0
votes
0answers
16 views

Foundation visibility classes, image sizes & turbolinks: finding a sweet spot

Foundation 6.5.3 has visibility classes whereby <p class="show-for-landscape">You are in landscape orientation.</p> <p class="show-for-portrait">You are in portrait orientation.</...
0
votes
1answer
16 views

How to build foundation from scss

Is it possible to build foundation from the .scss files simply using scss? If I run: scss compile --watch foundation.scss I get an error: error No such file or directory @ rb_sysopen - compile How ...
0
votes
0answers
19 views

Aligning :after element with vertical tabs

this is my first post here and I feel dumb for asking the question. It should be simple but I just can't get the alignment working. I'm trying to add a triangle to the right of the tabs (similar to ...
1
vote
2answers
24 views

Center elements on Zurb Foundation Top-Bar

I have a top nav-bar made with Foundation 5. The elements on the nav-bar should be centered. I realize that this question has been asked before(for example here), but none of the answers provided so ...
0
votes
0answers
26 views

Touch events not binding as described in documentation Foundation 6.5.3

I have been trying to setup basic touch events per the documentation for Foundation 6.5.3 javascript utilities. What they provide as sample code simply doesn't work. I get a type error for the ...
0
votes
0answers
22 views

sass gulp sourcemaps not generated

I'm proxying a website through browsersync and injecting the css/js, that way I can use zurb foundation and sass on a hosted environment, where I don't have access to the HTML files/SSH, since it's ...
0
votes
1answer
46 views

React and foundation: can't use row class

I'm trying to use the foundation library in a ReactJs basic project. I installed the react-foundation and foundation-sites following this github project: https://github.com/digiaonline/react-...
0
votes
1answer
21 views

Foundation 6.4 tweaking top bar

Foundation's top bar navigation tool is set-up to fully flesh out a hierarchy of links, relying upon list and item tags. <div class="top-bar"> <div class="top-bar-left"> <ul ...
0
votes
1answer
353 views

Foundation CLI does not work. ReferenceError: primordials is not defined

I have Windows 10 (64 bit), Node v13.0.1, npm 6.12.0. I want to install foundation-cli globaly but I am getting "ReferenceError: primordials is not defined" while I command "foundation new" or "...
0
votes
0answers
17 views

Trouble using Zurb Foundation with ECharts

I'm new to using Zurb Foundation and I'm having trouble to combine it with the ECharts library. Because of some "dirty testing" in the dist folder I'm pretty sure this is possible to achieve. I ...
0
votes
1answer
44 views

MakeCallback DeprecationWarning error when running Foundation for Emails build process

I'm using Foundation for Emails Sass Version to generate HTML emails. I have made a few small changes to the gulpfile and package.json, but for the most part it is exactly what is given on the ...
1
vote
1answer
43 views

Why it looks different in chrome (only on windows) and firefox my style rules?

I want to create a div where an image is on the left side and the text on the right side. I want to create this with PHP. It looks like this in Firefox: but the situation is different in Chrome on ...
0
votes
1answer
24 views

How to align footer columns foundation zurb

I am trying to create footer navigation. I followed a video from Gary Jennings. I copied everything that he did in both HTML and CSS. My footer is not aligning horizontally but in a column stacked on ...
0
votes
0answers
11 views

Foundation zurb close off-canvas when revealed for large

I've been trying to implement some Javascript to allow users to close my off-canvas menu whenever it has the class reveal-for-large (or any other reveal class), since Foundation doesn't have this by ...
0
votes
0answers
37 views

DIV inside .row must extend border left and right to be full width

I am using Foundation's Zurb framework and I have a DIV inside a row container that must have border left and right to fill in the available space turning it into like a full-width. This same DIV ...
0
votes
1answer
22 views

Issues installing Swup using npm with Zurb Foundation

I am having problems getting Swup to work with foundation. So far I have... Installed via npm. Created a new js/lib/dependencies file Added the import to the foundation app.js Added it to the ...
0
votes
1answer
30 views

Why can't I publish my repo to GitHub Pages?

I made a project using Zurb Foundation's cli, located here: https://github.com/nataliecardot/zeus-hosting-setup. I built the files and Sass was transpiled to CSS. For some reason when I tried ...
0
votes
0answers
16 views

Foundation XY-Grid Vertical and Horizontal Text Alignment in Four Square Card

I'm wanting to display a four-square card with content centered horizontally and vertically in all four cells. I'm struggling figuring out how to do so using the Flexbox Utilities documentation I ...
1
vote
1answer
16 views

Foundation reveal modal won't open

When you click the "client login" link at the top of this page, the reveal modal should appear. The HTML for it is correct for sure, so a script must be wrong. In the head of my page, I have these ...
1
vote
1answer
28 views

Deploy project created with foundation-cli?

I'm trying to figure out if there's any way to deploy this project https://github.com/nataliecardot/zeus-hosting-setup, preferably to GitHub Pages. No dist folder is created when I run foundation ...
2
votes
0answers
727 views

How do I fix this jquery security alert: “Your app contains one or more libraries with known security issues”

In my Play Developer console I see the following message for several Apache Cordova apps I have in my store: Security alert Your app contains one or more libraries with known security ...
0
votes
1answer
24 views

How to integrate php/apache into foundation 6 (Zurb Template) or vice versa?

I have a testproject running on the most recent version of ZURB Foundation, using the advanced ZURB template. Currently, backend and frontend each run on their own server. The frontend is ran by ...
2
votes
1answer
173 views

jquery events not firing using webpacker and coffeescript

Trying to build a new rails 6 application from scratch to replace a rails 5.2 application. Trying to use webpacker with foundation-site jquery and coffeescript After a bunch of searching I've got ...
0
votes
0answers
37 views

Foundation 6 Nested Modal, Z-index issue

I am trying to place the cross button on the top right corner as displayed in the image; the Z-index is not working for the nested modal.. It is a layer of Z-Index that has been used, .reveal-overlay ...
0
votes
0answers
12 views

How to nest grid-xy

I'd like to nest the Foundation grid-x. My problem is that #spanCells does not have the width of the parent #content container. It is just as wide as it needs to be. <div class="grid-container">...
2
votes
1answer
35 views

how to use zurb foundation along side bootstrap in Laravel Vue?

I have a template built in zurb foundation for a sub-domain, i want to use foundation along side bootstrap in my laravel Vue app, entire site uses bootstrap but a subdomain template requires ...
0
votes
1answer
66 views

Can't download the custom package of foundation zurb

I changed the value of color and body's width. I clicked on download button as usual but it returned have no file "/tmp/...". I understand that the hosting didn't zip the file for me to download. Is ...
0
votes
1answer
35 views

How to make 3 columns appear as 2 half width + 1 full width underneath on mobile

Thanks for taking a look. Using a modified version of Foundation.css from a custom BigCommerce theme, I have 3 columns displaying left-to-right as expected, but I would like the 3rd column to be ...
0
votes
1answer
54 views

Toggle menu - animate height

How to make a dropdown .top-bar? Foundation hides it by display: none; and i can't use transition height. Below header structure <div class="title-bar" data-responsive-toggle="example-...
0
votes
0answers
14 views

dynamically load JSON from JqueryAJAX into Foundation 6 Templates

So, I have some serverside data I want to load dynamically into my website. To do this, I use JqueryAJAX and the response is returned as JSON. As far as I understand, Foundation templates/helpers ...
1
vote
1answer
50 views

Webpack Sass compilation fails due to incompatible units

I am upgrading an old project that was using Grunt to Webpack 4 and the transition has been pretty seamless. Everything compiles correctly, except for sass files. When building webpack, I am greeted ...
0
votes
0answers
14 views

Foundation XY Grid - change hierarchy of cells on medium and small without grid-x height affecting layout

I'm currently trying to use source ordering to move an image to the left of 2 elements on a small screen, with one fullwidth element underneath. I then want to move the image to the right of all 3 ...
0
votes
0answers
10 views

How to use dropdown menus in ZURB FOUNDATION 6.4.1+

The situation is as follows: I want a page where the admin can change attributes of products. Therefore, the admin is supposed to select the respective product from a dropdown menu and THEN enter ...
0
votes
1answer
15 views

How to integrate further JS dependencies in ZURB FOUNDATION project?

I'm using the ZURB Template (ZURB foundation 6.4). I want to use dropdown menus and the like, which require the integration of further JS dependencies. Here is the official Documentation: https://...
0
votes
0answers
23 views

Zurb Foundation XY-grid produces inconsistent gutters

I am looking for a general solution to apply across the project for every scenario with grids following each other. Out of the box, when grids with .grid-margin-y following each other, half a grid ...
0
votes
0answers
17 views

Timber Debug Bar JavaScript TypeError: $(…).foundation is not a function app.js line 1

Would a , stop Timber variables from displaying on the page? Timber Debug Bar reports Foundation 5.5.2 JavaScript error but Browser Dev Tools Console contradicts those findings. Could Timber Debug Bar ...
0
votes
1answer
102 views

Foundation Cli css - primordials is not defined Foundation-cli

i'm executing sudo npm install --global foundation-cli Getting an error when creating foundation zurb project
0
votes
0answers
64 views

How to import Foundation 6.5 in Webpack-powered project?

I'm trying to import Foundation 6.5.3 in a project with Webpack 4.4 and getting SyntaxError: "import declarations may only appear at top level of a module" exports webpack:///./node_modules/...
0
votes
1answer
17 views

Background top-bar images Zurb Foundation and Flask template inheritance

I am using Flask to develop an application. As a front-end framework, I am using Zurb-Foundation. I have created a layout.html template and I am using template inheritance to extend it. The layout ...
0
votes
1answer
26 views

Cannot Get Zurb Foundation Modal to Close from scripts

I cannot for the life of me get this zurb foundation modal to close - the only functional 'solution' I have is a hack that throws an error. check the code comments for what I've already tried - ...
0
votes
0answers
24 views

Why does transmitting the PHPSESSID Cookie not work with jqueryAJAX having xhrFields: withCredentials: true?

I'm running a ZURB Foundation 6.4 (ZURB Template) website project which is based on webpack4, babel7 and gulp (taskrunner). As backend I have an XAMPP (Apache/php). Frontend is located in D:\...