@zalxon/layouts NPM

zalxon / layouts

page layout components for documents and tools

NPM Version

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 @zalxon/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 @zalxon/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 @zalxon/layouts

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

examples

The easiest way to understand these components is to see them in use across our sites.

Visit zalxon.com/research or github.com/zalxon/research to see the use of Article and Tool.
Visit zalxon.com/blog or github.com/zalxon/blog to see the use of Post.
Visit zalxon.com/design or github.com/zalxon/design to see the use of NavSection and NavMenu.

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):