The foundation grid system does not take effect

Question

Why the foundation grid system doesn't affect my div:

  render: function(){
    var {todos,showCompleted,searchText} = this.state;
    var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText);
    return (
      <div>
        <h1 className="page-title">Todo App</h1>

        <div className="row">
          <div className="column small-centered small-5 medium-6 large-5">
            <div className="container">
              <TodoSearch onSearch = {this.handleSearch} />
              <TodoList todos ={filteredTodos} onToggle ={this.handleToggle}/>
              <AddTodo onAddTodo ={this.handleAddTodo}/>
            </div>
         </div>
       </div>
      </div>
    );
  }

---

I use firebug to debug the style : and can't find :

.large-5 {
    width: 33.3333%;
}

---

A repo to the project is here

Answer 1

You should import foundation as

@import '~foundation-sites/scss/foundation';

Since you already have the includedPath in your webpack.config

After debugging for a while, i found that the issue is that foundation-everything mixin includes by default another grid style

@mixin foundation-everything(
  $flex: true, //You can test this by modifying it directly in your node_modules, set it to false
  $prototype: false
) {
  @if $flex {
    $global-flexbox: true !global;
  }

  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @if $xy-grid {
      @include foundation-xy-grid-classes;
    }
    @else {
      @include foundation-flex-grid;
    }
  }
  //more scss here
)

and that is the reason as to why your classes do not apply the expected styles, because different classes are generated according to the foundation-everything mixin (specifically the XY grid is generated instead of the one you expect, foundation-grid).

You can approach this in different ways, depending on your app.

1) You could include the exact set of foundation styles you require in your project. (my recommendation)

2) Somehow alter the mixin (i don't think dynamic imports are a thing yet? (https://github.com/sass/sass/issues/279)

There might be other options such as: generating the css once and including it in your app directly or using the react-foundation package.Again, it depends on what you need.

Answer 2

Are using React + Foundation ?

I don't think thats how you use the grid system.

For your case might be like this:

<div className="grid-basics-example">
  <Row className="display">
    <Column small={5} medium={6} large={5}>
       <TodoSearch onSearch = {this.handleSearch} />
       <TodoList todos ={filteredTodos} onToggle ={this.handleToggle}/>
       <AddTodo onAddTodo ={this.handleAddTodo}/>
    </Column>
  </Row>
</div>

Reference: https://react.foundation/