Add/edit README docs for example apps (#201)

* Added example root level README.md

* Add polaris styleguide links

* Reword and steamline readme docs

* Clean up sentences before Gord sees 😅

* More sentence cleaning

* styleguide -> Styleguide

* 🔥 paragraph
This commit is contained in:
Ismail Syed
2017-04-16 22:20:44 -04:00
committed by GitHub
parent d469215f85
commit ea4fe364ed
5 changed files with 21 additions and 9 deletions

11
examples/README.md Normal file
View File

@@ -0,0 +1,11 @@
# Example apps
Listed below are various methods an application could consume Polaris. Each example is stand alone app using Polaris as the UI component library.
- [create-react-app ](https://github.com/Shopify/polaris-internal/tree/master/examples/create-react-app)
- [webpack](https://github.com/Shopify/polaris-internal/tree/master/examples/webpack)
- [Browserify](https://github.com/Shopify/polaris-internal/tree/master/examples/browserify)
- [CDN Styles](https://github.com/Shopify/polaris-internal/tree/master/examples/cdn-styles)
For more details on Polaris, visit the [Polaris Style Guide](https://polaris.shopify.com/)

View File

@@ -1,5 +1,5 @@
# Example app using Browserify
This example app demonstrates [Polaris](https://polaris.shopify.com) integrated into a [React](https://facebook.github.io/react/) project using [Browserify](http://browserify.org/) as a module bundler.
Demonstrates [Polaris](https://polaris.shopify.com) inside a [React](https://facebook.github.io/react/) app bundled via [Browserify](http://browserify.org/).
## Dependencies
- [yarn](https://github.com/yarnpkg/yarn/) or [npm](https://www.npmjs.com/)
@@ -37,6 +37,6 @@ npm start
```
This will generate a `./build` directory with an `index.html` and `bundle.js` file. Open the `./build/index.html` file into a web browser to see the example application.
`./build/index.html` loads all the Polaris styles through the Polaris CDN and references `./build/bundle.js` file for all the JavaScripts your applications requires.
`./build/index.html` loads all the Polaris styles via the Polaris CDN and scripts via `./build/bundle.js`.
The `start` npm script uses `watchify` to recompile `./build/bundle.js` with changes you've made in the `./src` directory. Reload the `./build/index.html` page in your browser to see the updated changes.

View File

@@ -1,6 +1,6 @@
# Example App: CDN Styles
This demonstrates Polaris components using pure HTML/CSS. The only requirement is to include the CSS file in your HTML document. Once that step is completed, you can refer to the [Quilt Style Guide]() for HTML sample implementations of our components.
Demonstrates Polaris components using pure HTML/CSS. The only requirement is to include the CSS file in your HTML document. Once that step is completed, you can refer to the [Polaris Style Guide](https://polaris.shopify.com/) for HTML sample implementations of our components.
## Dependencies
@@ -11,4 +11,4 @@ The CDN hosted CSS file needs to be included in your HTML document.
```html
<link rel="stylesheet" href="https://sdks.shopifycdn.com/quilt/latest/quilt.css">
```
Refer to the [Quilt Style Guide]() for more HTML sample implementations of our components.
Refer to the [Polaris Style Guide](https://polaris.shopify.com/) for more HTML sample implementations of our components.

View File

@@ -1,5 +1,5 @@
# Example App: Create React App
This example app demonstrates Polaris integrated into the create-react-app starter project with minimal setup and configuration.
Demonstrates Polaris inside a [create-react-app](https://github.com/facebookincubator/create-react-app) project with minimal setup and configuration.
## Dependencies
- [yarn](https://github.com/yarnpkg/yarn/) or [npm](https://www.npmjs.com/)

View File

@@ -1,5 +1,5 @@
# Example app using webpack
This example app demonstrates Polaris integrated into the React project using `webpack` and `webpack-dev-server` with minimal setup and configuration.
Demonstrates Polaris inside a React app served via `webpack` and `webpack-dev-server`.
## Dependencies
- [yarn](https://github.com/yarnpkg/yarn/) or [npm](https://www.npmjs.com/)
@@ -22,7 +22,7 @@ npm install
```
### Development
Start your development server.
Run the local `webpack` development server.
**With Yarn**
@@ -36,6 +36,8 @@ yarn start
npm start
```
Open http://localhost:8080 in your browser and you should see the Polaris example application.
### Build
You can bundle up your application using the preconfigured webpack build.
@@ -51,5 +53,4 @@ yarn build
npm build
```
This will generate a `./build` directory with an `index.html` and `bundle.js` file. The `index.html` loads all the Polaris styles through the Polaris CDN and references `bundle.js` file for all the JavaScripts your applications requires.
This generates a `build` directory containing `index.html` and `bundle.js`. The index loads all Polaris styles via the Polaris CDN and the application scripts via `bundle.js`