zurb-foundation

I am very new to Front-end development and Foundation. I am trying to get <div class="main-header"> 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 full image. I also wanted the <div class="large-6 large-offset-6 columns"> to sit above it on a mobile device – is that possible? The HTML: <!-- MAIN HEADER --> <div class="main-header"> <div class="row"> <div class="large-6 large-offset-6 columns"> <h1 class="logo">BleepBleeps</h1> <h3>A family of little friends<br>that make parenting easier</h3> <

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 created the project following the steps on the foundation site, but I can't seem to get rid of this error. Foundation and jQuery look like they are included and linked up correctly in the index.html file, and the linked app.js file is including $(document).foundation(); Does anyone know what is causing this error? and what a solution might be? This

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 and friends). This leads to long SCSS compile times and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times. To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss , then

I'm trying Zurb Foundation 5. So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into: .row { max-width: rem-calc(1170); } It seems like it doesn't know about rem-calc function. How to make it calculate rem-calc properly? cimmanon Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes