mirror of
https://github.com/HackPlan/polaris-react.git
synced 2026-04-29 01:35:39 +08:00
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:
11
examples/README.md
Normal file
11
examples/README.md
Normal 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/)
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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/)
|
||||
|
||||
@@ -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`
|
||||
|
||||
Reference in New Issue
Block a user