This is example of a page off of Nike.com that has been made responsive. There are two parts to this example:

• Static HTML/CSS located at index.html.
• React-based components located at index-components.html

The bulk of the work only took several hours, as can be seen by the Punchcard.

Clone the repository.

git clone https://github.com/breachofmind/nike-example.git

Install dependencies, Using yarn or npm (depending on how cool you are):

yarn install
# or...
npm install

Run the Browsersync server.

npm run dev

The server should run at http://localhost:3000. Try the following files:

• HTML/CSS Version
• React-based Component App

Alternatively, you could open the file in your browser without the server running: public/index.html. However, inline SVG with symbols will not work. index-components.html will not work at all, because state.json cannot be served in this way.

To use webpack while making changes to files, make sure you have the webpack cli installed and run:

webpack --watch --progress

• The original assets from nike.com changed while I was making this, so I used the most recent ones.
• Source styles are written in stylus because that's what the folks at Nike use.
• Only the Foundation 6 Flex Grid was used for base styles.
• Styles are organized in the SMACSS way.
• For time sake, I chose not to minify anything. Normally, production stuff would be minified.
• The react application uses a simple /public/data/state.json to mock how a server would return data. The page layout is determined by this file, so try changing some values to see how the app changes.