Menu icon Foundation
Foundation 5.2.1 breaks selective include

Here is what our selective include looked like when on Foundation 5.2.0:

// Or selectively include components
@import
   "foundation/components/accordion",
   "foundation/components/alert-boxes",
   "foundation/components/block-grid",
   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
  "foundation/components/tables",
//   "foundation/components/tabs",
  "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
   "foundation/components/offcanvas",
   "foundation/components/visibility";
            

         

After updating to Foundation 5.2.1, it breaks. Undefined $column-gutter.

So we changed it to include the grid file first.

Now everything works.

Is that just us, or is this an FYI the community should know about?

Seems a bit unexpected.

components5.2.1

Here is what our selective include looked like when on Foundation 5.2.0:

// Or selectively include components
@import
   "foundation/components/accordion",
   "foundation/components/alert-boxes",
   "foundation/components/block-grid",
   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
  "foundation/components/tables",
//   "foundation/components/tabs",
  "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
   "foundation/components/offcanvas",
   "foundation/components/visibility";
            

         

After updating to Foundation 5.2.1, it breaks. Undefined $column-gutter.

So we changed it to include the grid file first.

Now everything works.

Is that just us, or is this an FYI the community should know about?

Seems a bit unexpected.

Jon Bravata over 5 years ago

I ran into the same issue with the Rails gem after updating to 5.2.1. The solution of moving the Grid include first worked for me as well.