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.

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

chore(docs): reword CSS in JS docs for clarity #11439

Merged
merged 3 commits into from
Feb 13, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions docs/docs/emotion.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
title: Emotion
---

In this guide, we'll walk through setting up a site with the CSS-in-JS library [Emotion](https://emotion.sh).
In this guide, you will learn how to set up a site with the CSS-in-JS library [Emotion](https://emotion.sh).

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

[Server side rendering](https://emotion.sh/docs/ssr) works out of the box in Emotion. We can use React’s `renderToString` or `renderToNodeStream` methods directly without any extra configuration. `extractCritical` feature removes unused rules that were created with emotion and helps loading pages faster.
[Server side rendering](https://emotion.sh/docs/ssr) works out of the box in Emotion. You can use React’s `renderToString` or `renderToNodeStream` methods directly without any extra configuration. `extractCritical` feature removes unused rules that were created with emotion and helps loading pages faster.

First, open a new terminal window and run the following to create a new site:

```shell
npx gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Second, we'll install the necessary dependencies for Emotion and Gatsby.
Second, install the necessary dependencies for Emotion and Gatsby.

```shell
npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/glamor.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Glamor
---

In this guide, we'll walk through setting up a site with the CSS-in-JS library [Glamor](https://github.com/threepointone/glamor).
In this guide, you will learn setting up a site with the CSS-in-JS library [Glamor](https://github.com/threepointone/glamor).

Glamor is not actively maintained, the maintainer recommends using [Emotion](/docs/emotion).

Expand All @@ -19,7 +19,7 @@ First, open a new terminal window and run the following to create a new site:
gatsby new glamor-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Second, install the Gatsby plugin for Glamor.
Second, install the necessary dependencies for Glamor and Gatsby.

```shell
npm install --save gatsby-plugin-glamor glamor
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/styled-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Styled Components
---

In this guide, we'll walk through setting up a site with the CSS-in-JS library [Styled Components](https://www.styled-components.com/).
In this guide, you will learn setting up a site with the CSS-in-JS library [Styled Components](https://www.styled-components.com/).

Styled Components lets you use actual CSS syntax inside your components. Styled Components is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.

Expand All @@ -20,7 +20,7 @@ First, open a new terminal window and run the following to create a new site:
gatsby new styled-components-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Next, we'll install the necessary dependencies for `styled-components`, including the Gatsby plugin.
Second, install the necessary dependencies for `styled-components`, including the Gatsby plugin.

```shell
npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components
Expand Down