Foundation grid system does not take effect

Question

Why the foundation grid system does not 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 cannot find:

.large-5 {
    width: 33.3333%;
}

---

Repo for the project here

Answer 1

You must import the foundation as

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

Since you already have includePath in your webpack.config

After debugging for a while, I found that the problem is that mix base-all includes a different mesh style by default

@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
)

, , base-all ( , XY XY , -).

-, .

1) , . ( )

2) - mixin ( , ? (https://github.com/sass/sass/issues/279)

, : css -. , , .

Answer 2

React + Foundation?

, , .

:

<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>

: https://react.foundation/