Foundation 5 Build Isn't Complete

Imported Foundation 5 components doesn't output as CSS

I think it works now, I found a solution here: http://foundation.zurb.com/forum/posts/19040-no-foundation-styling-imported-to-appcss-sass-f5

It was a bug on line 12 in _functions.scss - I guess my version of Foundation is from before they fixed that. I replaced:

@if (index($modules, $name) == false) {

with

@if(not index($modules, $name)) {

Disable Magellan in Foundation 5

Ok, simple really.

I literally just removed ="fixed" in

<div class="nav" data-magellan-expedition="fixed">

Undefined variable: compilation errors in Foundation 5 Sass project

You need to uncomment global variable $font-weight-normal
It's in _settings.scss line 44

Is Foundation 5 class label.inline possible only to use for @media medium-up?

Since you said you're using SASS, you could make a custom class and include the inline label styling for medium screens and up. Here's how you would do that:

label {
    &.inline-for-medium-up { 
        @media #{$medium} {
            @include form-label(inline,false);
        }
    }
}

<div class="row">
    <div class="medium-2 columns">
        <label class="inline-for-medium-up">
            Label
        </label>
    </div>
    <div class="medium-10 columns">
        <input type="text" />
    </div>                                    
</div>

Explanation:

With SASS, you're able to create mixins of CSS and then include them wherever you would like. Form-label is a mixin that foundation created and it contains all of the form label styles. It has two parameters you can add, one is inline. So if you include the mixin, and add the inline parameter, sass will include all of the css for an inline label. I included that mixin with the parameter inside of a media query that says to only include the styles if the screen is of medium or greater size.

Foundation for Emails won't compile for production - SCSS folder not being created

Fixed it. The problem was that I had this line at the top of my HTML:

<link rel="stylesheet" href="assets/scss">

Can't initialize orbit on Foundation 5

sorry for opening up an old post, but I was stuggling with the same problem, and solved it.

I've also used the shown code on foundation.zurb.com docs. It just doesn't work.
It started working as soon as I removed the class attribute from the <ul> and using data-orbit.

After that, I noticed that in the example, they show html for the prev and next buttons, and for the bullets. You don't need that to place in your code. It's redundant and will interfere with the generated controls.

So, long story short, my slider ended up like this:

<div class="row">
    <div class="large-12">
        <ul data-orbit>
            <li>
                <img src="http://lorempixel.com/1200/1200" alt="slide 1">
                <div class="orbit-caption">
                    Caption 1
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800" alt="slide 2">
                <div class="orbit-caption">
                    Caption 2
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/800/1200" alt="slide 3">
                <div class="orbit-caption">
                    Caption 3
                </div>
            </li>
        </ul>
    </div>
</div>

So notice: NO class on your <ul>, that seems to be the solution. At least it was in my case.

Zurb Foundation 5 and Jquery 3 incompatible?

Yes, Zurb Foundation 5 and jQuery 3 are incompatible. Foundation still uses the load function, which was deprecated 4 years ago in jQuery 1.8 and finally removed in jQuery 3.0. Since there is another jQuery Function called load, which is called instead, you get this rather cryptic error message.

Even the current relased Version of Zurb Foundation 6.2.3 and jQuery 3 are incompatible. The fix for your problem is already merged and should be released with version 6.2.4 which was to be released about 2 months ago, but still isn't. (Its 78% complete according to the GitHub page)

So I guess the only solution is to a) ignore the error or b) patch the code yourself as described in this answer.

Update: Foundation 6.2.4 was released October 21, 2016 and now supports jQuery 3.

Best practice for Laravel 4 + Zurb Foundation 5?

I have the same issue as using Bootstrap SCSS version for Admin & Foundation SCSS for the frontend. I noticed also that both css frameworks come as composer packages however the issue you have with this approach is that you generally use other Javascript files in a development that will be merged also so using the composer versions just adds to the confusion.

The best solution i found was using either gulp or grunt with bower at the top level of your Laravel build. Rather that go through the configuration for you there is a good article at http://blog.elenakolevska.com/using-grunt-with-laravel-and-bootstrap/ that goes over a bootstrap integration but this can be tweaked for Foundation. This solution is good as grunt has many of the other popular javascript libraries that you may use in your project also..

Alternatively you could use an application like codekit and create a compass project to manage the merging & compiling of your assets into the public folder. As a side note if using git again your would need to exclude additional folders from your project.

If you think of your SCSS framework files as development assets there is no real need for them to be in the project as you only really need one version of Foundation on your development machine.

Your custom SCSS changes can be added to your Laravel project as modules ie a navigation module, via a private composer repo for the project or just added to the Compass project at development time. Your public folder should only be referencing the final merged style.css & java.js files for example. Any images from the framework can then just be copied over to the public folder ie icons etc.. Hope that helps..

---

Related Topics