Merge pull request #396 from Garbee/doc-folder
Added docs folder with initial files. Pulled content from readme.master
Addy Osmani
commit
903b6d867b
65
README.md
65
README.md
|
|
@ -8,72 +8,15 @@
|
|||
|
||||
## Quickstart
|
||||
|
||||
[Download](https://github.com/google/web-starter-kit/releases/latest) the kit or clone this repository and build on what we include in the `app` directory.
|
||||
[Download](https://github.com/google/web-starter-kit/releases/latest) the kit or clone this repository and build on what is included in the `app` directory.
|
||||
|
||||
We provide 2 HTML starting points, from which you can choose:
|
||||
There are two HTML starting points, from which you can choose:
|
||||
|
||||
- `index.html` - the default starting point, containing layout and a slide-out menu
|
||||
- `basic.html` - includes no layout
|
||||
|
||||
## Tooling
|
||||
|
||||
If you would like to use the optional tooling we provide, make sure your system has [Node.js](http://nodejs.org), [Ruby](https://www.ruby-lang.org/), [gulp.js](http://gulpjs.com) and [Sass](http://sass-lang.com/install) installed.
|
||||
|
||||
### Node
|
||||
|
||||
Let's check to see if you already have Node installed. Bring up a terminal and type `node --version`. If Node responds, and if it shows a version at or above v0.10.x, proceed to checking if you have Ruby installed too. If you require Node, go to [nodejs.org](http://nodejs.org/) and click on the big green Install button.
|
||||
|
||||
### Ruby
|
||||
|
||||
Bring up a terminal and type `ruby --version`. If Ruby responds, and if it shows a version number at or above 1.8.7 then type `gem --version`. If you don't see any errors, proceed to installing the Sass gem. If you require Ruby, it can be installed from the [Ruby downloads](https://www.ruby-lang.org/en/downloads/) page.
|
||||
|
||||
### Sass
|
||||
|
||||
Bring up a terminal and type `sass --version`. If Sass is installed it should return a version number at or above 3.3.x. If you don't see any errors, proceed to the Gulp installation. If you need to install Sass, see the command-line instructions on the [Sass installation](http://sass-lang.com/install) page.
|
||||
|
||||
### Gulp
|
||||
|
||||
Bring up a terminal and type `gulp --version`. If Gulp is installed it should return a version number at or above 3.5.x. If you don't see any errors, proceed to the Gulp commands section. If you need to install Gulp, open up a terminal and type in the following:
|
||||
|
||||
```sh
|
||||
$ npm install --global gulp
|
||||
```
|
||||
|
||||
This will install Gulp globally. Depending on your user account, you may need to gain elevated permissions using `sudo` (i.e `sudo npm install --global gulp`). Next, install the local dependencies Web Starter Kit requires:
|
||||
|
||||
```sh
|
||||
$ npm install
|
||||
```
|
||||
|
||||
That's it! You should now have everything needed to use the Gulp tools in Web Starter Kit.
|
||||
|
||||
### Gulp Commands
|
||||
|
||||
You can now use Gulp with the following commands to stay productive during development:
|
||||
|
||||
#### Watch For Changes & Automatically Refresh Across Devices
|
||||
|
||||
```sh
|
||||
$ gulp serve
|
||||
```
|
||||
|
||||
This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.
|
||||
|
||||
### Build & Optimize
|
||||
|
||||
```sh
|
||||
$ gulp
|
||||
```
|
||||
|
||||
Build and optimize the current project, ready for deployment. This includes linting as well as image, script, stylesheet and HTML optimization and minification.
|
||||
|
||||
#### Performance Insights
|
||||
|
||||
```sh
|
||||
$ gulp pagespeed
|
||||
```
|
||||
|
||||
Runs the deployed (public) version of your site against the [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) API to help you stay on top of where you can improve.
|
||||
Be sure to look over the [installation docs](docs/install.md) to verify your environment is prepared to run WSK.
|
||||
Once you have verified that your system can run WSK, check out the [commands](docs/commands.md) available to get started.
|
||||
|
||||
## Web Performance
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
There are many commands available to help you build and test sites. Here are a few highlights to get started with.
|
||||
|
||||
## Watch For Changes & Automatically Refresh Across Devices
|
||||
|
||||
```sh
|
||||
$ gulp serve
|
||||
```
|
||||
|
||||
This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.
|
||||
|
||||
## Build & Optimize
|
||||
|
||||
```sh
|
||||
$ gulp
|
||||
```
|
||||
|
||||
Build and optimize the current project, ready for deployment.
|
||||
This includes linting as well as image, script, stylesheet and HTML optimization and minification.
|
||||
|
||||
## Performance Insights
|
||||
|
||||
```sh
|
||||
$ gulp pagespeed
|
||||
```
|
||||
|
||||
Runs the deployed (public) version of your site against the [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) API to help you stay on top of where you can improve.
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
# Installation
|
||||
|
||||
To take advantage of Web Starter Kit you need to:
|
||||
1. Install the dependencies if you don't already have them.
|
||||
1. Get a copy of the code.
|
||||
1. Modify the application to your liking.
|
||||
1. Deploy your production code.
|
||||
|
||||
## Dependencies
|
||||
|
||||
The dependencies are:
|
||||
* [Node.js](http://nodejs.org)
|
||||
* [Ruby](https://www.ruby-lang.org/)
|
||||
* [gulp.js](http://gulpjs.com)
|
||||
* [Sass](http://sass-lang.com/install)
|
||||
|
||||
### Node
|
||||
|
||||
Bring up a terminal and type `node --version`.
|
||||
If Node responds with a version at or above v0.10.x then check for a [Ruby](#ruby) installation.
|
||||
If you require Node, go to [nodejs.org](http://nodejs.org/) and click on the big green Install button.
|
||||
|
||||
### Ruby
|
||||
|
||||
Bring up a terminal and type `ruby --version`.
|
||||
If Ruby responds with a version number at or above 1.8.7 then type `gem --version`.
|
||||
If you don't see any errors then you may proceed looking for [Sass](#sass).
|
||||
If you require Ruby, it can be installed from the [Ruby downloads](https://www.ruby-lang.org/en/downloads/) page.
|
||||
|
||||
### Sass
|
||||
|
||||
Make sure you have [Ruby](#ruby) installed before proceeding.
|
||||
Bring up a terminal and type `sass --version`.
|
||||
If Sass is installed it should return a version number at or above 3.3.x.
|
||||
If you don't see any errors, proceed to check for [gulp](#gulp).
|
||||
If you need to install Sass, see the command-line instructions on the [Sass installation](http://sass-lang.com/install) page.
|
||||
|
||||
### Gulp
|
||||
|
||||
Bring up a terminal and type `gulp --version`.
|
||||
If Gulp is installed it should return a version number at or above 3.5.x.
|
||||
If you need to install Gulp, open up a terminal and type in the following:
|
||||
|
||||
```sh
|
||||
$ npm install --global gulp
|
||||
```
|
||||
|
||||
This will install Gulp globally. Depending on your user account, you may need to gain elevated permissions using `sudo` (i.e `sudo npm install --global gulp`). Next, install the local dependencies Web Starter Kit requires:
|
||||
|
||||
```sh
|
||||
$ sudo npm install
|
||||
```
|
||||
|
||||
That's it! You should now have everything needed to use the Web Starter Kit.
|
||||
|
||||
# Getting the code
|
||||
|
||||
Once you have all of the dependencies installed, you only need to get the code.
|
||||
[Download](https://github.com/google/web-starter-kit/archive/v0.4.0.zip) a zip of version 0.4.0.
|
||||
Extract the files where you want to work from.
|
||||
Then start building awesome things!
|
||||
|
||||
You may also want to get used to some of the [commands](commands.md) available.
|
||||
Loading…
Reference in New Issue