Foundation not loading (styles)

What did you do?

Installed react-foundation step-by-step;

1. npm install -g create-react-app
2. create-react-app test
3. cd test
4. npm install react-foundation
5. I replaced the code in App.js to the following;

import React, { Component } from 'react';
import { Column, Row } from 'react-foundation';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className="gridgrid">
          <Row>
            <Column small={3}>
              <div>1</div>
            </Column>
            <Column small={3}>
              <div>2</div>
            </Column>
            <Column small={3}>
              <div>3</div>
            </Column>
            <Column small={3}>
              <div>4</div>
            </Column>
          </Row>
        </div>
      </div>
    );
  }
}

export default App;

1. npm start

What did you expect to happen?

I expected to see a grid system with 1 row and 4 columns (as in the examle on https://react.foundation/).

What actually happened?

When I look at the Foundation component’s CSS in the browser, no CSS is applied. It looks like there’s no foundation.css available. Al elements (columns) are placed under each other.

What version of this module are you using?

0.7.0

[horaciocoronel]

You need to install foundation-sites npm and then add the import 'foundation-sites/dist/css/foundation.min.css'; in index.js

[gpspake]

This library simply provides react components that generate foundation markup so you can type <Row> instead of <div className="row"></div> It expects you to include the css yourself so including styles would be outside of the scope of this project. You just need to make sure to include the foundation css separately just like you would if you weren’t using this package.