Questions tagged [zurb-foundation]

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

ZURB Foundation acts as framework. The latest versions of Foundation offers customization tools to customize the downloaded package of the framework. It is also fully compatible with layouts.

Resources :

View Latest Release | View Releases history


Related tags :

5132 questions
436
votes
34 answers

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; }
user2213682
  • 4,375
  • 3
  • 14
  • 6
367
votes
8 answers

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.js:4. I…
FreddieE
  • 3,793
  • 2
  • 10
  • 7
108
votes
10 answers

bower command not found windows

I am having huge problems trying to use bower (to install foundation 5) or get anything bower related to work on the command line. I've installed ruby 1.9.3 git (with run from command prompt option) Nodejs I've successfully ran npm install -g…
trickydisco
  • 1,191
  • 2
  • 8
  • 5
102
votes
3 answers

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 questions, in detail, are marked in bold print.) I…
98
votes
7 answers

Max-Width vs. Min-Width

Most of the tutorials I'm reading on using Media Queries are demonstrating the use of min-width, but I'm rarely seeing people using max-width. Is this some sort of design trend, or pattern, why people are using min-width over max-width? For example,…
James Jeffery
  • 12,093
  • 19
  • 74
  • 108
66
votes
15 answers

Full-screen responsive background image

I am very new to Front-end development and Foundation. I am trying to get
to be a full screen image that scales down responsively. Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the…
Tom Rogers
  • 719
  • 1
  • 7
  • 10
63
votes
9 answers

remove borders around html input

I want to create a search function for my web app. here are the looks on FF & IE, it is ok without strange border Firefox IE and here are the look on Chrome & Safari, it has strange border around the input element Chrome Safari Here is my html &…
Timeless
  • 7,338
  • 9
  • 60
  • 94
60
votes
11 answers

Prevent href="#" link from changing the URL hash

I have a site that already takes advantage of the hash in the URL and I don't want it changed. When I use Zurb Foundation and use href="#" for the menu item, clicking on it removes the previous hash value. How can I override this behavior? Update: I…
Liron Harel
  • 10,819
  • 26
  • 118
  • 217
55
votes
12 answers

Responsive Highcharts not sizing correctly until window resize

I'm using Highcharts within Zurb's Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the same row within 6-column divs. When the page loads, the featured chart…
37
votes
9 answers

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

On zurb foundation's website at http://foundation.zurb.com/docs/reveal.php they listed some Options including open: callback function that triggers 'before' the modal opens. opened: callback function that triggers 'after' the modal is…
33
votes
15 answers

zurb foundation is it possible to have full row width

I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as class="row navigation" class="row footer" I tried looking for how to fix this…
Chou One
  • 627
  • 1
  • 13
  • 21
32
votes
5 answers

zurb foundation center content in the grid

I'm trying to center horizontally an image into a zurb column but it seems impossible. I tried everything, searched everywhere, but I cant get it to work. Here is my code:

Ando
  • 1,802
  • 4
  • 25
  • 47
30
votes
6 answers

AngularJS: initialize ZURB Foundation JS

I am using both AngularJS and Foundation. To initialize Foundation JS, you have to make the following call: $(document).foundation(); What would be the best way to make this call in an AngularJS application? Code examples would be…
Tyson Nero
  • 2,048
  • 5
  • 26
  • 36
29
votes
2 answers

How can one import only variables and mixins from Sass stylesheets?

I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button…
dymk
  • 887
  • 2
  • 10
  • 21
27
votes
4 answers

How do I set up the Zurb Foundation icons?

I have downloaded the Zurb Foundation icon fonts files http://zurb.com/playground/foundation-icon-fonts-3 I unzipped them and placed the /foundation-icons folder into my /css folder. Is this correct? I am trying to follow the documentation "How to…
Beast_Code
  • 3,097
  • 12
  • 43
  • 54
1
2 3
99 100