Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Standardizing headers, tweaked wording #4375

Merged
merged 2 commits into from
Mar 16, 2018
Merged

Standardizing headers, tweaked wording #4375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f306854
Standardizing headers, tweaked wording
Mar 5, 2018
97c2757
Merge branch 'master' into tutorial-part-two-enhancements
shannonbux Mar 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/tutorial/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ In these advanced tutorials, you'll learn how to pull data from almost anywhere
4. [Querying for data in a blog](/tutorial/part-four/): Create a blog and use a GraphQL query to pull your site title into the blog header.
5. [Source plugins and rendering queried data](/tutorial/part-five/): Use a source plugin to pull Markdown blogposts into your site and create an index page with a list of blogposts.
6. [Transformer plugins](/tutorial/part-six/): Use a transformer plugin to transform your Markdown blogposts into a form the blog can render.
7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts.
7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts.
26 changes: 15 additions & 11 deletions docs/tutorial/part-two/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ typora-copy-images-to: ./

Welcome to part two of the Gatsby tutorial!

## What's in this tutorial?

In this part we're going to explore options for styling Gatsby websites and dive
deeper into using React components for building sites.

## Building with components

One of the big mental shifts you make when starting to build with components is
that now your CSS, HTML, and JavaScript are tightly coupled, often living even
One of the big mental shifts you make when starting to build with components (if you are already a developer) is
that now your CSS, HTML, and JavaScript are tightly coupled, and often living even
within the same file.

While a seemingly simple change, it has profound implications for how you think
While a seemingly simple change, this has profound implications for how you think
about building websites.

Take the example of creating a custom button. In the past you would
Expand Down Expand Up @@ -49,7 +51,7 @@ 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
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.

Expand Down Expand Up @@ -101,14 +103,14 @@ 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/).

Our goal with Gatsby plugins is to make them easy to install and use. In almost every Gatsby site you
Our goal with Gatsby plugins is to make them straightforward to install and use. In almost every Gatsby site you
build, you will be installing plugins. While working through the rest of the
tutorial, you'll have many opportunities to practice installing and using
plugins.

## Installing your first Gatsby plugin

Let's start by creating a new site. At this point it probably makes sense to close the terminal window(s) you used to build tutorial-part-one so that you don't accidentally start building tutorial-part-two in the wrong place. If you don't close tutorial-part-one prior to building tutorial-part-two, you will see that tutorial-part-two appears at localhost:8001 instead of localhost:8000.
Let's start by creating a new site. At this point it probably makes sense to close the terminal windows you used to build tutorial-part-one so that you don't accidentally start building tutorial-part-two in the wrong place. If you don't close tutorial-part-one prior to building tutorial-part-two, you will see that tutorial-part-two appears at localhost:8001 instead of localhost:8000.

Similar to part one, open a new terminal window and run the following to create a new site:

Expand Down Expand Up @@ -147,7 +149,7 @@ module.exports = {
};
```

Gatsby reads the site's config file when starting. Here we tell it to look for a
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.

Expand Down Expand Up @@ -305,9 +307,9 @@ export default typography;

![typography-lawton](typography-lawton.png)

Typography.js has more than 30 themes!
*Challenge:* Typography.js has more than 30 themes!
[Try them live](http://kyleamathews.github.io/typography.js) or check out
[the complete list](https://github.com/KyleAMathews/typography.js#published-typographyjs-themes)
[the complete list](https://github.com/KyleAMathews/typography.js#published-typographyjs-themes) and try installing one on your current Gatsby site.

## Component CSS

Expand All @@ -316,7 +318,7 @@ one very popular method: CSS Modules.

### CSS-in-JS

While we won't cover CSS-in-JS in this initial tutorial, we encourage you to explore CSS-in-JS libraries as these solve many of the problems with traditional CSS plus help make your React components even smarter. There are mini-tutorials for two libraries, [Glamor](/docs/glamor/) and [Styled Components](/docs/styled-components/). Check out the following resources for background reading on CSS-in-JS:
While we won't cover CSS-in-JS in this initial tutorial, we encourage you to explore CSS-in-JS libraries because these solve many of the problems with traditional CSS plus help make your React components even smarter. There are mini-tutorials for two libraries, [Glamor](/docs/glamor/) and [Styled Components](/docs/styled-components/). Check out the following resources for background reading on CSS-in-JS:

[Christopher "vjeux" Chedeau's 2014 presentation that sparked this movement](https://speakerdeck.com/vjeux/react-css-in-js)
as well as
Expand Down Expand Up @@ -356,7 +358,7 @@ export default ({ children }) => (
);
```

Then create a new component page by creating a file at
Then, create a new component page by creating a file at
`src/pages/about-css-modules.js`:

```javascript
Expand Down Expand Up @@ -503,4 +505,6 @@ yet for your favorite CSS option,
* [Stylus](/packages/gatsby-plugin-stylus/)
* and more!

## What's coming next?

Now continue on to [Part Three](/tutorial/part-three/) of the tutorial.