Foundation JS

sage
1

Hey guys!

I’m changing Bootstrap for Foundation.

I’ve successfully changed main.scss.example to include the path for ../../bower_components/foundation/scss/foundation.scss - installed via bower install foundation --save

I’ve changed the location in manifest.json to include main.scss as included in all the instructions for removing Bootstrap less and changing it to bootstrap sass.

Running gulp I see the foundation css after it’s made it’s way through the gulpfile on the dev site.

My problem is this: when I change my manifest.json file to include foundation.js via

    "foundation.js": {
      "bower": ["foundation"]
    }

it adds the files to the dist/scripts folder correctly, but I no longer have any styles on my site.

Debugging a bit further, I see that now main.css in my dist/styles folder is empty with the exception of these two lines:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiI8bm8tb3V0cHV0PiJ9 */
/*# sourceMappingURL=main.css.map */

and now my main.scss file only has these lines in it, having removed my call to ../../bower_components/foundation/scss/foundation.scss

// bower:scss
// endbower
2

My entire manifest.json file:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss",
        "styles/normalize.scss"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "foundation.js": {
      "bower": ["foundation"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  },
  "config": {
    "devUrl": "caltonnew.dev"
  }
}
3

Remove the main.scss and normalize.scss additions you made to manifest.json

You’ll need to add a main override in bower.json for Foundation to specify scss/foundation.scss and scss/normalize.scss

Once you do that, wiredep will automatically add those imports in your main.scss

4 
"files": [
        "styles/main.scss",
        "styles/normalize.scss"
      ],

This should be

"files": [
        "styles/main.scss",
      ],

and you should be importing normalize.scss in your main.scss @import "normalize"

5

This is what I had before in my main.scss file.

The moment I run gulp the file empties itself out.

// bower:scss
@import "../../bower_components/foundation/scss/foundation.scss";
@import "../../bower_components/foundation/scss/normalize.scss";
// endbower

I have

"main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    }

in my mainfest.json

6

Did you read my post? wiredep is removing those import’s because you don’t have those files defined in a main override in bower.json for Foundation.

7

After running gulp I’m left with just this:

// bower:scss
// endbower

8

I did, but I also read Austin’s as well. I’ll try yours now.

9

Never manually edit the wiredep block at the top of the main stylesheet. Once you make the changes to bower.json and run gulp again, you’ll be good to go.

10

@brandon everything inside of // bower:scss is dynamically generated. https://github.com/taptapship/wiredep#bower-overrides

11

Here’s an example of a bower.json that works for me:

{
  "name": "roots",
  "version": "7.0.2",
  "homepage": "http://roots.io",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "assets/vendor"
  ],
  "dependencies": {
    "modernizr": "2.8.2",
    "jquery": "~2.1.3",
    "foundation": "~5.5.0"
  },
  "overrides": {
    "foundation": {
      "main": [
        "js/foundation/foundation.js",
        "js/foundation/foundation.dropdown.js",
        "js/foundation/foundation.offcanvas.js",
        "js/foundation/foundation.orbit.js",
        "js/foundation/foundation.topbar.js",
        "js/foundation/foundation.equalizer.js",
        "js/foundation/foundation.tab.js",
        "scss/foundation/components/_accordion.scss",
        "scss/foundation/components/_block-grid.scss",
        "scss/foundation/components/_breadcrumbs.scss",
        "scss/foundation/components/_buttons.scss",
        "scss/foundation/components/_dropdown-buttons.scss",
        "scss/foundation/components/_dropdown.scss",
        "scss/foundation/components/_forms.scss",
        "scss/foundation/components/_grid.scss",
        "scss/foundation/components/_inline-lists.scss",
        "scss/foundation/components/_labels.scss",
        "scss/foundation/components/_offcanvas.scss",
        "scss/foundation/components/_orbit.scss",
        "scss/foundation/components/_pagination.scss",
        "scss/foundation/components/_reveal.scss",
        "scss/foundation/components/_side-nav.scss",
        "scss/foundation/components/_tables.scss",
        "scss/foundation/components/_tabs.scss",
        "scss/foundation/components/_thumbs.scss",
        "scss/foundation/components/_top-bar.scss",
        "scss/foundation/components/_type.scss",
        "scss/foundation/components/_visibility.scss"
      ]
    }
  }
}
3 Likes
12

Just saw your replies - thank you. I appreciate you doing that for me @austin.

13

This topic was automatically closed after 4 hours. New replies are no longer allowed.