gainforest / layouts

page layout components for documents and tools

Reusable react components for common layouts, such as those used in our articles, tools, blog posts, and maps. All the components here either wrap the base Layout from @gainforest/components directly, or are linked in their design constraints to one of the layouts in this package that do so. Similar to those in the @gainforest/components package, these components assume and make extensive use of theme-ui and next, and are meant to be composed with our theme. These components also work particularly well with MDX, which we use for authoring lots of our content.

usage

To use, install the package with

npm i @gainforest/layouts

and then import the component(s) you want into your next project.

api

Most of these components are wrappers for the Layout component that we generally use as the top-level component for our pages. As such, they are also intended to act as top-level page components. In particular, Article Supplement Post Tool and NavSection all play this role.

The remaining components are either elements of those layouts that might sometimes be useful on their own, llike NavMenu, or components that se only in the context of these layouts and are linked via specifid design constraints, like the use of Cite and PullQuote within an Article.

Here are all the components currently available, grouped by where we tend to use them (some components appear in multiple groups):

research articles

Article Supplement Endnote Cite PullQuote

interactive tools

Tool

blog posts

Post

documentation sites

NavSection NavMenu

map sites

[coming soon]