Responsive layout

Search…
Responsive layout
Responsive is a crucial part of any layout implementation. That's why its concept lies in the core of Atomic Layout design, as responsive is integrated by default.
Implementation of responsive layout has two parts:
1.Conditional (responsive) areas;
2.Conditional props assignment (gap, margin, etc.);
In this section we are going to take a look at how to implement these fundamentals. Make sure to be familiar with the basics of the library before you continue reading.
Resources
Responsive areas
Declaration
Any grid area that is not present in all template declarations automatically becomes responsive.
1
const areasMobile = `
2
  thumbnail
3
  heading
4
  subheading
5
`
6
​
7
const areasDesktop = `
8
  thumbnail heading
9
  thumbnail subheading
10
  thumbnail meta
11
`
Copied!
We have two template declarations above: one for mobile and one for the desktop screen. Areas thumbnail, heading and subheading are present in both template declarations. However, the meta  area is declared in templateDesktop only. This makes meta a conditional area automatically.
Note that template declaration alone has no effect over responsive area rendering. Make sure to supply the template declaration to the respective template prop(s).
Breakpoints
To connect a template declaration with a breakpoint we need to pass the template string to the template prop. 
Having different areas in different template declarations only signifies conditional areas. In order to control the breakpoints where those areas are rendered, we need to pass templates declarations to the template props of the Composition component:
1
import React from 'react'
2
import { Composition } from 'atomic-layout'
3
​
4
const areasMobile = `
5
  thumbnail
6
  heading
7
  subheading
8
`
9
​
10
const areasDesktop = `
11
  thumbnail heading
12
  thumbnail subheading
13
  thumbnail meta
14
`
15
​
16
export const Card = () => (
17
  <Composition
18
    areas={areasMobile}
19
    areasLg={areasDesktop}>
20
    {(Areas) => (
21
      <>
22
        <Areas.Thumbnail>I am rendered always</Areas.Thumbnail>
23
        <Areas.Heading>I am rendered always</Areas.Heading>
24
        <Areas.Subheading>I am rendered always</Areas.Subheading>
25
        <Areas.Meta>I am rendered on "lg" breakpoint and up!</Areas.Meta>
26
      </>
27
    )}
28
  </Composition>
29
)
Copied!
The composition above will wrap Meta grid area in a <MediaQuery/> component from react-responsive. This area will render on lg breakpoint and up, because there is no succeeding template declaration that would contradict that, and because "up" is the default responsive behavior.
Responsive props
Any prop name suffixed with a breakpoint name becomes responsive. This means that its value is applied at the given breakpoint.
Responsive props
We have already used a responsive prop in the example above. By suffixing template with the Lg, we stated that the given value must be applied on the lg breakpoint and up. Following this example, let's create a different gutter between the grid areas on different breakpoints:
1
<Composition
2
  areas={areasMobile}
3
  areasLg={areasDesktop}
4
  gap={10}
5
  gapLg={20}>
6
  {(Areas) => (
7
    <>
8
      <Areas.Thumbnail>I am rendered always</Areas.Thumbnail>
9
      <Areas.Heading>I am rendered always</Areas.Heading>
10
      <Areas.Subheading>I am rendered always</Areas.Subheading>
11
      <Areas.Meta>I am rendered on "lg" breakpoint and up!</Areas.Meta>
12
    </>
13
  )}
14
</Composition>
Copied!
There are two props we have added: gutter and gutterLg.
gutter adds a grid-gap of 10px on mobile screens, since xs is the default breakpoint,
gutterLg adds a grid-gap of 20px on large screens and up, since up is the default behavior.
You can configure custom breakpoints, default breakpoint and default behavior. Responsive props will abide by your settings.
​
Recipes - Previous
Iterative areas
Next - Recipes
Explicit media query
Last modified 2yr ago
Copy link
Contents