0

I like the idea of flex-grid and was wondering if I'm using it correctly. I started a build using Foundation 6 / SASS and did @include foundation-flex-grid;

While building a basic page I noticed in my DevTools that certain items from the Kitchen sink are using styles on items that have their displays set to block and float on them.

Example: .title-bar

<div class="title-bar">
        <div class="title-bar-left">
          <button class="menu-icon" type="button"></button>
          <span class="title-bar-title">Foundation</span>
        </div>
        <div class="title-bar-right">
          <button class="menu-icon" type="button"></button>
        </div>
      </div>

The elements .title-bar-left and .title-bar-right have corresponding floats on them. I know that floats are unnecessary in flex-grid.

My question(s):

  1. Should I keep building away using flex-grid or should I be doing something extra to remove/replace those styles ahead of time?

  2. It seems to me that the Kitchen Sink on the Foundation Site is tailored for the normal grid, is it safe to use these elements in flex-grid with little modification, or will it require lots of rewriting of SASS/CSS?

JAL
  • 41,701
  • 23
  • 172
  • 300
Moose
  • 1,270
  • 2
  • 19
  • 33

1 Answers1

0

For #2, 'Kitchen-sink' can pass true to turn on flex-grid like so:

@include foundation-everything(true);

They might have added this sometime in F6.1 or F6.2; official docs don't reflect this, but I put in a PR to.

For #1, might be more of a bug question than a best-usage issue, perhaps you should submit it?

tomByrer
  • 1,105
  • 12
  • 21