From 024844bd358872362cb44e81eb09709b9ef14051 Mon Sep 17 00:00:00 2001
From: shannonbux <32467162+shannonbux@users.noreply.github.com>
Date: Tue, 9 Jan 2018 17:25:18 -0700
Subject: [PATCH] Mini-tutorials for Glamor and Styled Components (#3417)
* Create adding-a-list-of-markdown-blog-posts.md
* Create adding-markdown-pages.md
* Create adding-tags-and-categories-to-blog-posts.md
* Create creating-dynamically-rendered-navigation.md
* Create how-gatsby-works-with-github-pages.md
* Create dropping-images-into-static-folders.md
* Update adding-markdown-pages.md
* Update adding-tags-and-categories-to-blog-posts.md
* Update adding-a-list-of-markdown-blog-posts.md
* new link
* Update dropping-images-into-static-folders.md
* new link
* New mini-tutorials on Glamor and Styled Components
Do the intros and code examples make sense now that these are removed from the context provided by Part Two of the tutorial?
* Fully edited
edits to reflect this page's relationship to Part Two of tutorial
* Updated relative links
* Updated relative links
* New relative links from sidebar
For Glamor and Styled Components pages. Does it make sense to have these in the Guides section?
* CSS-in-JS explanation
Let the wars begin about CSS-in-JS!
* Update glamor.md
* Update styled-components.md
* Update doc-links.yaml
---
docs/docs/glamor.md | 105 ++++++++++++++++++++++++++++++
docs/docs/styled-components.md | 103 +++++++++++++++++++++++++++++
www/src/pages/docs/doc-links.yaml | 4 ++
3 files changed, 212 insertions(+)
create mode 100644 docs/docs/glamor.md
create mode 100644 docs/docs/styled-components.md
diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md
new file mode 100644
index 0000000000000..9b6ccab374885
--- /dev/null
+++ b/docs/docs/glamor.md
@@ -0,0 +1,105 @@
+---
+title: Glamor
+---
+
+Let's create a page using
+[Glamor](https://github.com/threepointone/glamor). It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Styled Components](/styled-components/) to see how Glamor compares as a styling method.
+
+Glamor lets you write _real_ CSS inline in your components using the same Object
+CSS syntax React supports for the `style` prop. Glamor 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.
+
+First, install the Gatsby plugin for Glamor.
+
+```shell
+npm install --save gatsby-plugin-glamor
+```
+
+And then add it to your `gatsby-config.js`
+
+```javascript{9}
+module.exports = {
+ plugins: [
+ {
+ resolve: `gatsby-plugin-typography`,
+ options: {
+ pathToConfigModule: `src/utils/typography.js`,
+ },
+ },
+ `gatsby-plugin-glamor`,
+ ],
+}
+```
+
+Restart `gatsby develop` again to enable the Glamor plugin.
+
+Now create the Glamor page at `src/pages/about-glamor.js`
+
+```jsx
+import React from "react";
+
+import Container from "../components/container";
+
+export default () => (
+
+ About Glamor
+ Glamor is cool
+
+);
+```
+
+Let's add the same inline `User` component that you would use for CSS Modules, but this time using Glamor's `css`
+prop.
+
+```jsx{5-27,33-40}
+import React from "react"
+
+import Container from "../components/container"
+
+const User = props =>
+
+
+
+
+ {props.username}
+
+
+ {props.excerpt}
+
+
+
About Glamor
+ Glamor is cool
+
+
+
+```
+
+If you are using Glamor in Part Two of the tutorials, the final Glamor page should look identical to the CSS Modules page.
+
+
diff --git a/docs/docs/styled-components.md b/docs/docs/styled-components.md
new file mode 100644
index 0000000000000..1ca24d7c6fb21
--- /dev/null
+++ b/docs/docs/styled-components.md
@@ -0,0 +1,103 @@
+---
+title: Styled Components
+---
+
+[Styled Components](https://www.styled-components.com/) is an example of using CSS-in-JS. It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Glamor](/glamor/) to see how Styled Components compares as a styling method.
+
+Styled Components lets you use actual CSS syntax inside your components. Like Glamor, Styled Components 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.
+
+First, we'll install the Gatsby plugin for Styled Components.
+
+```sh
+npm install --save gatsby-plugin-styled-components styled-components
+```
+
+Then modify the `gatsby-config.js`. If you've previously used the Glamor plugin in this site,
+you'll need to remove the Glamor plugin and delete the Glamor component page we
+created. The two plugins conflict with each other as both want to take control
+during server rendering.
+
+```javascript{9}
+module.exports = {
+ plugins: [
+ {
+ resolve: `gatsby-plugin-typography`,
+ options: {
+ pathToConfigModule: `src/utils/typography.js`,
+ },
+ },
+ `gatsby-plugin-styled-components`,
+ ],
+}
+```
+
+Then at `src/pages/about-styled-components.js` create:
+
+```jsx
+import React from "react";
+import styled from "styled-components";
+
+import Container from "../components/container";
+
+const UserWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ margin: 0 auto 12px auto;
+ &:last-child {
+ margin-bottom: 0;
+ }
+`;
+
+const Avatar = styled.img`
+ flex: 0 0 96px;
+ width: 96px;
+ height: 96px;
+ margin: 0;
+`;
+
+const Description = styled.div`
+ flex: 1;
+ margin-left: 18px;
+ padding: 12px;
+`;
+
+const Username = styled.h2`
+ margin: 0 0 12px 0;
+ padding: 0;
+`;
+
+const Excerpt = styled.p`
+ margin: 0;
+`;
+
+const User = props => (
+
+
+
+ {props.username}
+ {props.excerpt}
+
+
+);
+
+export default () => (
+
+ About Styled Components
+ Styled Components is cool
+
+
+
+);
+```
diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml
index 39cdfd3dfc373..7bc27be0fd76d 100644
--- a/www/src/pages/docs/doc-links.yaml
+++ b/www/src/pages/docs/doc-links.yaml
@@ -44,6 +44,8 @@
link: /docs/environment-variables/
- title: Gatsby on Windows
link: /docs/gatsby-on-windows/
+ - title: Using CSS-in-JS library Glamor
+ link: /docs/glamor/
- title: How Gatsby Works with GitHub Pages
link: /docs/how-gatsby-works-with-github-pages/
- title: Migrating from v0 to v1
@@ -52,6 +54,8 @@
link: /docs/path-prefix/
- title: Proxying API Requests
link: /docs/api-proxy/
+ - title: Using CSS-in-JS library Styled Components
+ link: /docs/styled-components/
- title: Adding Markdown Pages
link: /docs/adding-markdown-pages/
- title: Adding a List of Markdown Blog Posts*