From 9181e6b3d0d921e7ed61dd2afa8c42b16025331a Mon Sep 17 00:00:00 2001
From: Dorell James Galang <galangdj@gmail.com>
Date: Wed, 3 Jul 2019 00:02:15 +0800
Subject: [PATCH] Add guide for Gatsby.js styling (#31520)

* Add guide for Gatsby.js styling

* Update index.md
---
 .../gatsbyjs/gatsbyjs-styling/index.md        | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 guide/english/gatsbyjs/gatsbyjs-styling/index.md

diff --git a/guide/english/gatsbyjs/gatsbyjs-styling/index.md b/guide/english/gatsbyjs/gatsbyjs-styling/index.md
new file mode 100644
index 0000000000..281aa55b77
--- /dev/null
+++ b/guide/english/gatsbyjs/gatsbyjs-styling/index.md
@@ -0,0 +1,74 @@
+---
+title: Gatsby.js Styling
+---
+
+## Gatsby.js Styling
+
+There are so many ways to add styles to your website — and Gatsby supports almost every possible option, through official and community plugins.
+
+NOTE: Gatsby doesn’t prescribe or dictate any single styling approach. Choose what works best for you!
+
+## Layout Components
+
+For sections of your site that you want to share across multiple pages. Creating and using the component as shown below.
+
+```
+// src/components/layout.js
+
+import React from "react"
+
+export default ({ children }) => (
+  <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
+    {children}
+  </div>
+)
+```
+
+```
+// src/pages/index.js
+
+import React from "react"
+import Layout from "../components/layout"
+
+export default () => (
+  <Layout>
+    <h1>I’m in a layout!</h1>
+  </Layout>
+)
+```
+
+## CSS Modules
+
+CSS Modules are highly recommended for those new to building with Gatsby (and React in general). A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. They are very popular as they let 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.
+
+Check (CSS Modules homepage here](https://github.com/css-modules/css-modules).
+
+## Typography.js
+
+Typography.js is a JavaScript library that enables you to define and explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It limits the number of tedious changes you need to make to your website just to change the font.
+
+Learn [how to use Typography.js on your Gatsby site here](https://www.gatsbyjs.org/docs/typography-js/).
+
+## Using CSS-in-JS 
+
+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 easier to know how to edit a component’s CSS as there’s never any confusion about how and where CSS is being used.
+
+### Glamor
+
+Check out [walkthrough guide on setting up Glamor on your Gatsby site](https://www.gatsbyjs.org/docs/glamor/)
+
+### Styled components
+
+Check out [walkthrough guide on setting up Styled Components on your Gatsby site](https://www.gatsbyjs.org/docs/styled-components/)
+
+## Creating global styles
+
+In nearly every site, there will be some global styles, such as a reset or typography defaults. Check out the [guide at official Gatsby docs for creating global styles](https://www.gatsbyjs.org/docs/creating-global-styles/).
+
+
+## PostCSS
+
+PostCSS transforms extended syntaxes and features into modern, browser-friendly CSS. Checkout guide will [show you how to get started with Gatsby and PostCSS](https://www.gatsbyjs.org/docs/post-css/).
+
+### More Information:
+Check out the Gatsby.js official docs for styling at [Gatsby Styling](https://www.gatsbyjs.org/docs/styling/). For more information and learn more, visit: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/)