Search code examples
javascriptcsszurb-foundation-5

Foundation 5 off-canvas menu minimum code?


I would like to avoid adding the entire Foundation library to my site in order to get one single feature -- the off-canvas menu. Does anyone know how to get just necessary js and css required to deliver the menu functionality?


Solution

  • Actually you can! I use a default foundation_settings.sass file (github repo) in which I override the styles if needed, and on the bottom of it instead of including the whole foundation, I include individual modules.

    Maybe you have an app.sass file where you import foundation, but it's the same principle either way.

    For example:

    // @import 'foundation'; <-- nope
    @import "foundation/components/global";
    @import "foundation/components/grid";
    // @import "foundation/components/visibility";
    @import "foundation/components/block-grid";
    // @import "foundation/components/type";
    // @import "foundation/components/buttons";
    @import "foundation/components/forms";
    // @import "foundation/components/custom-forms";
    // @import "foundation/components/button-groups";
    // @import "foundation/components/dropdown-buttons"
    ...
    

    You can also read about it in Foundatoin docs here.