Layout

Introduction

Hopper includes layout components to help build applications. The Flex and Grid components are containers responsible for the layout of their children. Flex follows the the CSS flexbox algorithm, while Grid implements CSS grid.

These components provide props with predefined Hopper tokens for sizing, spacing, and other layout options. You can use Flex and Grid together to build different parts of your application, and even nest them to create more complex layouts.

You should prefer using flex and grid over other CSS layout models. Spacing between components should be managed by parent layout components rather than added directly to the children. This ensures components are composable when reused in different places and that spacing remains consistent.

In addition to Flex and Grid, some Hopper components include prebuilt layouts which you can insert your content into via slots. You can read more about slots in the slots concept page.

Flex

The flexbox layout model is a simple yet versatile method of laying out components in rows and columns. Use it to build vertical or horizontal stacks, simple wrapping grids, and more. The Flex component can be used to create flexbox containers. Any Hopper component can be used as a child within these containers. Flex layouts can be nested to create more complex layouts.

The gap, rowGap and columnGap can be defined with Hopper space tokens to ensure consistency across applications, and allow the layout to adapt to different devices automatically.

Example

A simple vertical stack, with a gap between each item defined using a Hopper space token.

Learn more

You can learn more about Flex and see more examples on the Flex page. There are many great resources on the web for learning flexbox as well.

• The MDN guide to flexbox — full walkthrough of flexbox layout.
• A Complete Guide to Flexbox — great reference for all of the properties supported by flexbox.

Grid

CSS grid is a powerful way to lay out elements in two dimensions. It can be used to to build full page application layouts, or smaller user interface elements. It is especially powerful because it allows you to build many types of layouts without extra presentational elements, keeping your code clean and semantic. In addition, grid layouts are automatically mirrored in right-to-left languages.

The Grid component can be used as a container to define a grid layout. Any Hopper component can be used as a child of a Grid. The Grid component extends the CSS syntax to support defining grids using Hopper-defined dimension tokens. This ensures that sizing and spacing is consistent between applications, and allows the layout to adapt to different devices automatically.

Defining grids

There are many ways to define grids, but the simplest is to use the areas prop to declaratively specify your layout using named areas. This prop accepts an array of strings which represent rows. Within the rows, you specify space separated names for grid areas. The children of the Grid can declare the gridArea prop, which places them into these named regions.

In addition, you can define the columns and rows props on the Grid container to specify the widths and heights of the columns and rows respectively. This can be done using Hopper-defined dimension tokens to ensure they are adaptive on various devices.

The following example shows how you could use Grid to declare a common application layout, with a header, sidebar, content area, and footer. Notice how there are no nested layout elements — the layout is entirely declared in the Grid and the children simply declare where they should be placed.

Learn more

You can learn more about Grid and see more examples on the Grid page. There are many great resources on the web for learning CSS grid as well.

• The MDN guide to CSS grid — full walkthrough of grid layout.
• A Complete Guide to Grid — great reference for all of the properties supported by grid.
• The Difference Between Explicit and Implicit Grids — an article that discusses the various ways of defining grids.

Responsive layout

All props of the Flex and Grid components support object syntax to specify different values for the prop depending on a responsive breakpoint. You can learn more about responsive styles on the Responsive Styles page.