Layout - Overview

Often designs call for complex layout structures, we use a grid system to provide consistency.

Breakpoints

We use a set of breakpoints to define the width of the viewport and the corresponding grid system. Here's a summary of the breakpoints and how they relate to our grid:

Layouts in React

When we build UI we take a slightly different approach in development, compared to Design. Elements are positioned relative to parent containers rather than the page.

Sky UI provides a number of layout-centric components to simplify the process:

• Box - an abstraction of the CSS Box Model.
• Container - a width constrained container as a shorthand to achieve different layouts.
• Flex - an abstraction of the CSS Flexbox api.
• Grid - an abstraction of the CSS Grid api.
• Position - an abstraction on the CSS position property and related values.

Let's take a look at how we can use them in practice.

Constraining content

Often, content won't take up the full 12 columns of available horizontal space, many layouts will have content sat within a 6 or 8 column width.

Rather than creating complex Flex or Grid layouts to achieve this, we can use the Container component as a shorthand:

<>
  <Container $size="12-col" $marginBottom={5} $paddingX={{xs: 4, lg: 5}}>
    <Card $aspectRatio="12 / 1" $gridColumn="1 / span 12" />
  </Container>

  <Container $size="8-col" $marginBottom={5} $paddingX={{xs: 4, lg: 5}}>
    <Card $aspectRatio="8 / 1" $gridColumn="3 / span 8" />
  </Container>

  <Container $size="4-col" $paddingX={{xs: 4, lg: 5}}>
    <Card $aspectRatio="4 / 1" $gridColumn="5 / span 4" />
  </Container>
</>

Adding a Grid to layout content

Now we have the outer most we can use a nested Grid to create more complex layouts:

<Container $size="6-col" $marginBottom={5} $paddingX={{xs: 4, lg: 5}}>
  <Grid $gap={{xs: 4, lg: 5}} $gridTemplateColumns="repeat(6, 1fr)">
    <Card $aspectRatio="2 / 1" $gridColumn="span 2" />
    <Card $aspectRatio="4 / 1" $gridColumn="span 4" />
    <Card $aspectRatio="2 / 1" $gridColumn="span 2" />
    <Card $aspectRatio="4 / 1" $gridColumn="span 4" />
  </Grid>
</Container>

Utilising grid-template-areas

We can use CSS grid-template-areas to create more complex compositions of content.

<Container $size="6-col" $marginBottom={5} $paddingX={{xs: 4, lg: 5}}>
  <Grid $gap={{xs: 4, lg: 5}} $gridTemplateAreas='"a c" "b c"'>
    <Box $gridArea="a"><Card $aspectRatio="4 / 1" /></Box>
    <Box $gridArea="b"><Card $aspectRatio="2 / 1" /></Box>
    <Box $gridArea="c"><Card $height="100%"/></Box>
  </Grid>
</Container>

In this example we use $gridTemplateAreas to set the following template:

a c
b c

This approach can often allow for more intuitive Grid layout with semantically named grid-areas.

Flowing content with Flex

CSS flexbox is an incredibly useful tool for laying out content. Where Grid allows us to create content layouts aligning to rows and columns, Flex allows us to create more fluid content structures, focusing on a single axis.

At it's most simple, we can use Flex to wrap stacked content and apply consistent spacing using $gap as well as adding some alignment to horizontally center content.

<Flex $flexDirection="column" $gap={3} $alignItems="center">
  <Text $colorGradient="sky" $fontSize="display-2" $fontWeight="bold">
    Nulla facilisi.
  </Text>

  <Text $fontSize="display-5" $fontWeight="bold">
    Praesent dignissim justo eget tincidunt fermentum.
  </Text>

  <Text>
    In hac habitasse platea dictumst. Nunc scelerisque erat eu erat convallis, sit amet vestibulum magna ultrices.
  </Text>
</Flex>

Flex is handy when we have a list of elements which we want to flow based on the container size rather than aligning to a preset grid.

<Flex as="ul" $gap={{xs: 4, lg: 5}} $flexWrap="wrap" $justifyContent="center" $margin={0}>
  {Array(6).fill().map((_, index) => (
    <Card
      key={`item-${index}`}
      as="li"
      $aspectRatio="3/2"
      $bgColor="grey70"
      $flex="1 1 180px"
      $maxHeight="180px"
      $padding={4}
    />
  ))}
</Flex>

Here we set the Flex element to have our standard gutter gap between children, we also set them to wrap onto the next row if they don't fit.

Beyond the basics

For more complex layouts, take a look that how some of our components are constructed.

If you don't find what you're looking for, please reach out to the #sky-ui-development channel and we can help you out.