Menu icon Foundation
Should "@include foundation-float-classes;" be removed for flexbox?

I'm new to Foundation. For the Basic template, I'd like to verify one of the steps for enabling flexbox support in Zurb Foundation 6.2.4. Should the line "@include foundation-float-classes;" in the app.scss file be commented out (like the line "@include foundation-grid;") or left enabled? The documentation isn't 100% clear:

http://foundation.zurb.com/sites/docs/flexbox.html

...open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set $global-flexbox to true, and remove the @include for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):

$global-flexbox: true;

// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;

"

Thank you.

Jim

flexboxapp.scss

I'm new to Foundation. For the Basic template, I'd like to verify one of the steps for enabling flexbox support in Zurb Foundation 6.2.4. Should the line "@include foundation-float-classes;" in the app.scss file be commented out (like the line "@include foundation-grid;") or left enabled? The documentation isn't 100% clear:

http://foundation.zurb.com/sites/docs/flexbox.html

...open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set $global-flexbox to true, and remove the @include for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):

$global-flexbox: true;

// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;

"

Thank you.

Jim

Rafi Benkual almost 3 years ago

 That looks right! I comment out the float classes and comment in the flex classes.

James Watkin over 2 years ago

If you look at this file: bower_components/foundation-sites/scss/foundation.scss in the v6.3.0 ZURB template, the embedded conditional logic suggests that the foundation-float-classes should always be included, regardless of the flex setting. However, in Lesson #150, starting at 1:45, it's shown that the foundation-float-classes should be commented out when the flex setting is enabled. Is there an explanation for this discrepancy?

Thank you.

Jim

 

Here's that portion of code from the bower_components/foundation-sites/scss/foundation.scss file: 

@mixin foundation-everything($flex: false) {
  @if $flex {
    $global-flexbox: true !global;
  }

  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @include foundation-flex-grid;
  }
  @include foundation-typography;
  @include foundation-forms;
  @include foundation-button;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-card;
  @include foundation-close-button;
  @include foundation-menu;
  @include foundation-menu-icon;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-responsive-embed;
  @include foundation-label;
  @include foundation-media-object;
  @include foundation-off-canvas;
  @include foundation-orbit;
  @include foundation-pagination;
  @include foundation-progress-bar;
  @include foundation-slider;
  @include foundation-sticky;
  @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  @include foundation-tabs;
  @include foundation-thumbnail;
  @include foundation-title-bar;
  @include foundation-tooltip;
  @include foundation-top-bar;
  @include foundation-visibility-classes;
  @include foundation-float-classes;

  @if $flex {
    @include foundation-flex-classes;
  }
}