Taking advantage of theme-ui to build a landing page on a Gatsby project without plugins

Lecturer: [00:00] We have our site running locally, but you can't do anything on it and it doesn't look very good. Now, if this were an actual product it would take time to do user research and figure out all of the things that our copy should be saying on this page when people land on it.

[00:13] Since we don't really have time to do all of that user research we're going to take a shortcut and look at another to-do application. This is Todoist's home page. If we look at the page we can see that they have a number of navigation items, login and sign up, a nice big header in the middle of the page with a simple get started button.

[00:29] They've also taken to the illustration aesthetic and they've got screen shots of their working product, which we definitely won't have yet. You can see that they've done a bunch of work that we haven't done by figuring out what copy to put on this page, a couple of calls to action, and things like their app store ratings.

[00:46] As we scroll down, we see some more copy. We see a bunch of social proof for all the companies that are working with Todoist. We have some quotes from current users. If you're one of these intended markets for Todoist, you can click on it, see one of the quotes from a person that's much like you, and then figure out that you might want to use Todoist as well.

[01:03] We're going to skip most of that and just stick with the top part here. What we're going to need is a giant header, a getting started button, which will probably have login with a slightly different layout.

[01:14] To get started styling, we're going to use a library called Theme UI, which is built on a motion and styled system. To do this, we'll cd into our www directory. We're going to add two packages, Theme UI and Theme UI presets. While that's installing, I'll show you what Theme UI presets are.

[01:29] In the top right of the Theme UI documentation site, there's a little button that changes the theme of the site. We can go from light to dark to deep to Swiss and back to light. Note that this affects the entire page, including the code blocks. In our case, we're going to take the deep preset, rather than construct one of our own.

[01:53] We seem to have run into an integrity issue in Yarn's cache. We'll clear the cache. After clearing the cache, the install proceeds successfully. Note that if you don't have an integrity error in your project when you go to install the packages, you can skip that step.

[02:15] In our project, we'll need to take advantage of Theme UI using the theme provider. We'll create a file called wrap route element. Inside this file, we're just going to copy and paste the example from the Theme UI docks.

[02:27] Note that we're going to make two different changes here. The first is that we're going to use Deep from Theme UI presets as our theme. The second is because we're going to use this as the wrap root element, gatsby lifecycle, the prop that comes in here is going to be called "element."

[02:42] We have to use that instead of children. In the wrap root element gatsby docs if we scroll down a little bit there's an example usage. This API is used in both Gatsby SSR and Gatsby browser, so we'll have to create both files. We'll do it one at a time and so, both have the same contents.

[02:59] We can remove the redux store from the example because we're not using React Redux. We import wrap root element from the wrap root element file and re-export it from the Gatsby browser file.

[03:10] Once we do that we can save the exact same file as Gatsby SSR. Note that now we have a Gatsby browser and a Gatsby SSR as well as our wrap root element. This provides our theme to the entire project. Let's start up the project.

[03:23] Note that after running our site we run into an unhandler projection error. Plugin.plugin API is not a function. This is because we've mixed export default ES6 module syntax with common JS require syntax. In our wrap root element we can fix this. We'll change export default to module exports, and we'll change our imports to const requires.

[03:53] Now our site renders with the appropriate theme. Now that we've done that, we can get started on our index.js and source pages. We can import the container component from Theme UI and use it to wrap our site.

[04:04] Note that nothing's changed. If we inspect the div we can see it has a class on it. If we look at the styles in the div tools we can see that the max width is a container. Container is an invalid value for max width so the rule is struck out and not applied.

[04:21] If we look at the documentation under components in the Theme UI docs we can see that container includes a note that it uses themes.sizes.container. If we look at the Deep present on Github in Theme UI, which is a multipackage repo so we have to look in packages and look for the preset Deep theme, and look for the preset Deep token set, we can look at the object that's exported.

[04:44] It doesn't include a sizes key so we'll have to create one ourselves. We take the Deep present token set and we spread it into a custom object. Since there are no sizes we don't have to worry about overriding them.

[04:54] Inside of sizes we set a container of 1,024 pixels. Now, because we're passing this new token set in the max width on our container is 1,024 pixels. To see the effects of this we'll have to widen our browser, because the container only takes effect to 1,024 pixels.

[05:12] We'll continue and take the heading component and the button component also from Theme UI. Now we have a heading and a button, but our heading just got smaller. That's because headings, by default, are an h2. In this case, we want to change that to an h1.

[05:27] We can continue by wrapping the heading and the button in a flex container, also from Theme UI components. The SX prop allows us to add additional CSS attributes and rules. In this case, we'll make sure our text and our button stay off the sides from the top by adding padding of three.

[05:43] A padding value of three goes straight to our sizing scale and gets the third index in the sizing scale. That's why we don't see a three pixel padding. On the button we'll also add a little bit more margin.

[05:54] Now, this doesn't look nearly as good as Todoist's page but it'll get the work done for now. We can add an onclick handler to our button that'll popup an alert that says "clicked."

[06:05] This is the onclick handler we'll use to login later. Remember to add all of our new files with a git index and commit them. Remember that because we're using Netlify every time we push we'll get it to play. Now we can see our site deployed on Netlify.