Edit copy in Tutorial Part Two (#2229)

* Add additional copy edits to Tutorial Part Two * tweak the tweaks
gatsbyjs · Sep 25, 2017 · c6f4f37 · c6f4f37
1 parent 47b77d1
commit c6f4f37
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
@@ -36,9 +36,9 @@ Components become the base building blocks of your site. Instead of being limite
 
 ## Creating global styles
 
-Every site has some sort of global style. This includes things like the site's typography and background colors. These styles set the overall feel of the site — much like the color and texture of a wall sets the overall feel of a room.
+Every site has some sort of global style. This includes things like the site's typography and background colors. These styles set the overall feel of the site—much like the color and texture of a wall sets the overall feel of a room.
 
-Often people will use something like Bootstrap or Foundation for their global styles. The problem with these however is they're difficult to customize and they're not designed to work well with React components.
+Often people will use something like Bootstrap or Foundation for their global styles. The problem with these, however, is they're difficult to customize and they're not designed to work well with React components.
 
 So for this tutorial let's explore a JavaScript library called [Typography.js](https://github.com/kyleamathews/typography.js) that generates global styles and works particularly well with Gatsby and React.
 
@@ -63,15 +63,15 @@ const typography = new Typography({
 })
 ```
 
-## Gatsby Plugins
+## Gatsby plugins
 
 But before we can get back to building and trying out Typography.js, let's make a quick diversion and talk about Gatsby plugins.
 
 You're probably familiar with the idea of plugins. Many software systems support adding custom plugins to add new functionality or even modify the core workings of the software.
 
 Gatsby plugins work the same way.
 
-Community members (like you!) can contribute plugins (small amounts of JavaScript code) that then others can use when building Gatsby sites.
+Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites.
 
 There's already dozens of plugins! Check them out at the [plugins section of the site](/docs/plugins/).
 
@@ -98,13 +98,13 @@ This is the minimal setup for a Gatsby site.
 
 To install a plugin, there's two steps. First you install the plugin's NPM package and second you add the plugin to your site's `gatsby-config.js`.
 
-Typography.js has a Gatsby plugin so let's install that by running.
+Typography.js has a Gatsby plugin, so let's install that by running:
 
 ```shell
 npm install --save gatsby-plugin-typography
 ```
 
-Next create a file at the base of your site named `gatsby-config.js`. This is where you add plugins to a site along with other site configuration.
+Next, create a file at the root of your project folder named `gatsby-config.js`. This is where you add plugins to a site along with other site configuration.
 
 Copy the following into `gatsby-config.js`
 
@@ -116,7 +116,7 @@ module.exports = {
 
 Gatsby reads the site's config file when starting. Here we tell it to look for a plugin named `gatsby-plugin-typography`. Gatsby knows to look for plugins that are NPM packages so it will find the package we installed previously.
 
-Now run `gatsby develop` again. Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you'll see that the typography plugin added a `<style>` element to the head with its generated CSS.
+Now run `gatsby develop`. Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you'll see that the typography plugin added a `<style>` element to the `<head>` element with its generated CSS.
 
 ![typography-styles](typography-styles.png)
 
@@ -188,9 +188,9 @@ export default () =>
 
 Ah, this is starting to look nice!
 
-What we're seeing here is the default CSS Typography.js produces. We can easily customize it however. Let's do that.
+What we're seeing here is the default CSS Typography.js produces. We can easily customize it, however. Let's do that.
 
-In your site, create a new directory at `src/utils`. There create a file `typography.js`. In it add the following code.
+In your site, create a new directory at `src/utils`. There create a file named `typography.js`. In it, add the following code.
 
 ```javascript
 import Typography from "typography"
@@ -238,7 +238,7 @@ export default typography
 
 ![typography-bootstrap](typography-bootstrap.png)
 
-Themes can also add Google Fonts. The Lawton theme we installed along with the Bootstrap theme does this. Replace your typography module code with the following then restart the dev server (necessary to load the new Google Fonts).
+Themes can also add Google Fonts. The Lawton theme we installed along with the Bootstrap theme does this. Replace your typography module code with the following, then restart the dev server (necessary to load the new Google Fonts).
 
 ```javascript{2-3,5}
 import Typography from "typography"
@@ -256,13 +256,13 @@ Typography.js has more than 30 themes! Check them out at http://kyleamathews.git
 
 ## Component CSS
 
-Gatsby has a wealth of options available for styling components. Let's explore three very popular and production-ready options. We'll build a simple page three times with each styling option.
+Gatsby has a wealth of options available for styling components. Let's explore three very popular and production-ready options. We'll build a simple page three times to explore each styling option.
 
-Each is a variant on "CSS-in-JS" — which solves many of the problems with traditional CSS.
+Each is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.
 
 One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes.
 
-With CSS-in-JS you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
+With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
 
 For some background reading on CSS-in-JS, see [Christopher "vjeux" Chedeau's 2014 presentation that sparked this movement](https://speakerdeck.com/vjeux/react-css-in-js) as well as [Mark Dalgleish's more recent post "A Unified Styling Language"](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660).
 
@@ -274,15 +274,15 @@ Quoting from [the CSS Module homepage](https://github.com/css-modules/css-module
 
 > A **CSS Module** is a CSS file in which all class names and animation names are scoped locally by default.
 
-CSS Modules is very popular as it lets you write CSS like normal but with a lot more safety as the tool automatically makes class and animation names unique so you don't have to worry about selector name collisions.
+CSS Modules is very popular, as it lets you write CSS like normal but with a lot more safety. The tool automatically makes class and animation names unique so you don't have to worry about selector name collisions.
 
 CSS Modules are highly recommended for those new to building with Gatsby (and React in general).
 
 Gatsby works out of the box with CSS Modules.
 
 Let's build a page using CSS Modules.
 
-First let's create a new `Container` component which we'll use for each of the CSS-in-JS examples. Create a `components` directory at `src/components` and then in this directory, create a file named `container.js` and paste the following.
+First, let's create a new `Container` component which we'll use for each of the CSS-in-JS examples. Create a `components` directory at `src/components` and then, in this directory, create a file named `container.js` and paste the following.
 
 ```javascript
 import React from "react"
@@ -317,7 +317,7 @@ Your page should now look like:
 
 Let's create a simple list of people with names, avatars, and short latin biographies.
 
-First let's create the file for the CSS at `src/pages/about-css-modules.module.css`. You'll notice that the file name ends with `.module.css` instead of `.css` like normal. This is how we tell Gatsby that this CSS file should be processed as CSS modules.
+First, let's create the file for the CSS at `src/pages/about-css-modules.module.css`. You'll notice that the file name ends with `.module.css` instead of `.css` like normal. This is how we tell Gatsby that this CSS file should be processed as CSS modules.
 
 ```css
 .user {
@@ -368,7 +368,7 @@ If you compare that to our CSS file, you'll see that each class is now a key in
 
 Let's use our styles to create a simple `User` component.
 
-Let's create the new component inline in the `about-css-modules.js` page component. The general rule of thumb is if you use a component in multiple places on a site, it should be in its own module file in the `components` directory. But if it's used only in one file, create in inline.
+Let's create the new component inline in the `about-css-modules.js` page component. The general rule of thumb is if you use a component in multiple places on a site, it should be in its own module file in the `components` directory. But, if it's used only in one file, create it inline.
 
 Modify `about-css-modules.js` so it looks like the following:
 
@@ -616,4 +616,4 @@ Gatsby supports almost every possible styling option (if there isn't a plugin ye
 * [Stylus](/packages/gatsby-plugin-stylus/)
 * and more!
 
-Now continue on to [Part Three](/tutorial/part-three/) of the tutorial.
+Now continue on to [Part Three](/tutorial/part-three/) of the tutorial.